From 8cb37534fcf743aa95979618bf10c3328041ad18 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Wed, 13 Oct 2021 18:35:49 +0200 Subject: [PATCH] final version for greens report --- www/graph.css | 18 +- www/graph.js | 182 +++++++++------ www/index.html | 7 +- www/report/report.css | 46 ++-- www/report/report.html | 517 ++++++++++++++++++++++++----------------- www/story.html | 506 ---------------------------------------- www/world_test.html | 309 ------------------------ 7 files changed, 453 insertions(+), 1132 deletions(-) delete mode 100644 www/story.html delete mode 100644 www/world_test.html diff --git a/www/graph.css b/www/graph.css index c801646..9495727 100644 --- a/www/graph.css +++ b/www/graph.css @@ -1,9 +1,4 @@ -@font-face { - font-family: 'Lexend Mega Regular'; - font-style: normal; - font-weight: normal; - src: local('Lexend Mega Regular'), url('LexendMega-Regular.woff') format('woff'); -} + :root { --color1: #9741f9; @@ -38,13 +33,13 @@ body { /* background: linear-gradient(to top, #040308, #AD4A28, #DD723C, #fc7001, #dcb697, #9ba5ae, #3e5879, #020b1a); */ background: var(--body-back); /* background: #9cb3c9; */ - font-family: sans-serif; + font-family: 'CelloSansRegular', sans-serif; min-height: 100vh; } svg { cursor: grab; - font-family: sans-serif; + font-family: 'CelloSansRegular', sans-serif; } svg.dragging { @@ -136,7 +131,7 @@ svg #header #titlePath, svg #header #title2Path, svg #header #subtitlePath { svg #header text { font-size: 180px; - font-family: "Lexend Mega Regular"; + font-family: "CelloSansRegular", sans-serif; /*Comfortaa*/ opacity: .8; fill: var(--title-color); @@ -627,5 +622,8 @@ p.subtitle { } #sources a{ - color: lightblue; + color: var(--link-hover-related-color); +} +#sources a:hover{ + color: var(--link-hover-color); } \ No newline at end of file diff --git a/www/graph.js b/www/graph.js index 1f490e5..9d8220f 100644 --- a/www/graph.js +++ b/www/graph.js @@ -114,6 +114,7 @@ const CONFIG = { "Software Developer", "Dataset Developer", "Related Institutions", + "Is Department Of", "Involved Entities", ], @@ -154,6 +155,10 @@ const CONFIG = { "label": "is related to", "swap": true, }, + "Is Department Of": { + "label": "is part of", + "swap": false, + }, "Involved Entities": { "label": "is involved in", "swap": true, @@ -363,6 +368,8 @@ function getLinkId(link) { 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'); @@ -542,57 +549,46 @@ class NodeMap { } }); - this.title = this.container.append('g').attr('id', 'header'); + // this.title = this.container.append('g').attr('id', 'header'); - const titleFeature = { - "type": "LineString", - "coordinates": [] - }; - const title2Feature = { - "type": "LineString", - "coordinates": [] - }; - const subtitleFeature = { - "type": "LineString", - "coordinates": [] - }; - for (let index = 26; index < 70; index++) { - // projection apparently tries to find the shortest path between two points - // which is NOT following a lat/lon line on the globe - titleFeature.coordinates.push([index, 52]); - title2Feature.coordinates.push([index, 50.5]); - subtitleFeature.coordinates.push([index, 49]); - } - this.title.append("path") - .attr("id", "titlePath") - .attr("d", this.proj(titleFeature)) - ; - this.title.append("path") - .attr("id", "title2Path") - .attr("d", this.proj(title2Feature)) - ; - this.title.append("path") - .attr("id", "subtitlePath") - .attr("d", this.proj(subtitleFeature)) - ; - this.title.append("text") - .html('Remote Biometric') - this.title.append("text") - .html('Identification') - this.title.append("text") - .attr("id", "subtitle") - .html('' + CONFIG.subtitle + '') - - // this.title.append('text') - // .attr('class', 'title') - // .attr('x', 1000) - // .attr('y', 1000) - // .text(CONFIG.title); - // this.title.append('text') - // .attr('class', 'subtitle') - // .attr('x', 1000) - // .attr('y', 1200) - // .text(CONFIG.subtitle); + // const titleFeature = { + // "type": "LineString", + // "coordinates": [] + // }; + // const title2Feature = { + // "type": "LineString", + // "coordinates": [] + // }; + // const subtitleFeature = { + // "type": "LineString", + // "coordinates": [] + // }; + // for (let index = 26; index < 70; index++) { + // // projection apparently tries to find the shortest path between two points + // // which is NOT following a lat/lon line on the globe + // titleFeature.coordinates.push([index, 52]); + // title2Feature.coordinates.push([index, 50.5]); + // subtitleFeature.coordinates.push([index, 49]); + // } + // this.title.append("path") + // .attr("id", "titlePath") + // .attr("d", this.proj(titleFeature)) + // ; + // this.title.append("path") + // .attr("id", "title2Path") + // .attr("d", this.proj(title2Feature)) + // ; + // this.title.append("path") + // .attr("id", "subtitlePath") + // .attr("d", this.proj(subtitleFeature)) + // ; + // this.title.append("text") + // .html('Remote Biometric') + // this.title.append("text") + // .html('Identification') + // this.title.append("text") + // .attr("id", "subtitle") + // .html('' + CONFIG.subtitle + '') this.link = this.container.append("g") .attr('class', 'links') @@ -668,6 +664,34 @@ class NodeMap { 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() { @@ -908,6 +932,39 @@ class NodeMap { 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) @@ -925,31 +982,10 @@ class NodeMap { evt.stopPropagation(); this.selectNode(n); }); group.on("mouseover", (evt, n) => { - // d3.select(this).classed('hover', true); - const links = document.getElementsByClassName('link'); - const linkedLinks = []; - for (let link of links) { - const l = d3.select(link).datum(); - if (n == l.target || n == l.source) { - link.classList.add('linkedHover'); - // make sure it's the last element, so it's drawn on top - // link.parentNode.appendChild(link); .. causes gliches - // find related related node: - const otherNode = n == l.target ? l.source : l.target; - const otherNodeEl = document.getElementById(otherNode.id); - otherNodeEl.classList.add('linkedHover'); - linkedLinks.push(l); - } - } - this.showTooltip(evt.target, n, linkedLinks); - + this.hoverNode(evt, n); }); group.on("mouseout", (evt, n) => { - this.hideTooltip(); - const links = document.getElementsByClassName('linkedHover'); - while (links.length) { - links[0].classList.remove('linkedHover'); - } + this.endHoverNode(n); }); // group.append('circle').attr("r", 5 /*this.nodeSize*/); group.append('path') diff --git a/www/index.html b/www/index.html index ba5396d..71d6e83 100644 --- a/www/index.html +++ b/www/index.html @@ -2,8 +2,9 @@ + - Remote Biometric Identification | A survey of the European Union + Biometric and Behavioural Mass Surveillance in EU Member States @@ -14,8 +15,8 @@
-

Remote Biometric Identification

-

A survey of the European Union

+

Biometric and Behavioural Mass Surveillance

+

in EU Member States