forked from security_vision/semantic_graph
678 lines
24 KiB
JavaScript
678 lines
24 KiB
JavaScript
|
|
const CONFIG = {
|
|
'nodeSize': 8,
|
|
'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
|
|
'dataUrl': 'result.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",
|
|
}
|
|
};
|
|
|
|
// let width = window.innerWidth;
|
|
// let height = window.innerHeight;
|
|
|
|
|
|
|
|
|
|
|
|
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(' ');
|
|
}
|
|
|
|
|
|
|
|
class NodeMap {
|
|
constructor(parent) {
|
|
this.root = d3.select(parent);
|
|
this.resizeEvent = window.addEventListener('resize', this.resize.bind(this));
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
render() {
|
|
this.svg = this.root.append('svg')
|
|
this.svg.append('defs').html('<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="#f3722c"><path d="M0,-3L8,0L0,3"></path></marker><marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHeadSelected"><path d="M0,-3L8,0L0,3" fill="white"></path></marker>');
|
|
this.resize();
|
|
|
|
this.projection = d3.geoHill()
|
|
.rotate([-12, 0, 0])
|
|
.translate([this.vbWidth / 2, this.vbHeight * 1.5])
|
|
.scale(this.vbHeight * 1.5);
|
|
|
|
this.nodeSize = this.vbHeight / 200;
|
|
|
|
this.proj = d3.geoPath().projection(this.projection);
|
|
const graticule = d3.geoGraticule10();
|
|
const euCenter = this.projection(CONFIG.eu.center);
|
|
|
|
const 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 = container.append("g").attr("id", "countries");
|
|
this.g_borders = container.append("g").attr("id", "borders");
|
|
this.g_graticule = 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", "countries")
|
|
.attr("d", this.proj)
|
|
.attr("fill", (n) => {
|
|
if (CONFIG.countries.indexOf(n.properties.name) !== -1) {
|
|
return '';
|
|
}
|
|
return "rgba(200,200,200,.7)";
|
|
});
|
|
|
|
this.g_borders
|
|
.append("path")
|
|
.attr("class", "borders")
|
|
.attr("d", this.proj(this.borders))
|
|
.attr("fill", "none")
|
|
.attr("stroke-width", "2px")
|
|
.attr("stroke", (n) => {
|
|
return "white";
|
|
});
|
|
|
|
this.svg.call(d3.zoom().scaleExtent([0.3, 8]).on("start", () => {
|
|
this.svg.node().classList.add("dragging");
|
|
}).on("end", () => {
|
|
this.svg.node().classList.remove("dragging");
|
|
}).on("zoom", ({ transform }) => {
|
|
container.attr("transform", transform);
|
|
}));
|
|
|
|
this.node = container.append("g")
|
|
.attr('class', 'nodes')
|
|
.selectAll(".node");
|
|
this.link = container.append("g")
|
|
.attr('class', 'links')
|
|
.selectAll(".link");
|
|
|
|
|
|
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]);
|
|
d.x = p[0];
|
|
d.y = p[1];
|
|
// d.targetX = p[0];
|
|
// d.targetY = p[1];
|
|
d.fx = p[0];
|
|
d.fy = p[1];
|
|
// d.targetLat = d.printouts[prop][0].lat;
|
|
// d.targetLon = d.printouts[prop][0].lon;
|
|
break
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
|
|
// 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.update();
|
|
}
|
|
|
|
getSizeForNode(node) {
|
|
return this.nodeSize;
|
|
}
|
|
|
|
update() {
|
|
console.log(this.graph)
|
|
// 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);
|
|
// group.call(drag(simulation));
|
|
group.on("click", (evt, n) => selectNode(evt, n, node));
|
|
group.append('circle').attr("r", this.nodeSize);
|
|
var nodeTitle = group.append('text').attr("class", "nodeTitle").attr("y", "5");
|
|
nodeTitle
|
|
.each(function (node, 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", "-10").attr("x", "0");
|
|
const tspan = self.append("tspan").text(titleTexts[1]).attr("y", "10").attr("x", "0");
|
|
const textLength1 = tspan.node().getComputedTextLength();
|
|
const textLength2 = tspan.node().getComputedTextLength();
|
|
textLength = Math.max(textLength1, textLength2);
|
|
} else {
|
|
self.text(titleText);
|
|
textLength = self.node().getComputedTextLength();
|
|
}
|
|
// scale according to text length:
|
|
if (textLength > this.nodeSize * 2) {
|
|
self.attr('transform', 'scale(' + this.nodeSize * 2 / textLength / 1.05 + ')');
|
|
}
|
|
});
|
|
return group;
|
|
});
|
|
|
|
this.link = this.link
|
|
.data(this.graph.links)
|
|
.join(
|
|
enter => {
|
|
console.log(enter);
|
|
let group = enter.append("g").attr("class", "link");
|
|
group.append("path").attr("marker-end", "url(#arrowHead)").attr('id', (d, i) => 'linkid_' + i);
|
|
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();
|
|
|
|
}
|
|
|
|
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()
|
|
}
|
|
}
|
|
|
|
var mapGraph = new NodeMap('#map')
|
|
|
|
JsonToGraph = function (data) {
|
|
let nodes = [];
|
|
let links = [];
|
|
|
|
let smwBugFixLocationMaps = {};
|
|
console.log(data)
|
|
for (const node_id in data.results) {
|
|
if (Object.hasOwnProperty.call(data.results, node_id)) {
|
|
let node = data.results[node_id];
|
|
node.id = 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": 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`);
|
|
|
|
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 }
|
|
}
|
|
|
|
|
|
|
|
var typeFilterList = [
|
|
// 'Deployments'
|
|
]
|
|
class Store {
|
|
constructor(graph, parent) {
|
|
this.nodes = graph.nodes;
|
|
this.links = graph.links;
|
|
this.graph = {
|
|
'nodes': [],
|
|
'links': []
|
|
}
|
|
|
|
this.root = document.querySelector(parent);
|
|
|
|
this._maps = [];
|
|
|
|
this.filters = {
|
|
'categories': [],
|
|
}
|
|
|
|
this.filter();
|
|
|
|
}
|
|
|
|
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');
|
|
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);
|
|
})
|
|
|
|
}
|
|
}
|
|
|
|
|
|
// 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);
|
|
store.render()
|
|
|
|
mapGraph.render()
|
|
|
|
}).catch(error => {
|
|
console.error(error);
|
|
});
|
|
;
|