From 6eb67407d94f3df92d2dd31f9f7e60aed45f3909 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Tue, 4 May 2021 18:40:06 +0200 Subject: [PATCH] New light version as default. --- README.md | 69 +++++++++++++++++++++++++++++++++++++++++++++ www/graph.css | 76 ++++++++++++++++++++++---------------------------- www/graph.js | 40 ++++++++++++++++++++++---- www/index.html | 4 +-- 4 files changed, 139 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index 2849454..2b8c2e7 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ This repository contains a script to pull semantic data out of Semantic Mediawik Built for [Security Vision](https://securityvision.io). + ## Installation ```bash @@ -41,4 +42,72 @@ _Ask_ SMW with the following query: ?Software Deployed.Developped by (institutions)=Software Developer ?Datasets Used ?Datasets Used.Developed by Institution=Dataset Developer +``` + +---- + + +``` +({{#ask: [[Category:Deployments||Institution]] +OR [[Category:Technologies]] [[Developed by (institutions)::+]] // TODO: + should give a subquery with all institutions in EU +OR [[Category:Technologies]] [[-Software Deployed::+]] // TODO: + should give a subquery with all deployments in EU + |?Category + |?Geolocation + |?City + |?City.Has Coordinates=Has Coordinates + |?City.Is in Country=City Country + |?City Country.Has Coordinates=Country Coordinates + |?Clients + |?Managed by + |?Used by + |?Funded by + |?Provided by // TODO: technology/product provided by + |?Software Deployed + |?Developped by (institutions) + |format=broadtable + |limit=500 + |offset=0 + |link=all + |sort= + |order=asc + |headers=show + |searchlabel=... further results + |class=sortable wikitable smwtable +}} + + +{{#ask: [[Category:Deployments||Institution]] [[Not in graph::!Greens Report 2021]] +OR [[Category:Technologies]] [[Developed by (institutions)::+]] +OR [[Category:Technologies]] [[-Software Deployed::+]] + |?Category + |?Geolocation + |?City + |?City.Has Coordinates=City Coordinates + |?City.Is in Country=City Country + |?City 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 + |format=broadtable + |limit=50 + |offset=0 + |link=all + |sort= + |order=asc + |headers=show + |searchlabel=... further results + |class=sortable wikitable smwtable +}} +``` + +Fetch using CURL: + +```bash +curl 'https://www.securityvision.io/wiki/index.php?title=Special:Ask&#search' -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; rv:78.0) Gecko/20100101 Firefox/78.0' -H 'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8' -H 'Accept-Language: en-US,en;q=0.5' --compressed -H 'Content-Type: application/x-www-form-urlencoded' -H 'Origin: https://www.securityvision.io' -H 'Connection: keep-alive' -H 'Referer: https://www.securityvision.io/wiki/index.php/Special:Ask' -H 'Upgrade-Insecure-Requests: 1' --data-raw 'title=Special%3AAsk&_action=submit&q=%5B%5BCategory%3ADeployments%7C%7CInstitution%5D%5D++&po=%0D%0A+%7C%3FCategory%0D%0A+%7C%3FGeolocation%0D%0A+%7C%3FCity%0D%0A+%7C%3FCity.Has+Coordinates%3DCity+Coordinates%0D%0A+%7C%3FCity.Is+in+Country%3DCity+Country%0D%0A+%7C%3FCity+Country.Has+Coordinates%3DCountry+Coordinates%0D%0A+%7C%3FClients%0D%0A+%7C%3FManaged+by%0D%0A+%7C%3FUsed+by%0D%0A+%7C%3FFunded+by%0D%0A+%7C%3FProvided+by%0D%0A+%7C%3FSoftware+Deployed%0D%0A+%7C%3FSoftware+Deployed.Developped+by+%28institutions%29%3DSoftware+Developer%0D%0A+%7C%3FDatasets+Used%0D%0A+%7C%3FDatasets+Used.Developed+by+Institution%3DDataset+Developer&eq=yes&p%5Bformat%5D=json&p%5Blimit%5D=500&p%5Boffset%5D=0&p%5Blink%5D=all&p%5Bheaders%5D=show&p%5Bmainlabel%5D=&p%5Bintro%5D=&p%5Boutro%5D=&p%5Bsearchlabel%5D=JSON&p%5Bdefault%5D=&p%5Btype%5D=full&p%5Bfilename%5D=result2.json&sort_num%5B%5D=&order_num%5B%5D=asc&sort_num%5B%5D=&order_num%5B%5D=asc&eq=yes' ``` \ No newline at end of file diff --git a/www/graph.css b/www/graph.css index 897445a..6711213 100644 --- a/www/graph.css +++ b/www/graph.css @@ -20,13 +20,21 @@ --hover-related-color: #d1bce9; /* --hover-color: var(darkblue); */ --selected-color: var(--color1); + --link-color: rgba(255,255,255,0.5); + --link-hover-color: var(--hover-color); + --link-hover-related-color: var(--hover-related-color); + --link-focus-color: var(--hover-color); + + --body-back: #96a7b7; /*#9cb3c9; /*#8195a7; /*#9cb3c9; #b9cada*/ + --title-color: #1c1c1c; } body { margin: 0; /* overflow: hidden; */ /* background: linear-gradient(to top, #040308, #AD4A28, #DD723C, #fc7001, #dcb697, #9ba5ae, #3e5879, #020b1a); */ - background: linear-gradient(to top, #414141, #99a6b8); + background: var(--body-back); + /* background: #9cb3c9; */ font-family: sans-serif; min-height: 100vh; } @@ -41,20 +49,20 @@ svg.dragging { } #arrowHead { - fill: #b0e99a; + fill: var(--link-color); } #arrowHeadSelected { - fill: var(--hover-color);; + fill: var(--link-focus-color);; } #arrowHeadSelectedRelated { - fill: var(--hover-related-color);; + fill: var(--link-hover-related-color);; } svg .links line, svg .links path { /* stroke: #f3722c; */ /* stroke: #9df32c; */ - stroke: #b0e99a; + stroke: var(--link-color); stroke-width: 6; fill: none; transition: stroke-width 1s; @@ -62,19 +70,19 @@ svg .links line, svg .links path { } svg .links line.hover, svg .links path.hover { - stroke: var(--hover-color); + stroke: var(--link-hover-color); /* stroke-width: 12; */ marker-end: url(#arrowHeadSelected); } svg .links .linkedHover path{ - stroke: var(--hover-related-color); + stroke: var(--link-hover-related-color); stroke-width: 12; marker-end: url(#arrowHeadSelectedRelated); } svg .links .linkedSelected path{ - stroke: var(--hover-color); + stroke: var(--link-focus-color); stroke-width: 12; marker-end: url(#arrowHeadSelected); } @@ -96,11 +104,18 @@ svg .subtitle { } svg #countries .country { - fill: rgba(200, 200, 200, 0.7); + fill: #f7f5f5; + fill: #f0eeee; + /* stroke:rgb(230, 230, 230); */ + stroke:rgb(230, 230, 230); + stroke-width: 5; } svg #countries .country.eu_country { - fill: black; + /* fill:#eae5e3; */ + fill:#e9e1e4; + /* fill:rgb(234, 229, 235); */ + stroke:rgb(217, 209, 218); } svg #header #titlePath, svg #header #title2Path, svg #header #subtitlePath { @@ -113,7 +128,7 @@ svg #header text { font-family: "Lexend Mega Regular"; /*Comfortaa*/ opacity: .8; - fill: black; + fill: var(--title-color); text-shadow: rgba(0, 0, 0, .5) 5px 5px 10px; /* text-transform: uppercase; */ } @@ -125,7 +140,7 @@ svg #header text:nth-of-type(2) { svg #header text#subtitle { font-size: 70px; - fill: var(--color9); + fill: var(--body-back); } .links text { @@ -146,7 +161,7 @@ svg #header text#subtitle { /* font-size: 16pt; */ /*Set this in JS*/ transition: font-size .4s, opacity 1s; - fill: white; /*also when hovering node*/ + fill: #5d5d5f; /*also when hovering node*/ opacity: 1; pointer-events: none; /*prevent mouse glitches*/ @@ -223,11 +238,14 @@ svg.zoomed.zoomed2 .node text.nodeTitle { } .node.Deployments circle, .node.Deployments path { - fill: lightblue; + /* fill: lightblue; */ + /* fill: rgb(75, 97, 190); */ + fill: rgb(8, 8, 8); } .node.Institution circle, .node.Institution path { - fill: lightcoral + /* fill: lightcoral; */ + fill: red; } .node.Dataset circle, .node.Dataset path { @@ -402,7 +420,7 @@ p.subtitle { #map .borders { stroke-width: 6px; - stroke: white; + stroke: rgb(221, 210, 210); fill: none; } @@ -416,29 +434,3 @@ p.subtitle { font-size: 30; } - - -body.light{ - background:white; -} -body.light #map .borders{ - stroke: white; -} -body.light svg #countries .country{ - fill:white; - stroke:lightgray; - stroke-width: 5;; -} -body.light svg #countries .country.eu_country{ - fill:rgb(235, 226, 236); -} -body.light .node text.nodeTitle { - fill:black; -} - -body.light #arrowHead{ - fill:#577590; -} -body.light svg .links line, body.light svg .links path { - stroke:#577590; -} \ No newline at end of file diff --git a/www/graph.js b/www/graph.js index 53e752e..075f06f 100644 --- a/www/graph.js +++ b/www/graph.js @@ -1,12 +1,12 @@ const CONFIG = { - 'title': "Biometric Mass Surveillance", - 'subtitle': "Connections in the European Union & beyond", + 'title': "Remote Biometric Identification", + 'subtitle': "A survey of the European Union", // 'nodeSize': 8, 'nodeRadius': 5, 'nodeRepositionPadding': 10, 'baseUrl': 'https://www.securityvision.io/wiki/index.php/', - 'dataUrl': 'result.json', + 'dataUrl': 'result2.json', 'preSimulate': false, // run simulation before starting, so we don't start with lines jumping around 'labels': { 'rotate': true, @@ -282,6 +282,28 @@ class NodeMap { `); + this.svg.on('click', (e) => { console.log(e); this.deselectNode()}) + + // const noise = 0.001; + // this.svg.append('defs').append('filter').attr('id', 'splotch').html( `${ + // noise + // ? ` + // + // ` + // : `` + // }`) + this.resize(); this.projection = d3.geoHill() @@ -323,6 +345,7 @@ class NodeMap { return "country"; }) .attr("d", this.proj) + // .attr("filter", 'url(#splotch)') // .attr("fill", ); this.g_borders @@ -389,9 +412,9 @@ class NodeMap { .attr("d", this.proj(subtitleFeature)) ; this.title.append("text") - .html('Biometric') + .html('Remote Biometric') this.title.append("text") - .html('Mass Surveillance') + .html('Identification') this.title.append("text") .attr("id", "subtitle") .html('' + CONFIG.subtitle + '') @@ -614,6 +637,7 @@ class NodeMap { document.getElementById(node.id).classList.add('selected'); connectedNodes.forEach(n => document.getElementById(n.id).classList.add('linkedSelected')); links.forEach(l => document.getElementById(getLinkId(l)).classList.add('linkedSelected')); + // TODO: show details; @@ -644,7 +668,9 @@ class NodeMap { .attr("class", getClasses) .attr("id", (n) => getIdForTitle(n.fulltext)); // group.call(drag(simulation)); - group.on("click", (evt, n) => this.selectNode(n)); + group.on("click", (evt, n) => { + evt.stopPropagation(); this.selectNode(n); + }); group.on("mouseover", (evt, n) => { // d3.select(this).classed('hover', true); const links = document.getElementsByClassName('link'); @@ -792,6 +818,7 @@ class NodeMap { // l.source.classed('hover',false); // console.log(l,'l'); }).on("click", (ev, link) => { + ev.stopPropagation(); this.selectNode(link.source); }) ; @@ -1017,6 +1044,7 @@ class AlluvialMap { render() { this.svg = this.root.append('svg') + this.resize(); this.sankey = d3.sankey() diff --git a/www/index.html b/www/index.html index 37fcc94..2740b6e 100644 --- a/www/index.html +++ b/www/index.html @@ -13,8 +13,8 @@
-

Biometric Mass Surveillance

-

Connections in the European Union & beyond

+

Remote Biometric Identification

+

A survey of the European Union