semantic_graph/www/graph.js

const CONFIG = {
    'title': "Remote Biometric Identification",
    'subtitle': "A survey of the European Union",
    // 'nodeSize': 8,
    'nodeRadius': 5,
    'nodeRepositionPadding': 10,
    'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
    'dataUrl': 'result2.json',
    'preSimulate': false, // run simulation before starting, so we don't start with lines jumping around
    'labels': {
        'rotate': true,
    },
    'countries': ['Austria', 'Italy', 'Belgium', 'Latvia', 'Bulgaria', 'Lithuania', 'Croatia', 'Luxembourg', 'Cyprus', 'Malta', 'Czechia', 'Netherlands', 'Denmark', 'Poland', 'Estonia', 'Portugal', 'Finland	', 'Romania', 'France', 'Slovakia', 'Germany', 'Slovenia', 'Greece', 'Spain', 'Hungary', 'Sweden', 'Ireland'],
    'eu': {
        'lonMin': -10,
        'lonMax': 35,
        'center': [11, 47],
    },
    "filters": ["Institution", "Deployments",/* "Technology", "Dataset"*/],

    "link_properties": [
        "Clients",
        "Managed by",
        "Used by",
        "Funded by",
        "Provided by",
        "Software Deployed",
        "Software Developer",
        "Dataset Developer",
    ],

    "geo_properties": [
        "Geolocation",
        "City Coordinates",
        "Country Coordinates",
    ],

    "geo_property_map": { // used to work around a bug in SMW
        "City Coordinates": "City",
        "Country Coordinates": "City Country",
    },

    "alluvial_cats": ["Deployments"],
    "alluvial_props": {
        "Country": ["Country"],
        "City": ["City"],
        // ["Deployment type"], // TODO: select this
        // ["Institution type"], // TODO: select this (local gov, etc.)
        "Dataset": ["Datasets used"],
        "Company": ["Managed by", "Provided by", "Developped by (institutions)"],
        "Tech": ["Technologies Used", "Software Deployed"],
        "Funding": ["Funded by"],
    },
    "zoom": {
        "scale_min": .2,
        "scale_max": 20,
    },

    "cases": [
        "Data-lab Burglary-Free Neighbourhood",
        "Dragonfly Project",
    ]
};

// let width = window.innerWidth;
// let height = window.innerHeight;


function getSymbolForCategories(classes) {
    if (!Array.isArray(classes)) {
        classes = [classes];
    }
    if (classes.includes('Institution')) {
        return d3.symbol()
            .type(d3.symbolTriangle)
            .size(CONFIG.nodeRadius * 16);
    }

    return d3.symbol()
        .type(d3.symbolCircle)
        .size(CONFIG.nodeRadius * 16);
}

// returns a symbol function
function getSymbolForNode(n) {
    const classes = getCategories(n);
    return getSymbolForCategories(classes);
}

// Slugify a string, by https://lucidar.me/en/web-dev/how-to-slugify-a-string-in-javascript/
function slugify(str) {
    str = str.replace(/^\s+|\s+$/g, '');

    // Make the string lowercase
    str = str.toLowerCase();

    // Remove accents, swap ñ for n, etc
    var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;";
    var to = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";
    for (var i = 0, l = from.length; i < l; i++) {
        str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
    }

    // Remove invalid chars
    str = str.replace(/[^a-z0-9 -]/g, '')
        // Collapse whitespace and replace by -
        .replace(/\s+/g, '-')
        // Collapse dashes
        .replace(/-+/g, '-');

    return str;
}



function getSizeForNode(node) {
    //   if (node.hasOwnProperty('https://schema.org/thumbnailUrl')) return nodeSize;
    //   if (weights[node['@id']]) return nodeSize * weights[node['@id']];
    //   if (node['@id'] == firstNodeId) return nodeSize * 1.2;
    //   // everynode has at least one link. these should equal 1
    //   return nodeSize * (.7 + Math.min(20, linkMap[node['@id']].length) / 40);
    if (node.parent) {
        return 2;
    }
    // if(getCategories(node).indexOf('City') !== -1) {
    //     return 2;
    // }
    return CONFIG.nodeSize;
}

function splitText(text) {
    var characters = [" ", "-", "_", '\xAD'];
    var charSplitPos = {};
    var mid = Math.floor(text.length / 2);
    var splitPos = false;
    var splitPosChar = false;
    // split sentences
    var _iteratorNormalCompletion6 = true;
    var _didIteratorError6 = false;
    var _iteratorError6 = undefined;

    try {
        for (var _iterator6 = characters[Symbol.iterator](), _step6; !(_iteratorNormalCompletion6 = (_step6 = _iterator6.next()).done); _iteratorNormalCompletion6 = true) {
            var char = _step6.value;

            if (text.indexOf(char) < 0) {
                continue;
            }
            var tmid = text.substr(0, mid).lastIndexOf(char);
            if (tmid === -1) {
                tmid = text.indexOf(char);
            }
            tmid += 1; // we want to cut _after_ the character
            // console.log("Char", char, tmid);
            if (splitPos === false || Math.abs(tmid - mid) < Math.abs(splitPos - mid)) {
                // console.log("least!");
                splitPos = tmid;
                splitPosChar = char;
            }
        }
        // console.log("pos",splitPos)

    } catch (err) {
        _didIteratorError6 = true;
        _iteratorError6 = err;
    } finally {
        try {
            if (!_iteratorNormalCompletion6 && _iterator6.return) {
                _iterator6.return();
            }
        } finally {
            if (_didIteratorError6) {
                throw _iteratorError6;
            }
        }
    }

    if (splitPos === false) {
        return false;
    }

    var text1 = text.substr(0, splitPos).trim();
    var text2 = text.substr(splitPos).trim();

    if (splitPosChar == '\xAD') {
        text1 += "-";
    }

    // find most equal split
    return [text1, text2];
};

function getTitle(obj) {
    return obj.fulltext;
}
function getCategories(obj) {
    // console.log(obj);
    return obj.printouts['Category'].map(n => n.fulltext.split(':')[1]);
}
function getClasses(obj) {
    const classes = getCategories(obj);
    return 'node ' + classes.join(' ');
}

function getLinkId(link) {
    return "link_" + link.nr;
    // return "link-" + link.source.id + '-' + link.target.id + '-' + slugify(link.name);
}



class NodeMap {
    constructor(parent) {
        this.root = d3.select(parent);
        this.resizeEvent = window.addEventListener('resize', this.resize.bind(this));
        this.tooltipEl = document.getElementById('tooltip');
        this.selectedNode = null;
    }

    resize() {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.vbWidth = 2000;
        this.vbHeight = 2000;
        this.svg
            .attr("viewBox", [0, 0, this.vbWidth, this.vbHeight])
            .attr("width", this.width)
            .attr("height", this.height);
    }


    reset() {
        this.root.select('svg').remove();
        this.render();
    }

    calculateLabels() {
        const els = document.querySelectorAll('.node text')
        for (let i = 0; i < els.length; i++) {
            const el = els[i];
            let overlapping = false;
            for (let index = 0; index < i; index++) {
                const el2 = els[index];
                const box1 = el.getBoundingClientRect()
                const box2 = el2.getBoundingClientRect()
                const overlap = !(box1.right < box2.left ||
                    box1.left > box2.right ||
                    box1.bottom < box2.top ||
                    box1.top > box2.bottom)
                if (overlap) {
                    // TODO: try to flip labels horizontally to see if that helps
                    el.classList.add('overlapping');
                    overlapping = true;
                    break;
                }
            }
            if (!overlapping)
                el.classList.remove('overlapping');
        }

    }

    render() {
        this.svg = this.root.append('svg')
        this.svg.append('defs').html(`<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" ><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelectedRelated"><path d="M0,-3L8,0L0,3"></path></marker>
        <!--Sketching:-->
        <defs>
          <filter id="tint">
            <feColorMatrix values="1.1 0 0 0 0  0 1.1 0 0 0  0 0 0.9 0 0  0 0 0 1 0" />
          </filter>
          <filter id="splotch">
            <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="4" />
            <feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 1.2" result="texture" />
            <feComposite in="SourceGraphic" in2="texture" operator="in" />
            <feGaussianBlur stdDeviation="3.5" />
          </filter>
          <filter id="pencil">
            <feTurbulence baseFrequency="0.03" numOctaves="6" type="fractalNoise" />
            <feDisplacementMap scale="4" in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" />
            <feGaussianBlur stdDeviation="0.5" />
          </filter>
        </defs>`);

        this.svg.on('click', (e) => { console.log(e); this.deselectNode()})

        // const noise = 0.001;
        // this.svg.append('defs').append('filter').attr('id', 'splotch').html( `${
        //     noise
        //       ? `<feTurbulence
        //     type="fractalNoise"
        //     baseFrequency="${noise}"
        //     numOctaves="4"
        // ></feTurbulence>
        // <feColorMatrix
        //     values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.9 0.2"
        //     result="texture"
        // ></feColorMatrix>
        // <feComposite
        //     in="SourceGraphic"
        //     in2="texture"
        //     operator="in"
        // ></feComposite>`
        //       : ``
        //   }`)

        this.resize();

        this.projection = d3.geoHill()
            .rotate([-12, 0, 0])
            .translate([this.vbWidth, this.vbHeight * 3])
            .scale(this.vbHeight * 3);

        this.nodeSize = this.vbHeight / 200;

        this.proj = d3.geoPath().projection(this.projection);
        const graticule = d3.geoGraticule10();
        const euCenter = this.projection(CONFIG.eu.center);

        this.container = this.svg.append("g").attr("id", "container");
        // container.append("circle").attr("cx", euCenter[0]).attr("cy", euCenter[1]).attr("r", 500).attr("fill","red")

        this.g_countries = this.container.append("g").attr("id", "countries");
        this.g_borders = this.container.append("g").attr("id", "borders");
        this.g_graticule = this.container.append("g").attr('id', 'graticule')
            .append('path')
            .attr("class", "graticule")
            .attr("fill", "none")
            .attr('d', this.proj(graticule))
            .attr("stroke-width", "!px")
            .attr("stroke", (n) => {
                return "lightgray";
            });
        ;


        const c = this.g_countries.selectAll("path")
            .data(this.countries)
            .enter()
            .append("path")
            .attr("class", (n) => {
                if (CONFIG.countries.indexOf(n.properties.name) !== -1) {
                    return 'country eu_country';
                }
                return "country";
            })
            .attr("d", this.proj)
            // .attr("filter", 'url(#splotch)')
        // .attr("fill", );

        this.g_borders
            .append("path")
            .attr("class", "borders")
            .attr("d", this.proj(this.borders))

        let zoomTimeout = null;
        this.zoom = d3.zoom()
            .scaleExtent([CONFIG.zoom.scale_min, CONFIG.zoom.scale_max])
            .on("start", () => {
                this.svg.node().classList.add("dragging");
            }).on("end", () => {
                this.svg.node().classList.remove("dragging");
            }).on("zoom", (evt) => {
                this.container.attr("transform", evt.transform);
                const oldZoom = this.svg.classed('zoomed');
                const newZoom = evt.transform.k > 2.0;
                if (zoomTimeout) {
                    clearTimeout(zoomTimeout)
                }
                zoomTimeout = setTimeout(() => {
                    this.g_nodes.attr('style', `font-size:${22000 / this.height / evt.transform.k}pt`)
                    setTimeout(() => {
                        this.calculateLabels();
                    }, 500);
                }, 250);
                if (oldZoom != newZoom) {
                    this.svg.classed('zoomed', newZoom);

                }
            });
        this.title = this.container.append('g').attr('id', 'header');

        const titleFeature = {
            "type": "LineString",
            "coordinates": []
        };
        const title2Feature = {
            "type": "LineString",
            "coordinates": []
        };
        const subtitleFeature = {
            "type": "LineString",
            "coordinates": []
        };
        for (let index = 26; index < 70; index++) {
            // projection apparently tries to find the shortest path between two points
            // which is NOT following a lat/lon line on the globe
            titleFeature.coordinates.push([index, 52]);
            title2Feature.coordinates.push([index, 50.5]);
            subtitleFeature.coordinates.push([index, 49]);
        }
        this.title.append("path")
            .attr("id", "titlePath")
            .attr("d", this.proj(titleFeature))
            ;
        this.title.append("path")
            .attr("id", "title2Path")
            .attr("d", this.proj(title2Feature))
            ;
        this.title.append("path")
            .attr("id", "subtitlePath")
            .attr("d", this.proj(subtitleFeature))
            ;
        this.title.append("text")
            .html('<textPath  xlink:href="#titlePath">Remote Biometric</textPath>')
        this.title.append("text")
            .html('<textPath  xlink:href="#title2Path">Identification</textPath>')
        this.title.append("text")
            .attr("id", "subtitle")
            .html('<textPath  xlink:href="#subtitlePath">' + CONFIG.subtitle + '</textPath>')

        // this.title.append('text')
        //     .attr('class', 'title')
        //     .attr('x', 1000)
        //     .attr('y', 1000)
        //     .text(CONFIG.title);
        // this.title.append('text')
        //     .attr('class', 'subtitle')
        //     .attr('x', 1000)
        //     .attr('y', 1200)
        //     .text(CONFIG.subtitle);

        this.link = this.container.append("g")
            .attr('class', 'links')
            .selectAll(".link");
        this.g_nodes = this.container.append("g")
            .attr('class', 'nodes');
        this.node = this.g_nodes
            .selectAll(".node");


        this.graph.nodes.forEach((d) => {
            for (const prop of CONFIG.geo_properties) {

                // console.log(this,d.printouts, prop)
                if (d.printouts[prop].length) {
                    // console.log("fix node", d);
                    var p = this.projection([d.printouts[prop][0].lon, d.printouts[prop][0].lat]);

                    // initial positions:
                    d.x = p[0];
                    d.y = p[1];

                    //These are used when we need to move overlapping points:
                    d.originalX = p[0];
                    d.originalY = p[1];

                    // target pos for the force layout
                    d.fx = p[0];
                    d.fy = p[1];
                    // d.targetLat = d.printouts[prop][0].lat;
                    // d.targetLon = d.printouts[prop][0].lon;
                    break
                }
            }
        })

        this.store.configureTree();



        // this.nodeMap = Object.fromEntries(this.graph.nodes.map(d => [d['id'], d]));
        // this.links = this.graph.links.filter(l => this.nodeMap[l.source] && nodeMap[l.target]).map(d => Object.create(d));
        // console.log(this.nodeMap, this.graph.links);


        this.simulation = d3.forceSimulation()
            .force("link", d3.forceLink()
                .id(d => d['@id'])
                .iterations(2) // increase to make more rigid
                .distance((l) => {
                    // if (getCategories(l.source).indexOf('City') || getCategories(l.target).indexOf('City')) {
                    //     // if(l.source.lat || l.target.lat) {
                    //     return 2;
                    // }
                    return this.nodeSize * 5;
                })
            )
            // .force("charge", d3.forceManyBody()
            //     .strength(-10)
            // )
            // .force("center", d3.forceCenter(width / 2, height / 2))
            .force("collision", d3.forceCollide(this.nodeSize))
            // TODO look at simpler labels https://github.com/d3fc/d3fc/tree/master/packages/d3fc-label-layout
            // TODO look at rects https://github.com/emeeks/d3-bboxCollide
            // .force("posX", d3.forceX(n => n.targetX || 0).strength(n => n.targetX ? 1 : 0)) // TODO: should not be or 0
            // .force("posY", d3.forceY(n => n.targetY || 0).strength(n => n.targetY ? 1 : 0))
            ;

        this.svg
            .call(this.zoom)
            .call(this.zoom.transform, d3.zoomIdentity.scale(.5, .5));


        this.update();

        setTimeout(() => this.calculateLabels(), 1000);
    }

    resetZoom() {
        this.deselectNode();
        this.svg
            .transition()
            .duration(2000) // milliseconds
            .call(this.zoom.transform, d3.zoomIdentity.scale(.5, .5));
    }

    getSizeForNode(node) {
        return this.nodeSize;
    }

    getNodeRadius(node) {
        return CONFIG.nodeRadius;
    }

    resolveOverlaps() {
        // reset:
        this.graph.nodes.forEach((n) => {
            if (n.hasOwnProperty('originalX')) {
                n.x = n.originalX;
                n.y = n.originalY;
                n.fx = n.originalX;
                n.fy = n.originalY;
            }
        })

        this.store.configureTree();

        let moved = 0;

        // resolve overlapping points by repositioning
        this.graph.nodes.forEach((n) => {
            // only for fixed points:
            if (!n.hasOwnProperty('originalX')) {
                return;
            }

            const startX = n.originalX;
            const startY = n.originalY;
            let alpha = 0; // angle
            let step = 1;
            const d_alpha = Math.PI / 4;
            const r = this.getNodeRadius(n) + CONFIG.nodeRepositionPadding / 2;
            let foundNodes;
            let i = 0;
            // find a new pos until it's not overlapping anymore...
            while ((foundNodes = this.store.findVisibleInCircle(n.x, n.y, r)).length > 1) {
                this.store.quadtree.remove(n); // remove uses the current x,y so we need to do this before reconfiguring these
                n.x = startX + Math.cos(alpha) * r * 2 * step;
                n.y = startY + Math.sin(alpha) * r * 2 * step;
                this.store.quadtree.add(n);
                alpha += d_alpha;
                // on to the next round:
                if (alpha > Math.PI * 2) {
                    step++;
                    alpha -= Math.PI * 2;
                    alpha += d_alpha - 2; // little offset
                }
                i++;

                // if(n.fulltext == 'Control Room (Venice)') {
                //     console.log(startX, startY, n.x, n.y, r, foundNodes);
                //     // this.store.configureTree();
                //     // this.store.findVisibleInCircle(n.x, n.y, r).forEach((found) => console.log(found.x, found.y, found));
                // }
            }

            n.fx = n.x;
            n.fy = n.y;

            if (i > 0) {
                // we moved something, update tree

                console.debug('resolved for', n.fulltext, i);
                moved++;
            }

        });

        console.log(`moved ${moved} nodes`);
    }

    showTooltip(el, node, links) {
        // TODO: make links optional (otherwise collect links here)

        this.tooltipEl.innerHTML = `
        <span class='category'>${getCategories(node)[0]}</span>
        <h3>${node.fulltext}</h3>
        `;
        if (links.length) {
            const rels = links.length === 1 ? 'relationship' : 'relationships';
            this.tooltipEl.innerHTML += `
            <span class='clickForMore'>Click to examine ${links.length} ${rels}</span>
            `;
        }
        const rect = el.getBoundingClientRect()
        const rectTT = this.tooltipEl.getBoundingClientRect();
        this.tooltipEl.style.top = (rect.top - rectTT.height) + 'px';
        this.tooltipEl.style.left = (rect.left + rect.width / 2 - rectTT.width / 2) + 'px';
        // console.log(el, node, rect.top);

        this.tooltipEl.classList.add('visible');
    }

    hideTooltip() {
        this.tooltipEl.classList.remove('visible');
    }

    selectNode(node) {
        this.deselectNode(); // remove potential old selection

        this.selectedNode = node;
        let links = [];
        let connectedNodes = [];
        for (let link of this.graph.links) {
            if (link.source == node || link.target == node) {
                links.push(link);
                const otherNode = node == link.target ? link.source : link.target;
                connectedNodes.push(otherNode);
            }
        }

        let allNodes = [...connectedNodes, node];

        this.zoomFit(allNodes);

        document.getElementById(node.id).classList.add('selected');
        connectedNodes.forEach(n => document.getElementById(n.id).classList.add('linkedSelected'));
        links.forEach(l => document.getElementById(getLinkId(l)).classList.add('linkedSelected'));
        

        // TODO: show details;

        // alert('not yet implemented');
    }

    deselectNode() {
        this.selectedNode = null;
        let nodeEls = document.getElementsByClassName('selected');
        while (nodeEls.length) {
            nodeEls[0].classList.remove('selected');
        }
        let els = document.getElementsByClassName('linkedSelected');
        while (els.length) {
            els[0].classList.remove('linkedSelected');
        }
    }

    update() {
        // console.log(this.graph)

        this.resolveOverlaps();

        // see also: https://www.createwithdata.com/enter-exit-with-d3-join/
        this.node = this.node.data(this.graph.nodes, d => d.id)
            .join((enter) => {
                let group = enter.append("g")
                    .attr("class", getClasses)
                    .attr("id", (n) => getIdForTitle(n.fulltext));
                // group.call(drag(simulation));
                group.on("click", (evt, n) => {
                    evt.stopPropagation(); this.selectNode(n);
                });
                group.on("mouseover", (evt, n) => {
                    // d3.select(this).classed('hover', true);
                    const links = document.getElementsByClassName('link');
                    const linkedLinks = [];
                    for (let link of links) {
                        const l = d3.select(link).datum();
                        if (n == l.target || n == l.source) {
                            link.classList.add('linkedHover');
                            // make sure it's the last element, so it's drawn on top
                            // link.parentNode.appendChild(link); .. causes gliches
                            // find related related node:
                            const otherNode = n == l.target ? l.source : l.target;
                            const otherNodeEl = document.getElementById(otherNode.id);
                            otherNodeEl.classList.add('linkedHover');
                            linkedLinks.push(l);
                        }
                    }
                    this.showTooltip(evt.target, n, linkedLinks);

                });
                group.on("mouseout", (evt, n) => {
                    this.hideTooltip();
                    const links = document.getElementsByClassName('linkedHover');
                    while (links.length) {
                        links[0].classList.remove('linkedHover');
                    }
                });
                // group.append('circle').attr("r", 5 /*this.nodeSize*/);
                group.append('path')
                    .attr('d', (n) => {
                        return getSymbolForNode(n)(n);
                    })
                var nodeTitle = group.append('text').attr("class", "nodeTitle").attr("y", "3").attr('x', 5);
                nodeTitle
                    .each(function (node, i, nodes) {
                        var textLength = void 0;
                        const self = d3.select(this);
                        const titleText = getTitle(node);
                        var titleTexts = false;
                        if (titleText.length > 20) {
                            titleTexts = splitText(titleText);
                        }
                        if (titleTexts !== false) {
                            const tspan1 = self.append("tspan").text(titleTexts[0]).attr("y", "3").attr("x", "5");
                            const tspan = self.append("tspan").text(titleTexts[1]).attr("dy", "1em").attr("x", "5");
                            // const textLength1 = tspan.node().getComputedTextLength();
                            // const textLength2 = tspan.node().getComputedTextLength();
                            // textLength = Math.max(textLength1, textLength2);
                        } else {
                            self.text(titleText);
                            // textLength = self.node().getComputedTextLength();
                        }
                    });
                return group;
            });



        // const labelPadding = 1;

        // // // the component used to render each label
        // var textLabel = fc.layoutTextLabel()
        //     .padding(labelPadding)
        //     //.value(function(d) { return map_data.properties.iso; });
        //     //.value(function(d) { return d.properties.iso; });
        //     .value( (d) => getTitle(d));

        // // a strategy that combines simulated annealing with removal
        // // of overlapping labels
        // // */fc.layoutGreedy
        // const strategy = fc.layoutRemoveOverlaps(fc.layoutGreedy());

        // // create the layout that positions the labels
        // this.layoutLabels = fc.layoutLabel(strategy)
        //     .size((d, i, g) => {
        //         // measure the label and add the required padding
        //         const textSize = g[i].getElementsByTagName('text')[0].getBBox();
        //         console.log(textSize);
        //         // return [30, 20];
        //         return [textSize.width + labelPadding * 2, textSize.height + labelPadding * 2];
        //     })
        //     .position(d => [d.x, d.y])
        //     .component(textLabel);

        // // render!
        // // this.node.datum(this.graph.nodes,).call(labels)
        // this.labels = this.container.append('g').attr('class','labels');
        // this.labels.datum(this.graph.nodes)
        // // // this.node
        //      .call(this.layoutLabels);


        // // use simulate annealing to find minimum overlapping text label positions
        // //https://github.com/d3fc/d3fc-label-layout/blob/master/README.md
        // var strategy = fc.layoutGreedy();
        // //var strategy = fc.layoutAnnealing();

        // // create the layout that positions the labels
        // var labels = fc.layoutLabel(strategy)
        //     .size(function (_, i, g) {
        //         // measure the label and add the required padding
        //         var textSize = d3.select(g[i])
        //             .select('text')
        //             .node()
        //             .getBBox();
        //         return [textSize.width + labelPadding * 2, textSize.height + labelPadding * 2];
        //     })
        //     .position((d) => this.projection([d.lon, d.lat]); })
        //     .component(textLabel);

        // // render!
        // this.container.datum(countries)
        //     .call(labels);



        this.link = this.link
            .data(this.graph.links)
            .join(
                enter => {
                    let group = enter.append("g")
                        .attr("class", (l) => "link " + slugify(l.name))
                        .attr("id", getLinkId);
                    group.append("path")
                        .attr("marker-end", "url(#arrowHead)")
                        .attr('id', (d, i) => 'linkpath_' + i)
                        .on("mouseover", function (ev, link) {
                            d3.select(this).classed('hover', true);
                            const nodes = document.getElementsByClassName('node');
                            for (let n of nodes) {
                                const d = d3.select(n).datum();
                                if (d == link.target || d == link.source) {
                                    n.classList.add('linkHover');
                                }
                            }
                            // console.log(l);
                        }).on("mouseout", function (ev, link) {
                            d3.select(this).classed('hover', false);
                            const nodes = document.getElementsByClassName('linkHover');
                            while (nodes.length) {
                                nodes[0].classList.remove('linkHover');
                            }
                            // l.classed('hover',false);
                            // l.target.classed('hover',false);
                            // l.source.classed('hover',false);
                            // console.log(l,'l');
                        }).on("click", (ev, link) => {
                            ev.stopPropagation();
                            this.selectNode(link.source);
                        })
                        ;
                    group.filter((l) => l.name != "City").append("text").attr("class", "labelText").text(function (l) {
                        return l.name;
                    });
                    // group.append("text")
                    //         .attr("class", "labelText")
                    //         .attr("dx", 20)
                    //         .attr("dy", 0)
                    //         .style("fill", "red")
                    //     .append("textPath")
                    //         .attr("xlink:href", function (d, i) { return "#linkid_" + i; })
                    //         .attr("startOffset","50%")
                    //         .text((d,i) => d.name );
                    return group;
                }
            )
            ;


        this.simulation.nodes(this.graph.nodes);
        this.simulation.force("link")
            .links(this.graph.links);

        this.simulation.on("tick", () => {

            // console.log('t', link._groups[0].length);
            const _mapGraph = this;
            this.link.each(function (l) {
                let sourceX, targetX, midX, dx, dy, angle;

                // This mess makes the arrows exactly perfect.
                // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
                if (l.source.x < l.target.x) {
                    sourceX = l.source.x;
                    targetX = l.target.x;
                } else if (l.target.x < l.source.x) {
                    targetX = l.target.x;
                    sourceX = l.source.x;
                } else if (l.target.isCircle) {
                    targetX = sourceX = l.target.x;
                } else if (l.source.isCircle) {
                    targetX = sourceX = l.source.x;
                } else {
                    midX = (l.source.x + l.target.x) / 2;
                    if (midX > l.target.x) {
                        midX = l.target.x;
                    } else if (midX > l.source.x) {
                        midX = l.source.x;
                    } else if (midX < l.target.x) {
                        midX = l.target.x;
                    } else if (midX < l.source.x) {
                        midX = l.source.x;
                    }
                    targetX = sourceX = midX;
                }

                dx = targetX - sourceX;
                dy = l.target.y - l.source.y;
                angle = Math.atan2(dx, dy);

                /* DISABLED
                srcSize = (typeof nodePositions[l.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
                tgtSize = (typeof nodePositions[l.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
                */
                var srcSize = _mapGraph.getSizeForNode(l.source);
                var tgtSize = _mapGraph.getSizeForNode(l.target);

                // Compute the line endpoint such that the arrow
                // is touching the edge of the node rectangle perfectly.
                l.sourceX = sourceX + Math.sin(angle) * srcSize;
                l.targetX = targetX - Math.sin(angle) * tgtSize;
                l.sourceY = l.source.y + Math.cos(angle) * srcSize;
                l.targetY = l.target.y - Math.cos(angle) * tgtSize;

                // const coor_source = _mapGraph.projection.invert([l.source.x, l.source.y]);
                // const coor_target = _mapGraph.projection.invert([l.target.x, l.target.y]);
                // const middleCoor = [coor_source[0] * .5 + coor_target[0] * .5, coor_source[1] * .5 + coor_target[1] * .5];
                // const middlePoint = _mapGraph.projection(middleCoor);

                const dr = Math.sqrt(dx * dx + dy * dy);

                // "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y
                let rel = d3.select(this);
                rel.select("path") //${middlePoint[0]},${middlePoint[1]}
                    // .attr('d', `M ${l.sourceX},${l.sourceY} L   ${l.targetX},${l.targetY}`)
                    .attr('d', `M ${l.sourceX},${l.sourceY} A ${dr},${dr} 0 0,1   ${l.targetX},${l.targetY}`)
                // .attr("x1", l.sourceX)
                // .attr("y1", l.sourceY)
                // .attr("x2", l.targetX)
                // .attr("y2", l.targetY)

                rel.select('text')
                    .attr("transform", function (d) {
                        const dx = (l.target.x - l.source.x) / 2;
                        const dy = (l.target.y - l.source.y) / 2;
                        const x = l.source.x + dx;
                        const y = l.source.y + dy;
                        const deg = Math.atan(dy / dx) * 180 / Math.PI;
                        // if dx/dy == 0/0 -> deg == NaN
                        if (isNaN(deg)) {
                            return "";
                        }
                        // return "";
                        return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")";
                    });


            })

            this.node
                .attr("transform", d => `translate(${d.x}, ${d.y})`);
        });


        this.simulation.alpha = 0;
        this.simulation.restart();
        this.calculateLabels()
    }

    setWorld(world) {
        this.borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
        this.countries = topojson.feature(world, world.objects.countries).features;
    }

    setStore(store) {
        this.store = store;
        this.graph = this.store.graph;
        store.registerMap(this);
    }

    // alias for update (redraw is used in dc)
    redraw() {
        this.update()
    }

    // viewBox + preserveAspectRatio can lead to a visible area that is larger than
    // the viewBox. Try to get this
    getVisibleBox() {
        const svgEl = this.svg.node()
        const vbRatio = svgEl.viewBox.baseVal.width / svgEl.viewBox.baseVal.height;
        const wRatio = this.width / this.height;
        if (wRatio > vbRatio) {
            // wider
            return {
                width: (wRatio / vbRatio) * svgEl.viewBox.baseVal.width,
                height: svgEl.viewBox.baseVal.height
            }
        } else {
            // taller
            return {
                width: svgEl.viewBox.baseVal.width,
                height: (vbRatio / wRatio) * svgEl.viewBox.baseVal.height
            }
        }
    }

    zoomFit(nodes, paddingPercent = 0.8, transitionDuration = 2000) {
        // var bounds = root.node().getBBox();
        const x0 = Math.min(...nodes.map(n => n.x - CONFIG.nodeRadius));
        const x1 = Math.max(...nodes.map(n => n.x + CONFIG.nodeRadius));
        const y0 = Math.min(...nodes.map(n => n.y - CONFIG.nodeRadius));
        const y1 = Math.max(...nodes.map(n => n.y + CONFIG.nodeRadius));

        const width = x1 - x0;
        const height = y1 - y0;

        const visibleBox = this.getVisibleBox();
        const fullWidth = visibleBox.width, //2000, //this.width, TODO: use viewbox now, but consider the overflowing of the vbox
            fullHeight = visibleBox.height; //2000; //this.height;
        const viewBox = this.svg.node().viewBox.baseVal;
        const midX = x0 + width / 2,
            midY = y0 + height / 2;
        if (width == 0 || height == 0) return; // nothing to fit
        let scale = paddingPercent / Math.max(width / fullWidth, height / fullHeight);
        scale = Math.min(CONFIG.zoom.scale_max, scale);
        const translate = [fullWidth / 2 - midX, fullHeight / 2 - midY];
        const transform = d3.zoomIdentity.translate(
            -midX * scale + viewBox.width / 2,
            -midY * scale + viewBox.height / 2)
            .scale(scale);
        // console.log("zoomFit", x0, x1, y0, y1, translate, scale, transform);
        this.svg
            .transition()
            .duration(transitionDuration || 0) // milliseconds
            .call(this.zoom.transform, transform);
        // .call(this.zoom.translateTo, midX, midY)
        // .call(this.zoom.scaleTo, scale);
    }
}

class AlluvialMap {
    constructor(parent) {
        this.root = d3.select(parent);
        this.resizeEvent = window.addEventListener('resize', this.resize.bind(this));
    }

    setData(results) {
        this.graph = JsonToAlluvial(results);
    }

    resize() {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.vbWidth = 2000;
        this.vbHeight = 2000;
        this.svg
            .attr("viewBox", [0, 0, this.vbWidth, this.vbHeight])
            .attr("width", this.width)
            .attr("height", this.height);

    }

    reset() {
        console.warning("Not yet implemented");
    }

    update() {
        // this.alluvial = this.parseGraph(this.store.graph)
    }


    render() {
        this.svg = this.root.append('svg')
        
        this.resize();

        this.sankey = d3.sankey()
            .nodeId(d => d.id)
            // .nodeAlign('justify')
            .nodeWidth(40) // height
            .nodePadding(10)
            .extent([[1, 5], [2000 - 1, 2000 - 5]]);
        // console.log(this.graph);
        let s = this.sankey({
            nodes: this.graph.nodes.map(d => Object.assign({}, d)),
            links: this.graph.links.map(d => Object.assign({}, d))
        });

        this.nodes = s.nodes;
        this.links = s.links;

        const scale = d3.scaleOrdinal(d3.schemeCategory10);
        const color = (c) => c == "Unknown" ? "#333" : scale(c);


        this.svg.append("g")
            .attr("stroke", "#000")
            .selectAll("rect")
            .data(this.nodes)
            .join("rect")
            .attr("x", d => d.y0)
            .attr("y", d => d.x0)
            .attr("height", d => d.x1 - d.x0)
            .attr("width", d => d.y1 - d.y0)
            // .attr("fill", d => color(d.box === undefined ? d.name : d.box))
            .attr("fill", d => color(d.name))
            // .attr("fill", 'blue')
            .append("title")
            .text(d => `${d.box}: ${d.name}\n${d.value}`);

        const link = this.svg.append("g")
            .attr("fill", "none")
            .attr("stroke-opacity", 0.5)
            .selectAll("g")
            .data(this.links)
            .join("g")
            .style("mix-blend-mode", "multiply");



        const edgeColor = 'path'; // either: path, none, input, output
        if (edgeColor === "path") {
            const gradient = link.append("linearGradient")
                .attr("id", (d, i) => {
                    const id = `link-${i}`; // thanks https://talk.observablehq.com/t/how-do-i-work-with-the-d3-sankey-example/1696/3
                    d.uid = `url(#${id})`;
                    return id;
                })
                .attr("gradientUnits", "userSpaceOnUse")
                .attr("y1", d => d.source.x1)
                .attr("y2", d => d.target.x0)
                .attr("x1", 0)
                .attr("x2", 0);
            // .attr("y1", "0%")
            // .attr("y2", "100%")
            // .attr("x1", "0%")
            // .attr("x2", "0%");

            gradient.append("stop")
                .attr("offset", "0%")
                .attr("stop-color", d => color(d.source.name));

            gradient.append("stop")
                .attr("offset", "100%")
                .attr("stop-color", d => color(d.target.name));
        }

        link.append("path")
            // .attr("d", d3.sankeyLinkHorizontal())
            .attr("d", d3.linkVertical()
                .source(function (d) { return [d.y0, d.source.x1]; })
                .target(function (d) { return [d.y1, d.target.x0]; })
            )

            .attr("stroke", d => edgeColor === "none" ? "#aaa"
                : edgeColor === "path" ? d.uid
                    : edgeColor === "input" ? color(d.source)
                        : color(d.target))
            // .attr("stroke", 'red')
            .attr("stroke-width", d => Math.max(1, d.width));

        link.append("title")
            .text(d => `${d.source.name} → ${d.target.name}\n${d.value}`);

        this.svg.append("g")
            .attr("font-family", "sans-serif")
            // .attr("font-size", 10)
            .attr("class", 'flow_label')
            .selectAll("text")
            .data(this.nodes)
            .join("text")
            .attr("x", d => (d.y1 + d.y0) / 2)
            .attr("y", d => d.x0 < this.width / 2 ? d.x1 + 6 : d.x0 - 6)
            .attr("dy", "0.35em")
            .attr("text-anchor", d => d.x0 < this.width / 2 ? "start" : "end")
            .text(d => d.name);

        return this.svg.node();
    }

}

titleIdMap = {};
function getIdForTitle(title) {
    if (!titleIdMap.hasOwnProperty(title)) {
        titleIdMap[title] = slugify(title) + `-${Object.keys(titleIdMap).length}`
    }
    return titleIdMap[title];
}

JsonToGraph = function (data) {
    let nodes = [];
    let links = [];

    let smwBugFixLocationMaps = {};
    console.log(data)
    let i = 0;
    let linkI = 0;
    for (const node_id in data.results) {
        if (Object.hasOwnProperty.call(data.results, node_id)) {
            i++;
            let node = data.results[node_id];
            node.id = getIdForTitle(node.fulltext); //node_id;
            nodes.push(node);
            // console.log(node_id, node);

            // work around SMW bug in Ask. 1/2
            for (const idx of Object.keys(CONFIG.geo_property_map)) {
                if (node.printouts[idx].length) {
                    const srcProp = CONFIG.geo_property_map[idx];
                    const loc = node.printouts[srcProp][0].fulltext;
                    smwBugFixLocationMaps[loc] = node.printouts[idx];
                    // console.debug("Set location for", loc, node.printouts[idx])
                }
            }

            for (const prop of CONFIG.link_properties) {
                if (!node.printouts.hasOwnProperty(prop)) {
                    continue;
                }
                for (const target_node of node.printouts[prop]) {
                    links.push({
                        "source": node.id,
                        "target": getIdForTitle(target_node.fulltext),
                        "name": prop,
                    })
                }
            }
        }
    }

    let fixes = 0;
    nodes.forEach((node) => {
        // work around SMW bug in Ask. 2/2
        for (const idx of Object.keys(CONFIG.geo_property_map)) {
            if (!node.printouts[idx].length) {
                const srcProp = CONFIG.geo_property_map[idx];
                // only retrievable if we know the name of the location (which for some reason _is_ often there)
                if (!node.printouts[srcProp].length) {
                    continue;
                }
                const loc = node.printouts[srcProp][0].fulltext;
                if (!smwBugFixLocationMaps.hasOwnProperty(loc)) {
                    continue;
                }
                node.printouts[idx] = smwBugFixLocationMaps[loc]
                fixes++;
            }
        }
    })

    console.debug(`Fixed location for ${fixes} nodes`);

    nodeMap = Object.fromEntries(nodes.map(d => [d['id'], d]));
    links = links.filter(l => nodeMap[l.source] && nodeMap[l.target]).map(l => {
        l.source = nodeMap[l.source];
        l.target = nodeMap[l.target];
        l.nr = linkI++;
        return l;
    }).filter((link, index, self) =>
        // remove incidental duplicates
        index === self.findIndex((l) => (
            l.source.id === link.source.id && l.target.id === link.target.id && l.name === link.name
        ))
    );



    return { nodes, links }
}

JsonToAlluvial = function (data) {
    let boxes = {};
    let links = [];

    for (const box in CONFIG.alluvial_props) {
        boxes[box] = []
    }

    const relevant_categories = CONFIG.alluvial_cats.map(c => "Category:" + c);

    // gather boxes ('node' in alluvial)
    for (const node_id in data) {
        if (Object.hasOwnProperty.call(data, node_id)) {
            let node = data[node_id];

            // we only want deployments
            if (!relevant_categories.includes(node.printouts["Category"][0].fulltext)) {
                continue;
            }

            for (const box in CONFIG.alluvial_props) {
                let has_any = false;
                for (const prop of CONFIG.alluvial_props[box]) {
                    // console.log(box, prop);
                    if (!node.printouts.hasOwnProperty(prop)) {
                        continue;
                    }
                    for (const target_node of node.printouts[prop]) {
                        boxes[box].push(target_node.fulltext)
                        has_any = true;
                    }
                }
                if (!has_any) {
                    boxes[box].push("Unknown");
                }
            }
        }
    }

    const nodes = [];
    // reduce the items in the boxes by count. And convert to 'nodes' of the Sankey
    for (const box in CONFIG.alluvial_props) {
        boxes[box] = boxes[box].reduce(function (acc, curr) {
            if (typeof acc[curr] == 'undefined') {
                acc[curr] = 1;
            } else {
                acc[curr] += 1;
            }

            return acc;
        }, {});
        boxSorted = Object.keys(boxes[box]).sort(function (a, b) { return boxes[box][a] - boxes[box][b] }).reverse()
        useBox = boxSorted.splice(0, 10);
        restBox = boxSorted;
        // gather stats:
        boxes[box] = {
            'counts': boxes[box],
            'use': useBox,
            'rest': restBox,
        }

        for (const name of useBox) {
            nodes.push({
                name,
                "id": box + "::" + name,
                box,
                "about": "" // TODO, what can we say here?
            })
        };

        if (restBox.length) {
            nodes.push({
                "name": "Other",
                "id": box + "::" + "Other",
                box,
                "about": restBox, //some extra stats for use
            })
        }
    }

    let linkMap = {};
    // another round: now, we collect the links
    for (const node_id in data) {
        if (Object.hasOwnProperty.call(data, node_id)) {
            let node = data[node_id];

            // we only want deployments
            if (!relevant_categories.includes(node.printouts["Category"][0].fulltext)) {
                continue;
            }

            let prev_box = null;
            for (const box in CONFIG.alluvial_props) {
                let cur_box = [];
                let has_any = false;
                for (const prop of CONFIG.alluvial_props[box]) {
                    // console.log(box, prop);
                    if (!node.printouts.hasOwnProperty(prop)) {
                        continue;
                    }
                    for (const target_node of node.printouts[prop]) {
                        if (boxes[box].use.includes(target_node.fulltext)) {
                            cur_box.push(box + "::" + target_node.fulltext)
                        } else {
                            cur_box.push(box + "::" + "Other")
                        }
                        has_any = true;
                    }
                }
                if (!has_any) {
                    cur_box.push(box + "::" + "Unknown")
                }
                if (prev_box !== null) {
                    // TODO: links
                    for (let source of prev_box) {
                        for (let target of cur_box) {
                            if (typeof linkMap[source] == 'undefined') {
                                linkMap[source] = {};
                            }
                            if (typeof linkMap[source][target] == 'undefined') {
                                linkMap[source][target] = 0;
                            }
                            linkMap[source][target] += 1 / (prev_box.length * cur_box.length) // TODO: is this right?
                            // links.push({
                            //     source,
                            //     target,
                            //     value: 1 / (prev_box.length * cur_box.length) // TODO: is this right?
                            // })
                        }
                    }
                }
                prev_box = cur_box;
            }
        }
    }

    for (const source in linkMap) {
        for (const target in linkMap[source]) {
            links.push({
                source,
                target,
                value: linkMap[source][target]
            })
        }
    }


    console.log(boxes);

    // let fixes = 0;
    // nodes.forEach((node) => {
    //     // work around SMW bug in Ask. 2/2
    //     for (const idx of Object.keys(CONFIG.geo_property_map)) {
    //         if (!node.printouts[idx].length) {
    //             const srcProp = CONFIG.geo_property_map[idx];
    //             // only retrievable if we know the name of the location (which for some reason _is_ often there)
    //             if (!node.printouts[srcProp].length) {
    //                 continue;
    //             }
    //             const loc = node.printouts[srcProp][0].fulltext;
    //             if (!smwBugFixLocationMaps.hasOwnProperty(loc)) {
    //                 continue;
    //             }
    //             node.printouts[idx] = smwBugFixLocationMaps[loc]
    //             fixes++;
    //         }
    //     }
    // })

    // console.debug(`Fixed location for ${fixes} nodes`);

    // console.log(links.length);

    // nodeMap = Object.fromEntries(nodes.map(d => [d['id'], d]));
    // links = links.filter(l => nodeMap[l.source] && nodeMap[l.target]).map(l => {
    //     l.source = nodeMap[l.source];
    //     l.target = nodeMap[l.target];
    //     return l;
    // });



    return { nodes, links, boxes }
}


class Store {
    constructor(graph, parent) {
        this.nodes = graph.nodes;
        this.links = graph.links;
        // graph is a filtered version of this.nodes & this.links
        this.graph = {
            'nodes': [],
            'links': []
        }

        this.root = document.querySelector(parent);

        this._maps = [];

        this.filters = {
            'categories': [],
        }



        this.filter();

    }

    configureTree() {
        // set up the tree, we do this only after all points are configured.
        this.quadtree = d3.quadtree(
            this.nodes,
            (n) => n.x,
            (n) => n.y
        );
    }

    // from: https://observablehq.com/@d3/quadtree-findincircle
    findInCircle(x, y, radius, filter) {
        if (typeof this.quadtree === 'undefined') {
            this.configureTree();
        }

        const result = [],
            radius2 = radius * radius,
            accept = filter
                ? d => filter(d) && result.push(d)
                : d => result.push(d);

        this.quadtree.visit((node, x1, y1, x2, y2) => {
            if (node.length) {
                return x1 >= x + radius || y1 >= y + radius || x2 < x - radius || y2 < y - radius;
            }

            const dx = +this.quadtree._x.call(null, node.data) - x,
                dy = +this.quadtree._y.call(null, node.data) - y;
            if (dx * dx + dy * dy < radius2) {
                do { accept(node.data); } while (node = node.next);
            }
        });

        return result;
    }

    findVisibleInCircle(x, y, radius) {
        return this.findInCircle(x, y, radius, (n) => !n.filtered);
    }

    registerMap(map) {
        this._maps.push(map);
        return this;
    }

    update() {
        this._maps.forEach(m => {
            m.update();
        });
    }

    filter() {
        //	add and remove nodes from data based on type filters
        this.nodes.forEach((n) => {
            if (!this.filters.categories.includes(n.printouts['Category'][0].fulltext.split(':')[1])) {
                if (n.filtered || typeof n.filtered === 'undefined') {
                    n.filtered = false;
                    this.graph.nodes.push(n);
                }
            } else if (!n.filtered) {
                n.filtered = true;
                this.graph.nodes.forEach((d, i) => {
                    if (n.id === d.id) {
                        this.graph.nodes.splice(i, 1);
                        return;
                    }
                });
            }
        });

        //	add and remove links from data based on availability of nodes
        this.links.forEach((l) => {
            if (this.graph.nodes.includes(l.source) && this.graph.nodes.includes(l.target)) {
                if (l.filtered || typeof l.filtered === 'undefined')
                    this.graph.links.push(l);
                l.filtered = false;
            } else {
                if (l.filtered === false) {
                    this.graph.links.forEach((d, i) => {
                        if (l.id === d.id) {
                            this.graph.links.splice(i, 1);
                        }
                    });
                }
                l.filtered = true;
            }
        });
    }

    render() {
        CONFIG.filters.forEach(f => {

            let labelEl = document.createElement('label')
            let inputEl = document.createElement('input')
            let textEl = document.createElement('span');
            let svg = d3.select(labelEl).append('svg')
                .attr("viewBox", [-12, -12, 24, 24]);
            svg.append('g')
                .attr("class", "node " + f)
                .append('path')
                .attr('d', getSymbolForCategories(f)());
            inputEl.type = "checkbox";
            textEl.innerText = f;
            labelEl.appendChild(inputEl);
            labelEl.appendChild(textEl);

            if (!this.filters.categories.includes(f)) {
                inputEl.checked = true;
            }

            inputEl.addEventListener('change', (e) => {
                if (e.target.checked) {
                    this.filters.categories.forEach((d, i) => {
                        if (d == f) {
                            this.filters.categories.splice(i, 1);
                        }
                    });
                } else {
                    if (!this.filters.categories.includes(f)) {
                        this.filters.categories.push(f);
                    }
                }
                this.filter();
                this.update();
            })

            this.root.appendChild(labelEl);
        })

    }
}


var mapGraph = new NodeMap('#map')
// var alluvialGraph = new AlluvialMap('#alluvial')

// REQUEST ATLAS & GRAPH
const req_data = new Request(CONFIG.dataUrl, { method: 'GET' });
const req_world = new Request('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json', { method: 'GET' });
Promise.all([fetch(req_data), fetch(req_world)])
    .then(([res_data, res_world]) => {
        return Promise.all([res_data.json(), res_world.json()]);
    })
    .then(([data, world]) => {
        var graph = JsonToGraph(data);
        var store = new Store(graph, '#filters');

        mapGraph.setWorld(world);
        mapGraph.setStore(store);
        // alluvialGraph.setData(data.results);

        store.render()
        mapGraph.render()
        // alluvialGraph.render()

    }).catch(error => {
        console.error(error);
    });
;