forked from security_vision/semantic_graph
1879 lines
65 KiB
JavaScript
1879 lines
65 KiB
JavaScript
|
|
const CONFIG = {
|
|
'title': "Remote Biometric Identification",
|
|
'subtitle': "A survey of the European Union",
|
|
// 'nodeSize': 8,
|
|
'nodeRadius': 5,
|
|
'nodeRepositionPadding': 12,
|
|
'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
|
|
'dataUrl': 'remote_biometric_identification.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],
|
|
},
|
|
"institution_map": {
|
|
"Local Government": "Government",
|
|
"Regional Government": "Government",
|
|
"International Organization": "Government",
|
|
"Watchdog": "Government",
|
|
// "NGO": "Organisation",
|
|
"Foundation": "NGO",
|
|
"University": "Research",
|
|
"Expert Group": "Research",
|
|
},
|
|
"filters": {
|
|
"Institution": {
|
|
"label": "Institution",
|
|
"type": "categories",
|
|
},
|
|
// TODO: nested filters
|
|
// TODO:restructure, allow for groups of types:
|
|
// [12:08, 07-05-2021] Francesco Ragazzi: Government / Regional / local can be the same
|
|
// [12:08, 07-05-2021] Francesco Ragazzi: Also IO
|
|
// [12:08, 07-05-2021] Francesco Ragazzi: NGO, Foundation can be grouped
|
|
// [12:08, 07-05-2021] Francesco Ragazzi: University, Research, Expert group can be grouped
|
|
// [12:08, 07-05-2021] Francesco Ragazzi: Watchdog and can also be grouped with government
|
|
"Government": {
|
|
// "label": "Institution",
|
|
"type": "institution_types",
|
|
},
|
|
"Law Enforcement": {
|
|
// "label": "Institution",
|
|
"type": "institution_types",
|
|
},
|
|
"Company": {
|
|
// "label": "Institution",
|
|
"type": "institution_types",
|
|
},
|
|
"NGO": {
|
|
// "label": "Institution",
|
|
"type": "institution_types",
|
|
},
|
|
|
|
// "Regional Government": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
// "Local Government": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
// "Foundation": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
// "University": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
"Research": {
|
|
// "label": "Institution",
|
|
"type": "institution_types",
|
|
},
|
|
// "Labour Union": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
// "Watchdog": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
// "Expert Group": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
// "International Organization": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
// "Art Project": {
|
|
// // "label": "Institution",
|
|
// "type": "institution_types",
|
|
// },
|
|
"Deployments": {
|
|
"label": "Deployment",
|
|
"type": "categories",
|
|
},
|
|
|
|
/* "Technology", "Dataset"*/
|
|
},
|
|
|
|
"link_properties": [
|
|
"Clients",
|
|
"Managed by",
|
|
"Used by",
|
|
"Funded by",
|
|
"Provided by",
|
|
"Software Deployed",
|
|
"Software Developer",
|
|
"Dataset Developer",
|
|
"Related Institutions",
|
|
"Is Department Of",
|
|
"Involved Entities",
|
|
],
|
|
|
|
"link_labels": {
|
|
"Clients": {
|
|
"label": "is client of",
|
|
"swap": true,
|
|
},
|
|
"Managed by": {
|
|
"label": "manages",
|
|
"swap": true,
|
|
},
|
|
"Used by": {
|
|
"label": "uses",
|
|
"swap": true,
|
|
},
|
|
"Funded by": {
|
|
"label": "is funded by",
|
|
"swap": false,
|
|
},
|
|
"Provided by": {
|
|
"label": "provides",
|
|
"swap": true,
|
|
},
|
|
"Software Deployed": {
|
|
"label": "is used in",
|
|
"swap": true,
|
|
},
|
|
"Software Developer": {
|
|
"label": "is developed by",
|
|
"swap": false,
|
|
},
|
|
"Dataset Developer": {
|
|
"label": "develops dataset for",
|
|
"swap": true,
|
|
},
|
|
"Related Institutions": {
|
|
"label": "is related to",
|
|
"swap": true,
|
|
},
|
|
"Is Department Of": {
|
|
"label": "is part of",
|
|
"swap": false,
|
|
},
|
|
"Involved Entities": {
|
|
"label": "is involved in",
|
|
"swap": true,
|
|
},
|
|
},
|
|
|
|
"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": ["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": 10,
|
|
},
|
|
|
|
"cases": [
|
|
"Data-lab Burglary-Free Neighbourhood",
|
|
"Dragonfly Project",
|
|
]
|
|
};
|
|
|
|
|
|
function getLinkLabelConfig(linkName){
|
|
if(CONFIG.link_labels.hasOwnProperty(linkName)){
|
|
return CONFIG.link_labels[linkName];
|
|
}
|
|
return {
|
|
'label': linkName,
|
|
'swap': false,
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
let cats = obj.printouts['Category'].map(n => n.fulltext.split(':')[1]);
|
|
if (obj.printouts.hasOwnProperty("Institution Type") && obj.printouts['Institution Type'].length) {
|
|
obj.printouts['Institution Type'].forEach(type => {
|
|
cats.push(getInstitutionClass(type.fulltext));
|
|
});
|
|
}
|
|
// return
|
|
return cats;
|
|
}
|
|
function getInstitutionClass(name) {
|
|
return "Institution-" + slugify(name);
|
|
}
|
|
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.ready = false;
|
|
this.readyCallback = false;
|
|
this.root = d3.select(parent);
|
|
this.resizeEvent = window.addEventListener('resize', this.resize.bind(this));
|
|
this.tooltipEl = document.getElementById('tooltip');
|
|
this.sourcesEl = document.getElementById('sources');
|
|
this.selectedNode = null;
|
|
|
|
document.getElementById('closeSelection').addEventListener('click', (ev) => this.deselectNode());
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
// calculate which text labels overlap.
|
|
calculateLabels() {
|
|
let els;
|
|
if(this.selectedNode === null) {
|
|
els = document.querySelectorAll('.node text')
|
|
} else {
|
|
// only related texts are visible
|
|
// so only these need to be considered
|
|
els = document.querySelectorAll('.node.linkedSelected text, .node.selected 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="3" markerWidth="3" 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="3" markerWidth="3" 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="3" markerWidth="3" 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)
|
|
}
|
|
document.querySelector(':root').style.setProperty('--zoom', evt.transform.k);
|
|
document.querySelector(':root').style.setProperty('--zoom-sqrt', Math.pow(evt.transform.k, 1/3));
|
|
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.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);
|
|
|
|
this.ready = true;
|
|
if(this.readyCallback)
|
|
this.readyCallback();
|
|
}
|
|
|
|
triggerReset(){
|
|
const cb = () => {
|
|
this.deselectNode();
|
|
this.resetZoom();
|
|
}
|
|
if(this.ready){
|
|
cb();
|
|
} else {
|
|
this.readyCallback = cb;
|
|
}
|
|
}
|
|
|
|
triggerSelect(toSelect){
|
|
const cb = () => {
|
|
const node = this.graph.nodes.filter(n => n.id == toSelect)[0]
|
|
this.selectNode(node);
|
|
}
|
|
if(this.ready){
|
|
cb();
|
|
} else {
|
|
this.readyCallback = cb;
|
|
}
|
|
}
|
|
|
|
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) {
|
|
if(el.tagName != 'path'){
|
|
let parentEl = el.parentNode;
|
|
if(parentEl.tagName != 'g'){
|
|
parentEl = parentEl.parentNode;
|
|
}
|
|
el = parentEl.querySelector('path');
|
|
}
|
|
|
|
const categories = getCategories(node);
|
|
if (categories.includes('Deployments')){
|
|
this.tooltipEl.classList.add('deploymentTooltip');
|
|
} else {
|
|
this.tooltipEl.classList.remove('deploymentTooltip');
|
|
}
|
|
|
|
// TODO: make links optional (otherwise collect links here)
|
|
this.tooltipEl.innerHTML = `
|
|
<span class='category'>${categories[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', 'node');
|
|
}
|
|
|
|
showRelationTooltip(link, evt) {
|
|
const {label, swap} = getLinkLabelConfig(link.name);
|
|
this.tooltipEl.classList.remove('deploymentTooltip');
|
|
if(swap){
|
|
this.tooltipEl.innerHTML = `
|
|
<span class='relation'>
|
|
<span class='entity'>${link.target.fulltext}</span>
|
|
${label}
|
|
<span class='entity'>${link.source.fulltext}</span>
|
|
</span>
|
|
`;
|
|
} else {
|
|
this.tooltipEl.innerHTML = `
|
|
<span class='relation'>
|
|
<span class='entity'>${link.source.fulltext}</span>
|
|
${label}
|
|
<span class='entity'>${link.target.fulltext}</span>
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
const rectTT = this.tooltipEl.getBoundingClientRect();
|
|
|
|
this.trackerEv = (evt) => {
|
|
this.tooltipEl.style.top = (evt.clientY - rectTT.height - 10) + 'px';
|
|
this.tooltipEl.style.left = (evt.clientX - rectTT.width / 2) + 'px';
|
|
};
|
|
window.addEventListener('mousemove', this.trackerEv);
|
|
|
|
this.tooltipEl.classList.add('visible', 'link');
|
|
}
|
|
|
|
hideTooltip() {
|
|
this.tooltipEl.classList.remove('visible', 'node', 'link');
|
|
if(this.trackerEv){
|
|
window.removeEventListener('mousemove', this.trackerEv);
|
|
this.trackerEv = null;
|
|
}
|
|
}
|
|
|
|
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'));
|
|
|
|
this.container.classed('selectedNode', true);
|
|
|
|
document.body.classList.add('selectedNode');
|
|
|
|
this.showSources(node);
|
|
// TODO: show details;
|
|
|
|
// alert('not yet implemented');
|
|
}
|
|
|
|
deselectNode() {
|
|
this.hideSources();
|
|
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');
|
|
}
|
|
this.container.classed('selectedNode', false);
|
|
document.body.classList.remove('selectedNode');
|
|
}
|
|
|
|
showSources(node){
|
|
|
|
const categories = getCategories(node);
|
|
if (!categories.includes('Deployments')){
|
|
return;
|
|
}
|
|
if(!node.printouts['Source'].length) {
|
|
return;
|
|
}
|
|
|
|
|
|
setTimeout(() => { // give potential visible sources time to hide
|
|
let sources = [];
|
|
for(let source of node.printouts['Source']){
|
|
const url = document.createElement('a');
|
|
url.href = source;
|
|
const hostname = url.hostname.startsWith('www.') ? url.hostname.substring(4) : url.hostname;
|
|
sources .push(`<a href="${source}" target="_blank">${hostname}</a>`);
|
|
}
|
|
|
|
|
|
const title = node.printouts['Source'].length > 1 ? "Sources" : "Source"
|
|
this.sourcesEl.innerHTML = `<h3>${title}</h3> ` + sources.join(', ');
|
|
this.sourcesEl.classList.add('visible');
|
|
}, 500);
|
|
}
|
|
|
|
hideSources(){
|
|
this.sourcesEl.classList.remove('visible');
|
|
}
|
|
|
|
hoverNode(evt, n){
|
|
console.log('hover!', 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);
|
|
}
|
|
}
|
|
|
|
if(evt){
|
|
this.showTooltip(evt.target, n, linkedLinks);
|
|
}
|
|
|
|
}
|
|
|
|
endHoverNode(n){
|
|
this.hideTooltip();
|
|
const links = document.getElementsByClassName('linkedHover');
|
|
while (links.length) {
|
|
links[0].classList.remove('linkedHover');
|
|
}
|
|
}
|
|
|
|
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.insert("g", ":first-child")
|
|
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) => {
|
|
this.hoverNode(evt, n);
|
|
});
|
|
group.on("mouseout", (evt, n) => {
|
|
this.endHoverNode(n);
|
|
});
|
|
// 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", "4").attr('x', 5);
|
|
// nodeTitle.on('mouseover', (evt, n) =>{
|
|
// console.log(evt,n)
|
|
// });
|
|
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", "4").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;
|
|
});
|
|
|
|
|
|
|
|
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", (ev, link) => {
|
|
d3.select(ev.target).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');
|
|
}
|
|
}
|
|
|
|
this.showRelationTooltip(link, ev);
|
|
}).on("mouseout", (ev, link) => {
|
|
this.hideTooltip();
|
|
d3.select(ev.target).classed('hover', false);
|
|
const nodes = document.getElementsByClassName('linkHover');
|
|
while (nodes.length) {
|
|
nodes[0].classList.remove('linkHover');
|
|
}
|
|
}).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
|
|
// it not in the center, but rather slightly out of it
|
|
// use a small ofset for the angle to compensate roughly for the curve
|
|
l.sourceX = sourceX + Math.sin(angle+.5) * srcSize;
|
|
l.targetX = targetX - Math.sin(angle-.5) * tgtSize;
|
|
l.sourceY = l.source.y + Math.cos(angle+.5) * srcSize;
|
|
l.targetY = l.target.y - Math.cos(angle-.5) * 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);
|
|
|
|
// find radius of arc based on distance between points
|
|
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")
|
|
.attr('d', `M ${l.sourceX},${l.sourceY} A ${dr},${dr} 0 0,1 ${l.targetX},${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
|
|
}
|
|
}
|
|
}
|
|
|
|
// zoom & translate the graph to fit the provided nodes
|
|
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;
|
|
// group institution types
|
|
if(node.printouts['Institution Type'].length ){
|
|
for (let idx = 0; idx < node.printouts['Institution Type'].length; idx++) {
|
|
const type = node.printouts['Institution Type'][idx];
|
|
if(CONFIG.institution_map.hasOwnProperty(type.fulltext)){
|
|
node.printouts['Institution Type'][idx].fulltext = CONFIG.institution_map[type.fulltext];
|
|
}
|
|
}
|
|
// node.printouts['Institution Type'] = CONFIG.institution_map[node.printouts['Institution Type']];
|
|
}
|
|
|
|
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': [],
|
|
'institution_types': [],
|
|
}
|
|
|
|
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();
|
|
});
|
|
}
|
|
|
|
isFiltered(node) {
|
|
if (this.filters.categories.includes(node.printouts['Category'][0].fulltext.split(':')[1]))
|
|
return true;
|
|
if (node.printouts['Institution Type'].length && this.filters.institution_types.includes(node.printouts['Institution Type'][0].fulltext))
|
|
return true;
|
|
return false;
|
|
}
|
|
|
|
filter() {
|
|
// add and remove nodes from data based on type filters
|
|
this.nodes.forEach((n) => {
|
|
if (!this.isFiltered(n)) {
|
|
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.source.filtered && !l.target.filtered) {
|
|
if (l.filtered || typeof l.filtered === 'undefined')
|
|
this.graph.links.push(l);
|
|
l.filtered = false;
|
|
} else {
|
|
if (l.filtered === false) {
|
|
console.log('filter', l.id);
|
|
this.graph.links.forEach((d, i) => {
|
|
if (l.nr === d.nr) {
|
|
this.graph.links.splice(i, 1);
|
|
}
|
|
});
|
|
}
|
|
l.filtered = true;
|
|
}
|
|
});
|
|
|
|
console.log(this.graph.nodes.length, this.graph.links.length)
|
|
}
|
|
|
|
render() {
|
|
Object.keys(CONFIG.filters).forEach(f => {
|
|
const settings = CONFIG.filters[f];
|
|
|
|
// if (settings.type == 'institution_types')
|
|
// // TODO; For now, skip
|
|
// return;
|
|
|
|
let categories = [f];
|
|
if (settings.type == 'institution_types')
|
|
categories = ['Institution', getInstitutionClass(f)];
|
|
|
|
let labelEl = document.createElement('label');
|
|
labelEl.setAttribute('id', 'filter-'+slugify(f));
|
|
labelEl.classList.add(settings.type)
|
|
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 " + categories.join(' '))
|
|
.append('path')
|
|
.attr('d', getSymbolForCategories(categories)());
|
|
inputEl.type = "checkbox";
|
|
textEl.innerText = settings.hasOwnProperty('label') ? settings.label : f;
|
|
labelEl.appendChild(inputEl);
|
|
labelEl.appendChild(textEl);
|
|
|
|
if (!this.filters[settings.type].includes(f)) {
|
|
inputEl.checked = true;
|
|
}
|
|
|
|
inputEl.addEventListener('change', (e) => {
|
|
if (e.target.checked) {
|
|
this.filters[settings.type].forEach((d, i) => {
|
|
if (d == f) {
|
|
this.filters[settings.type].splice(i, 1);
|
|
}
|
|
});
|
|
this.root.classList.remove('filter-'+slugify(f))
|
|
} else {
|
|
if (!this.filters[settings.type].includes(f)) {
|
|
this.filters[settings.type].push(f);
|
|
}
|
|
this.root.classList.add('filter-'+slugify(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, '#filter-items');
|
|
|
|
mapGraph.setWorld(world);
|
|
mapGraph.setStore(store);
|
|
// alluvialGraph.setData(data.results);
|
|
|
|
store.render()
|
|
mapGraph.render()
|
|
// alluvialGraph.render()
|
|
|
|
}).catch(error => {
|
|
console.error(error);
|
|
});
|
|
;
|