forked from security_vision/semantic_graph
New light version as default.
This commit is contained in:
Ruben van de Ven
parent
40b2251dbd
commit
6eb67407d9
4 changed files with 139 additions and 50 deletions
69
README.md
69
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
|
||||
|
|
@ -42,3 +43,71 @@ _Ask_ SMW with the following query:
|
|||
?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'
|
||||
```
|
||||
|
|
@ -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;
|
||||
}
|
||||
40
www/graph.js
40
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 {
|
|||
</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>')
|
||||
|
|
@ -615,6 +638,7 @@ class NodeMap {
|
|||
connectedNodes.forEach(n => document.getElementById(n.id).classList.add('linkedSelected'));
|
||||
links.forEach(l => document.getElementById(getLinkId(l)).classList.add('linkedSelected'));
|
||||
|
||||
|
||||
// TODO: show details;
|
||||
|
||||
// alert('not yet implemented');
|
||||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
<!-- <div id='alluvial'></div> -->
|
||||
|
||||
<header>
|
||||
<h1>Biometric Mass Surveillance</h1>
|
||||
<p class='subtitle'>Connections in the European Union & beyond</p>
|
||||
<h1>Remote Biometric Identification</h1>
|
||||
<p class='subtitle'>A survey of the European Union</p>
|
||||
|
||||
|
||||
<aside id="filters">
|
||||
|
|
|
|||
Loading…
Reference in a new issue