r
/
greens_report
forked from security_vision/semantic_graph
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactored version with working filters

This commit is contained in:
Ruben van de Ven 2021-04-17 21:15:03 +02:00
parent 17d5584eb7
commit 2de48856ed
4 changed files with 582 additions and 548 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -16,3 +16,29 @@ wget https://d3js.org/d3.v6.min.js
```
python wiki_relations.py
```
## Data
_Ask_ SMW with the following query:
```
[[Category:Deployments||Institution]] OR [[Category:Technologies]] [[Developed by (institutions)::+]] OR [[Category:Technologies]] [[-Software Deployed::+]] OR [[Category:City]]
```
```
?Category
?Geolocation
?City
?City.Has Coordinates=City Coordinates
?City.Is in Country=City Country
?City.Is in Country.Has Coordinates=Country Coordinates
?Clients
?Managed by
?Used by
?Funded by
?Provided by
?Software Deployed
?Software Deployed.Developped by (institutions)=Software Developer
?Datasets Used
?Datasets Used.Developed by Institution=Dataset Developer
```

13
www/graph.css
View File

@ -19,7 +19,8 @@
body {
margin: 0;
overflow: hidden;
background: linear-gradient(to top, #040308, #AD4A28, #DD723C, #fc7001, #dcb697, #9ba5ae, #3e5879, #020b1a);
/* background: linear-gradient(to top, #040308, #AD4A28, #DD723C, #fc7001, #dcb697, #9ba5ae, #3e5879, #020b1a); */
background:linear-gradient(to top, #414141, #99a6b8);
font-family: sans-serif;
min-height: 100vh;
}
@ -33,9 +34,10 @@ svg.dragging {
cursor: grabbing;
}
svg .links line{
stroke: darkgray;
stroke-width: 1;
svg .links line,svg .links path{
stroke: #f3722c;
stroke-width: 3;
fill:none;
}
.links text{
@ -47,6 +49,7 @@ svg .links line{
.node text{
text-anchor: middle;
font-size:3pt;
}
.node circle{
@ -150,7 +153,7 @@ a:hover{
text-decoration: underline;
}
#filters{
#filters,#menu{
position: fixed;
left: 0;
top: 0;

798
www/graph.js
View File

@ -2,7 +2,7 @@
const CONFIG = {
'nodeSize': 8,
'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
'dataUrl': '../semantic_data.json',
'dataUrl': 'result.json',
'preSimulate': false, // run simulation before starting, so we don't start with lines jumping around
'labels': {
'rotate': true,
@ -14,46 +14,35 @@ const CONFIG = {
'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",
}
};
// thanks to https://bl.ocks.org/denisemauldin/cdd667cbaf7b45d600a634c8ae32fae5
var graph, store;
// let width = window.innerWidth;
// let height = window.innerHeight;
var filteredCategories = [];//= ["Institution"];
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(!filteredCategories.includes(f)) {
inputEl.checked = true;
}
inputEl.addEventListener('change', function(e){
if(e.target.checked) {
filteredCategories.forEach((d, i) => {
if(d == f) {
filteredCategories.splice(i, 1);
}
});
} else {
if(!filteredCategories.includes(f)) {
filteredCategories.push(f);
}
}
filter();
update();
})
document.getElementById('filters').appendChild(labelEl);
})
function getSizeForNode(node) {
@ -134,112 +123,142 @@ function splitText(text) {
};
function getTitle(obj) {
if (obj.parent) {
return "sub of " + obj.parent.split('#', 1)[0].replace(/_/g, " ")
}
return obj['@id'].split('#', 1)[0].replace(/_/g, " ")
return obj.fulltext;
}
function getCategories(obj) {
if (!obj._INST) {
return [];
}
return obj['_INST'].map(classId => classId.split('#', 1)[0]);
// console.log(obj);
return obj.printouts['Category'].map(n => n.fulltext.split(':')[1]);
}
function getClasses(obj) {
if (!obj._INST)
return 'node';
const classes = getCategories(obj);
return 'node ' + classes.join(' ');
}
function getUrl(obj) {
return CONFIG.baseUrl + obj['@id'].split('#', 1)[0];
}
// see also: http://bl.ocks.org/dwtkns/4973620
let width = window.innerWidth;
let height = window.innerHeight;
const svg = d3.select("svg")
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);
}
// SET UP MAP:
const projection = d3.geoHill()
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([width / 2, height * 1.5])
.scale(height * 1.5);
.translate([this.vbWidth / 2, this.vbHeight * 1.5])
.scale(this.vbHeight * 1.5);
const proj = d3.geoPath().projection(projection);
const graticule = d3.geoGraticule10();
const euCenter = projection(CONFIG.eu.center);
this.nodeSize = this.vbHeight / 200;
const container = svg.append("g").attr("id", "container");
// container.append("circle").attr("cx", euCenter[0]).attr("cy", euCenter[1]).attr("r", 500).attr("fill","red")
this.proj = d3.geoPath().projection(this.projection);
const graticule = d3.geoGraticule10();
const euCenter = this.projection(CONFIG.eu.center);
const g_countries = container.append("g").attr("id", "countries");
const g_borders = container.append("g").attr("id", "borders");
const g_graticule = container.append("g")
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', proj(graticule))
.attr('d', this.proj(graticule))
.attr("stroke-width", "!px")
.attr("stroke", (n) => {
return "lightgray";
});
;
;
function sizeWindow() {
width = window.innerWidth;
height = window.innerHeight;
svg
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height);
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)";
});
//
//
// update();
}
sizeWindow()
window.addEventListener('resize', sizeWindow);
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";
});
svg.call(d3.zoom().scaleExtent([0.3, 8]).on("start", function () {
svg.node().classList.add("dragging");
}).on("end", function () {
svg.node().classList.remove("dragging");
}).on("zoom", function ({ transform }) {
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);
}));
}));
var node = container.append("g")
this.node = container.append("g")
.attr('class', 'nodes')
.selectAll(".node");
var link = container.append("g")
this.link = container.append("g")
.attr('class', 'links')
.selectAll(".link");
// let linkLines = link.selectAll('line');
// 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()]);
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
}
}
})
.then(([data, world]) => {
buildGraph(data, world);
}).catch(error => {
console.error(error);
});
;
let linkCounts = [];
const simulation = d3.forceSimulation()
// 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
@ -248,138 +267,36 @@ const simulation = d3.forceSimulation()
// // if(l.source.lat || l.target.lat) {
// return 2;
// }
return 10;
})
.strength((l) => {
if (linkCounts.length < 1) {
// replicate from d3-force/src/link.js so we have access to this in our own strength function
linkCounts = new Array(store.nodes.length)
for (let i = 0; i < store.links.length; ++i) {
let link = store.links[i];
linkCounts[link.source.index] = (linkCounts[link.source.index] || 0) + 1;
linkCounts[link.target.index] = (linkCounts[link.target.index] || 0) + 1;
}
}
if (store.nodesBorderingEu.indexOf(l.source) !== -1 || store.nodesBorderingEu.indexOf(l.target) !== -1) {
// console.log('outside', l.target)
return 0.0001;
}
// original:
return 1 / Math.min(linkCounts[l.source.index], linkCounts[l.target.index]);
return this.nodeSize * 5;
})
)
// .force("charge", d3.forceManyBody()
// .strength(-10)
// )
// .force("center", d3.forceCenter(width / 2, height / 2))
.force("collision", d3.forceCollide(function (d) {
return getSizeForNode(d) * 1.5; // avoid overlapping nodes
}))
.force("outsideEu", d3.forceRadial(height/2.7, euCenter[0], euCenter[1])
.strength(function (node, idx) {
// return 1;
if (store.nodesBorderingEu.indexOf(node) !== -1) {
// console.log(node, store.nodesBorderingEu.indexOf(node) !== -1);
return 1;
}
return 0;
})
);
.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))
;
function buildGraph(data, world) {
// land = topojson.feature(world, world.objects.land)
const borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
const countries = topojson.feature(world, world.objects.countries).features;
const nodes = data.nodes.filter(n => n._INST || n.parent).map(d => Object.create(d));
console.log('all nodes', nodes);
const nodeMap = Object.fromEntries(nodes.map(d => [d['@id'], d]));
const links = data.links.filter(l => nodeMap[l.source] && nodeMap[l.target]).map(d => Object.create(d));
console.log(nodeMap, links);
graph = {
"nodes": [],
"links": [],
}
store = {
"nodes": [...nodes],
"links": [...links],
"nodesBorderingEu": links.filter(l => l.name == 'City' && (nodeMap[l.target].lon < CONFIG.eu.lonMin || nodeMap[l.target].lon > CONFIG.eu.lonMax)).map(l => nodeMap[l.source]),
this.update();
}
filter();
// the .source and .target attributes are still ID's. Only after initialisation of the force are they replaced with their representative objects
const nodesEastOfEu = links.filter(l => l.name == 'City' && (nodeMap[l.target].lon < CONFIG.eu.lonMin)).map(l => nodeMap[l.source]);
var c = g_countries.selectAll("path")
.data(countries)
.enter()
.append("path")
.attr("class", "countries")
.attr("d", proj)
.attr("fill", (n) => {
if (CONFIG.countries.indexOf(n.properties.name) !== -1) {
return '';
}
return "rgba(200,200,200,.7)";
});
g_borders
.append("path")
.attr("class", "borders")
.attr("d", proj(borders))
.attr("fill", "none")
.attr("stroke-width", "2px")
.attr("stroke", (n) => {
return "white";
});
nodes.forEach(function (d) {
d.x = euCenter[0];
d.y = euCenter[1];
if (store.nodesBorderingEu.indexOf(d) !== -1) {
if (nodesEastOfEu.indexOf(d) !== -1) {
d.x = 466.5836692678423;
d.y = 466.3493609705728;
} else {
d.x = 1406.608195836305;
d.y = 807.9332721328062;
getSizeForNode(node) {
return this.nodeSize;
}
}
if (d.lon && d.lat) {
// console.log("fix node", d);
var p = projection([d.lon, d.lat]);
d.x = p[0];
d.y = p[1];
d.fx = p[0];
d.fy = p[1];
}
})
update();
return svg.node();
}
function update() {
update() {
console.log(this.graph)
// see also: https://www.createwithdata.com/enter-exit-with-d3-join/
node = node.data(graph.nodes, d => d.id)
.join(function (enter) {
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.call(drag(simulation));
group.on("click", (evt, n) => selectNode(evt, n, node));
group.append('circle').attr("r", getSizeForNode);
group.append('circle').attr("r", this.nodeSize);
var nodeTitle = group.append('text').attr("class", "nodeTitle").attr("y", "5");
nodeTitle
.each(function (node, nodes) {
@ -401,22 +318,20 @@ function update() {
textLength = self.node().getComputedTextLength();
}
// scale according to text length:
if (textLength > getSizeForNode(node) * 2) {
self.attr('transform', 'scale(' + getSizeForNode(node) * 2 / textLength / 1.05 + ')');
if (textLength > this.nodeSize * 2) {
self.attr('transform', 'scale(' + this.nodeSize * 2 / textLength / 1.05 + ')');
}
});
return group;
});
// let linkText;
// let linkLine;
link = link
.data(graph.links)
this.link = this.link
.data(this.graph.links)
.join(
enter => {
console.log(enter);
let group = enter.append("g").attr("class", "link");
group.append("line").attr("marker-end", "url(#arrowHead)").attr('id', (d,i) => 'linkid_' + i);
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;
});
@ -433,91 +348,86 @@ function update() {
}
)
;
// let linkEnter = link.enter()
// let linkLine = link.selectAll('line');
// let newLinks = link.enter().append("g").attr("class","link");
// newLinks.append("line").attr("marker-end", "url(#arrowHead)");
// newLinks.filter((l) => l.name != "City").append("text").text(function (l) {
// return l.name;
// });
// link.exit().remove();
// let linkLine = link.selectAll('line');
// let linkText = link.selectAll('text');
// // }) function(update){ return update }, function(exit) {
// // exit.remove();
// // })
this.simulation.nodes(this.graph.nodes);
this.simulation.force("link")
.links(this.graph.links);
// ;
// console.log(link, linkText, linkLine)
simulation.nodes(graph.nodes);
simulation.on("tick", () => {
this.simulation.on("tick", () => {
// console.log('t', link._groups[0].length);
link.each(function (d) {
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 (d.source.x < d.target.x) {
sourceX = d.source.x;
targetX = d.target.x;
} else if (d.target.x < d.source.x) {
targetX = d.target.x;
sourceX = d.source.x;
} else if (d.target.isCircle) {
targetX = sourceX = d.target.x;
} else if (d.source.isCircle) {
targetX = sourceX = d.source.x;
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 = (d.source.x + d.target.x) / 2;
if (midX > d.target.x) {
midX = d.target.x;
} else if (midX > d.source.x) {
midX = d.source.x;
} else if (midX < d.target.x) {
midX = d.target.x;
} else if (midX < d.source.x) {
midX = d.source.x;
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 = d.target.y - d.source.y;
dy = l.target.y - l.source.y;
angle = Math.atan2(dx, dy);
/* DISABLED
srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
srcSize = (typeof nodePositions[l.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
tgtSize = (typeof nodePositions[l.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
*/
var srcSize = getSizeForNode(d.source);
var tgtSize = getSizeForNode(d.target);
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.
d.sourceX = sourceX + Math.sin(angle) * srcSize;
d.targetX = targetX - Math.sin(angle) * tgtSize;
d.sourceY = d.source.y + Math.cos(angle) * srcSize;
d.targetY = d.target.y - Math.cos(angle) * tgtSize;
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('line')
.attr("x1", d.sourceX)
.attr("y1", d.sourceY)
.attr("x2", d.targetX)
.attr("y2", d.targetY)
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 = (d.target.x - d.source.x) / 2;
const dy = (d.target.y - d.source.y) / 2;
const x = d.source.x + dx;
const y = d.source.y + dy;
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)) {
@ -528,138 +438,240 @@ function update() {
});
})/*.attr("x1", function (d) {
return d.sourceX;
}).attr("y1", function (d) {
return d.sourceY;
}).attr("x2", function (d) {
return d.targetX;
}).attr("y2", function (d) {
return d.targetY;
});*/
// linkText
})
node
this.node
.attr("transform", d => `translate(${d.x}, ${d.y})`);
});
simulation.force("link")
.links(graph.links);
this.simulation.alpha = 0;
this.simulation.restart();
// simulate the first bit without drawing, so we don't have the 'jumping' graph in the beginning
if (CONFIG.preSimulate) {
for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
simulation.tick();
}
}
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()
}
}
// filter function
function filter() {
// add and remove nodes from data based on type filters
store.nodes.forEach(function (n) {
const cats = getCategories(n);
if (cats.every(c => filteredCategories.includes(c))) {
// hide
graph.nodes.forEach(function (d, i) {
if (n['@id'] === d['@id']) {
graph.nodes.splice(i, 1);
}
});
} else {
// add back
if (!graph.nodes.includes(n)) {
graph.nodes.push(n);
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
let checkOn;
if(typeof store.links[0].source !== 'object') {
checkOn = graph.nodes.map(n => n['@id'])
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 {
checkOn = graph.nodes
}
store.links.forEach(function (l) {
if (!checkOn.includes(l.source) || !checkOn.includes(l.target)) {
// hide
console.log('hide!')
graph.links.forEach(function (d, i) {
if (l === d) {
graph.links.splice(i, 1);
if (l.filtered === false) {
this.graph.links.forEach((d, i) => {
if (l.id === d.id) {
this.graph.links.splice(i, 1);
}
});
} else if (!graph.links.includes(l)) {
graph.links[graph.links.length] = l;
// console.log('add', l, graph.links)
}
l.filtered = true;
}
});
// console.log(graph.links)
}
const drag = simulation => {
let ignoreDrag = false;
function dragstarted(event) {
if (event.subject.fx) ignoreDrag = true;
if (!event.active) simulation.alphaTarget(0.3).restart();
event.subject.fx = event.subject.x;
event.subject.fy = event.subject.y;
}
function dragged(event) {
if (ignoreDrag) return;
event.subject.fx = event.x;
event.subject.fy = event.y;
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;
}
function dragended(event) {
if (ignoreDrag) {
ignoreDrag = false;
return;
inputEl.addEventListener('change', (e) => {
if (e.target.checked) {
this.filters.categories.forEach((d, i) => {
if (d == f) {
this.filters.categories.splice(i, 1);
}
if (!event.active) simulation.alphaTarget(0);
event.subject.fx = null;
event.subject.fy = null;
});
} else {
if (!this.filters.categories.includes(f)) {
this.filters.categories.push(f);
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
};
function selectNode(evt, node, d3Node) {
console.log(evt, node, d3Node);
document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
d3Node._groups[0][node.index].classList.add('selected');
infoEl = document.getElementById('nodeInfo');
infoEl.classList.remove('hidden');
const url = getUrl(node);
const hrefEl = infoEl.querySelector('.nodeHref');
hrefEl.textContent = getTitle(node);
hrefEl.setAttribute('href', url);
infoEl.querySelector('.nodeContents').src = url;
}
const closeEl = document.getElementById('closeInfo');
if(closeEl) {
document.getElementById('closeInfo').addEventListener('click', (evt) => {
document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
document.getElementById('nodeInfo').classList.add('hidden');
}
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);
});
;

23
www/index.html
View File

@ -1,35 +1,28 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="graph.css">
</head>
<body>
<svg id='graph'>
<defs>
<marker markerHeight="4" markerWidth="4" refY="0" refX="6" viewBox="0 -3 8 6" preserveAspectRatio="none" orient="auto" id="arrowHead" fill="lightgray"><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>
</defs>
</svg>
<!-- <div id="nodeInfo" class='hidden'>
<h2 class='nodeTitle'><a class='nodeHref' target="_blank"></a></h2>
<div id='closeInfo'>&times;</div>
<iframe class='nodeContents'></iframe>
</div> -->
<div id='map'></div>
<div id="filters">
</div>
<script src="https://d3js.org/d3.v6.js"></script>
<script src="crossfilter.js"></script>
<script src="dc.js"></script>
<script src="https://d3js.org/d3-geo-projection.v3.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="//unpkg.com/d3-geo-zoom"></script>
<script src="graph.js"></script>
<script src="cola.min.js"></script>
<script src="mapChart2.js"></script>
<script src="graph2.js"></script>
</body>
</html>