New light version as default.

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 <q></q> with all institutions in EU
+OR [[Category:Technologies]]  [[-Software Deployed::+]] // TODO: + should give a subquery <q></q> 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'
 ```

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;
-}

www/graph.js

@@ -1,12 +1,12 @@
 
 const CONFIG = {
-    'title': "Biometric Mass Surveillance",
+    'title': "Remote Biometric Identification",
-    'subtitle': "Connections in the European Union & beyond",
+    '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 {
           </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()
@@ -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('<textPath  xlink:href="#titlePath">Biometric</textPath>')
+            .html('<textPath  xlink:href="#titlePath">Remote Biometric</textPath>')
         this.title.append("text")
-            .html('<textPath  xlink:href="#title2Path">Mass Surveillance</textPath>')
+            .html('<textPath  xlink:href="#title2Path">Identification</textPath>')
         this.title.append("text")
             .attr("id", "subtitle")
             .html('<textPath  xlink:href="#subtitlePath">' + CONFIG.subtitle + '</textPath>')
@@ -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()

www/index.html

@@ -13,8 +13,8 @@
     <!-- <div id='alluvial'></div> -->
 
     <header>
-        <h1>Biometric Mass Surveillance</h1>
+        <h1>Remote Biometric Identification</h1>
-        <p class='subtitle'>Connections in the European Union & beyond</p>
+        <p class='subtitle'>A survey of the European Union</p>
 
 
         <aside id="filters">