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(` `); 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 // ? ` // // ` // : `` // }`) 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('Remote Biometric') this.title.append("text") .html('Identification') this.title.append("text") .attr("id", "subtitle") .html('' + CONFIG.subtitle + '') // 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 = ` ${getCategories(node)[0]}

${node.fulltext}

`; if (links.length) { const rels = links.length === 1 ? 'relationship' : 'relationships'; this.tooltipEl.innerHTML += ` Click to examine ${links.length} ${rels} `; } 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); }); ;