chores

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
@@ -16,3 +17,74 @@ wget https://d3js.org/d3.v6.min.js
 ```
 python wiki_relations.py
 ```
+
+## Data
+
+_Ask_ SMW with the following query:
+
+```
+({{#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
+}}
+
+TODO: see: https://www.semantic-mediawiki.org/wiki/Help:Querying_for_the_absence_of_a_property
+
+{{#ask: [[Category:Deployments||Institution]]  [[Is in Greens Report 2021::True]]
+ |?Category
+ |?Geolocation
+ |?City
+ |?City.Has Coordinates=City Coordinates
+ |?City.Is in Country=City Country
+ |?City Country.Has Coordinates=Country Coordinates
+ |?Institution Type
+ |?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
+ |?Related Institutions
+ |?Involved Entities
+ |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'
+```

index.html

@@ -169,7 +169,7 @@
 
 
     <!-- <script src="https://d3js.org/d3.v6.min.js"></script> -->
-    <script src="d3.v6.min.js"></script>
+    <script src="d3.v6.js"></script>
     <script src="graph.js"></script>
 
 </html>

wiki_relations.py

@@ -10,13 +10,13 @@ import tqdm
 logger = logging.getLogger('wiki')
 
 default_categories = [
-    'Person',
+    # 'Person',
     'Institution',
     'Technology',
     'Deployments',
     'Dataset',
-    # 'City',
-    # 'Country',
+    'City',
+    # 'Country',# for deployments without city we should configure Geolocation
     ]
 
 parser = argparse.ArgumentParser(description='Turn wiki into nodes & links, usable by d3-force.')
@@ -142,6 +142,12 @@ def getPropertiesForPage(page, session, collection):
 
     for sub_obj in data['query']['sobj']:
         subSubjectId = sub_obj['subject']
+        if '#0##_QUERY' in subSubjectId:
+            logger.info(f"Skip query subobj {subSubjectId}")
+            continue
+        if '#0##_ERR' in subSubjectId:
+            logger.info(f"Skip error subobj {subSubjectId}")
+            continue
         for rel in sub_obj['data']:
             addToCollection(subSubjectId, rel, collection, subjectId)
 
@@ -194,13 +200,22 @@ def addDataitemToCollection(subjectId, prop, data, collection):
                 collection['nodes'][subjectId][prop] = []
             collection['nodes'][subjectId][prop].append(json.dumps(data))
         else:
-            if data['item'] not in collection['nodes']:
-                collection['nodes'][data['item']] = getObjForSubject(data['item'])
-            collection['links'].append({
-                'source': subjectId,
-                'target': data['item'],
-                'name': prop
-            })
+            # TODO: map as properties on link!
+            if '#0##_QUERY' in data['item']:
+                logger.warning(f"Skip query for {subjectId}: {data}")
+            else:
+                if data['item'] not in collection['nodes']:
+                    collection['nodes'][data['item']] = getObjForSubject(data['item'])
+                collection['links'].append({
+                    'source': subjectId,
+                    'target': data['item'],
+                    'name': prop
+                })
+    elif data['type'] == 7:
+        # Geolocation
+        lat, lon = data['item'].split(',')
+        collection['nodes'][subjectId]['lat'] = lat
+        collection['nodes'][subjectId]['lon'] = lon
     else:
         logger.error(f"Unknown type: {data['type']}: {prop} : {data}")
 

www/graph.css

@@ -0,0 +1,492 @@
+@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;
+    --color2: #f3722c;
+    --color3: #f8961e;
+    /* --color4: #f9844a; */
+    --color5: #f9c74f;
+    --color6: #90be6d;
+    --color7: #43aa8b;
+    --color8: #4d908e;
+    --color9: #577590;
+    --color10: #277da1;
+    --hover-color: var(--color1);
+    --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;
+
+    --zoom: 1; /* to be overriden by js */
+}
+
+body {
+    margin: 0;
+    /* overflow: hidden; */
+    /* background: linear-gradient(to top, #040308, #AD4A28, #DD723C, #fc7001, #dcb697, #9ba5ae, #3e5879, #020b1a); */
+    background: var(--body-back);
+    /* background: #9cb3c9; */
+    font-family: sans-serif;
+    min-height: 100vh;
+}
+
+svg {
+    cursor: grab;
+    font-family: sans-serif;
+}
+
+svg.dragging {
+    cursor: grabbing;
+}
+
+#arrowHead {
+    fill: var(--link-color);
+}
+
+#arrowHeadSelected {
+    fill:  var(--link-focus-color);;
+}
+#arrowHeadSelectedRelated {
+    fill:  var(--link-hover-related-color);;
+}
+
+svg .links line, svg .links path {
+    /* stroke: #f3722c; */
+    /* stroke: #9df32c; */
+    stroke: var(--link-color);
+    stroke-width: calc(10px / var(--zoom));
+    fill: none;
+    /* transition: stroke-width 1s; */
+    cursor: pointer;
+}
+
+svg .links line.hover, svg .links path.hover {
+    stroke: var(--link-hover-color) !important;
+    /* stroke-width: 12; */
+    marker-end: url(#arrowHeadSelected) !important;
+}
+
+svg .links .linkedHover path{
+    stroke: var(--link-hover-related-color);
+    stroke-width:  calc(12px / var(--zoom));
+    marker-end: url(#arrowHeadSelectedRelated);
+}
+
+svg .links .linkedSelected path{
+    stroke: var(--link-hover-related-color);
+    stroke-width:  calc(12px / var(--zoom));
+    marker-end: url(#arrowHeadSelectedRelated);
+}
+
+/* svg.zoomed .links line, svg.zoomed .links path {
+    stroke-width: 2;
+} */
+
+/* svg.zoomed .links line, svg.zoomed .links path.hover {
+    stroke-width: 4;
+} */
+
+svg .title {
+    font-size: 200;
+}
+
+svg .subtitle {
+    font-size: 100;
+}
+
+svg #countries .country {
+    fill: #f7f5f5;
+    fill: #f0eeee;
+    /* stroke:rgb(230, 230, 230); */
+    stroke:rgb(230, 230, 230);
+    stroke-width: 5;
+}
+
+svg #countries .country.eu_country {
+    /* fill:#eae5e3; */
+    fill:#e9e1e4;
+    /* fill:rgb(234, 229, 235); */
+    stroke:rgb(217, 209, 218);
+}
+
+svg #header #titlePath, svg #header #title2Path, svg #header #subtitlePath {
+    stroke: none;
+    fill: none;
+}
+
+svg #header text {
+    font-size: 180px;
+    font-family: "Lexend Mega Regular";
+    /*Comfortaa*/
+    opacity: .8;
+    fill: var(--title-color);
+    text-shadow: rgba(0, 0, 0, .5) 5px 5px 10px;
+    /* text-transform: uppercase; */
+}
+
+svg #header text:nth-of-type(2) {
+    /* dominant-baseline: hanging; */
+    /* transform: translate(10px, 25px); */
+}
+
+svg #header text#subtitle {
+    font-size: 70px;
+    fill: var(--body-back);
+}
+
+.links text {
+    display: none;
+    font-size: 5pt;
+    text-anchor: middle;
+    fill: whitesmoke;
+}
+
+.node {
+    cursor: pointer;
+}
+
+
+.node text.nodeTitle {
+    text-anchor: start;
+    dominant-baseline: hanging;
+    font-size:  calc(20pt / var(--zoom)) !important;
+    /*achieves a 'text-anchor: top'*/
+    /* font-size: 16pt; */
+    /*Set this in JS*/
+    transition: opacity 1s;
+    fill: #5d5d5f; /*also when hovering node*/
+    opacity: 1;
+    /* pointer-events: none; */
+    /*prevent mouse glitches*/
+}
+
+/* .node:not(:hover):not(.linkHover) text.nodeTitle.overlapping { */
+.node text.nodeTitle.overlapping {
+    /* used to be shown on hover, but disabled now that we have a tooltip */
+    opacity: 0;
+    pointer-events: none;
+}
+
+svg.zoomed .node text.nodeTitle {
+    /* font-size: 6pt; */
+}
+
+svg.zoomed.zoomed2 .node text.nodeTitle {
+    font-size: 3pt;
+}
+
+.node circle, .node path {
+    fill: lightgray;
+}
+
+/* Whenever a connected link is hovered */
+
+.node.linkHover circle, .node.linkHover path, .node.linkedHover path, label:hover .node path {
+    fill: var(--hover-related-color) !important;
+    stroke: var(--hover-related-color);
+    stroke-width: 2px;
+}
+.selectedNode .node:not(.linkedSelected) path {
+    fill: lightgray !important;
+    /* same as linkHover/linkedHover but without border */
+}
+
+.node.linkHover text.nodeTitle.overlapping {
+    transition: opacity 0s;
+}
+
+.node:hover circle, .node:hover path, .node.selected path {
+    fill: var(--hover-color) !important;
+    stroke: var(--hover-color);
+    stroke-width: 2px;
+}
+/* 
+.node:hover text {
+    transition: none;
+    fill: var(--hover-color);
+} */
+
+
+/* .selectedNode .node circle, .selectedNode .node path {
+    fill: lightgray !important;
+} */
+.selectedNode .node.selected circle, .selectedNode .node.selected path {
+    fill: var(--selected-color) !important;
+    stroke: var(--selected-color);
+    stroke-width: 5px;
+}
+
+.node.City circle, .node.City path {
+    display: none;
+}
+
+.node.City {
+    fill: white;
+    stroke: black;
+    stroke-width: .5px;
+    font-size: 20px;
+}
+
+.node.Person circle, .node.Person path {
+    fill: lightgreen
+}
+
+.node.Technology circle, .node.Technology path {
+    fill: plum;
+}
+
+.node.Deployments circle, .node.Deployments path {
+    /* fill: lightblue; */
+    /* fill: rgb(75, 97, 190); */
+    fill: rgb(8, 8, 8);
+}
+
+.node.Institution circle, .node.Institution path {
+    /* fill: lightcoral; */
+    fill: #11F999;
+}
+
+.node.Dataset circle, .node.Dataset path {
+    fill: lightgoldenrodyellow
+}
+
+.labels .label text {
+    fill: yellow;
+    opacity: 1 !important;
+}
+
+.node.Institution.Institution-company path{
+    fill: #45F68A;
+}
+.node.Institution.Institution-government path{
+    fill: #60F37B;
+}
+.node.Institution.Institution-local-government path{
+    fill: #75F06D;
+}
+.node.Institution.Institution-law-enforcement path{
+    fill: #87EC60;
+}
+.node.Institution.Institution-ngo path{
+    fill: #97E853;
+}
+.node.Institution.Institution-university path{
+    fill: #A6E447;
+}
+.node.Institution.Institution-research path{
+    fill: #B4E03C;
+}
+.node.Institution.Institution-project path{
+    fill: #C1DB31;
+}
+.node.Institution.Institution-watchdog path{
+    fill: #CED628;
+}
+.node.Institution.Institution-expert-group path{
+    fill: #DAD121;
+}
+.node.Institution.Institution-foundation path{
+    fill: #E5CB1E;
+}
+.node.Institution.Institution-international-organization path{
+    fill: gray;
+}
+.node.Institution.Institution-art-project path{
+    /* fill: blue; */
+}
+
+/*  .node.Person circle {
+    fill: var(--color2)
+}
+.node.Technology circle {
+    fill: var(--color3);
+}
+.node.Deployment circle {
+    fill: var(--color5);
+}
+.node.Institution circle {
+    fill: var(--color6)
+}
+.node.Dataset circle {
+    fill: var(--color7)
+} */
+
+#nodeInfo {
+    position: fixed;
+    display: block;
+    right: 20px;
+    bottom: 20px;
+    background: white;
+    padding: 10px;
+    border: solid 1px #ccc;
+}
+
+#nodeInfo.hidden {
+    display: none;
+}
+
+
+#nodeInfo h2 {
+    margin: 0;
+    padding: 0;
+}
+
+#nodeInfo iframe {
+    width: 50vw;
+    height: calc(100vh - 40px - 20px - 30px);
+}
+
+#tooltip{
+    position:absolute;
+    z-index: 100;
+    opacity: 1;
+    transition: opacity .3s;
+    background:white;
+    padding: 20px 10px;
+    border-radius: 5px;
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
+}
+#tooltip.link{
+
+}
+
+#tooltip .entity{
+    font-weight: bold;
+}
+
+#tooltip:not(.visible){
+    position:absolute;
+    z-index: 100;
+    opacity:0;
+    pointer-events: none;
+}
+
+#tooltip h3{
+    margin: 5px 0;
+    text-align: center;;
+}
+#tooltip .category{
+    display: block;
+    color: black;
+    text-align: center;;
+}
+#tooltip .category::before{
+    content:'· '
+}
+#tooltip .category::after{
+    content:' ·'
+}
+#tooltip .clickForMore{
+    display: block;
+    color: gray;
+    text-align: center;;
+}
+
+#closeInfo {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+#closeInfo:hover {
+    color: var(--hover-color);
+}
+
+a, a:link {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+header {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    background: white;
+    padding: 10px;
+    border-top-left-radius: 5px;
+}
+
+h1 {
+    /* color:var(--color9); */
+    margin: 0;
+    text-transform: uppercase;
+    display: none;
+}
+
+p.subtitle {
+    margin: 0;
+    color: var(--color10);
+    /* text-transform: uppercase;; */
+    display: none;
+}
+
+#filters h3 {
+    text-align: center;
+    ;
+}
+
+#filters label {
+    cursor: pointer;
+    display: block;
+    padding: 10px;
+}
+
+#filters label svg {
+    display: inline;
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+}
+
+#filters span:hover {
+    color: var(--hover-color);
+}
+
+#filters input {
+    display: none;
+}
+
+#filters input+span {
+    display: inline-block;
+    padding-left: 10px;
+    /* background: var(--color9); */
+    text-decoration: line-through;
+}
+
+#filters input:checked+span {
+    /* color: var(--selected-color); */
+    text-decoration: none;
+    /* box-shadow: inset 0 0 5px black; */
+}
+
+#map .borders {
+    stroke-width: 6px;
+    stroke: rgb(221, 210, 210);
+    fill: none;
+}
+
+#alluvial {
+    /* position:fixed; */
+    top: 0;
+    left: 0;
+}
+
+#alluvial .flow_label text {
+    font-size: 30;
+}
+

www/index.html

@@ -0,0 +1,43 @@
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="graph.css">
+    <title>Remote Biometric Identification | A survey of the European Union</title>
+</head>
+
+<body>
+
+    <div id='tooltip'></div>
+    <div id='map'></div>
+    <!-- <div id='alluvial'></div> -->
+
+    <header>
+        <h1>Remote Biometric Identification</h1>
+        <p class='subtitle'>A survey of the European Union</p>
+
+
+        <aside id="filters">
+            <h3>Filter</h3>
+        </aside>
+
+    </header>
+
+    <script src="https://d3js.org/d3.v6.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="https://unpkg.com/d3-sankey@0"></script>
+    <!-- <script src="//unpkg.com/d3fc@14.0.1"></script> -->
+    <script src="graph.js"></script>
+
+    <script>
+        if(window.location.hash == '#light') {
+            document.body.classList.add('light');
+        }
+    </script>
+</body>
+
+</html>

www/story.html

@@ -0,0 +1,506 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biometric Mass Surveillance</title>
+    <style>
+        body {
+            margin: 0;
+            font-family: sans-serif;
+        }
+
+        iframe {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 50vw;
+            height: 100vh;
+        }
+
+        content {
+            margin-left: 55vw;
+            max-width: 800px;
+            margin-right: 5vw;
+            display: block;
+        }
+    </style>
+</head>
+
+<body>
+    <iframe id='frame' src="index.html"></iframe>
+
+    <content>
+
+        <div class="section">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi risus augue, pellentesque quis iaculis
+                vitae, condimentum a leo. Nunc scelerisque, odio a tristique molestie, massa mi sollicitudin odio, ac
+                fermentum orci nisi a ipsum. Curabitur pellentesque eleifend risus, eget porta tellus malesuada ut. Nunc
+                dignissim, ipsum pellentesque accumsan faucibus, mi leo mattis ante, a rhoncus massa leo vel augue.
+                Mauris eros nunc, vehicula et faucibus at, convallis non odio. Ut gravida, lorem non sodales maximus,
+                purus justo blandit felis, at sollicitudin dolor erat eget est. Ut euismod auctor lorem, iaculis
+                pulvinar odio tempus et. Proin ullamcorper cursus posuere. Donec venenatis diam nulla, sed egestas ipsum
+                vestibulum ultrices. Proin lobortis elementum semper. Morbi sollicitudin aliquam tortor, ac maximus urna
+                finibus vel. Vivamus ultricies, nibh non hendrerit rutrum, sapien neque eleifend leo, nec lobortis
+                libero orci ut sapien.
+            </p>
+            <p>
+                Nulla porttitor dolor laoreet elit ornare, eu pellentesque nulla tempus. Duis et suscipit massa. Etiam
+                velit lorem, ornare at odio vel, malesuada imperdiet massa. Pellentesque mauris justo, sollicitudin quis
+                varius vel, dignissim ut turpis. Maecenas vel odio mauris. Aliquam maximus maximus erat vel fermentum.
+                Aenean vel venenatis diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur risus
+                risus, facilisis sed velit a, feugiat eleifend quam. Donec rutrum molestie sem.
+            </p>
+            <p>
+                Ut metus elit, porta et turpis in, sodales imperdiet ligula. Nam vulputate ultricies urna non facilisis.
+                Vivamus sit amet pulvinar risus. Nullam id odio tempus, malesuada metus et, lobortis nibh. Suspendisse
+                viverra nulla magna, id tincidunt turpis pretium rhoncus. Pellentesque vel aliquet dui. Mauris eleifend
+                efficitur libero eu porttitor. Aenean congue interdum dui eget aliquam. Maecenas volutpat porta quam,
+                vitae congue justo cursus in. Fusce ac congue lorem. Nulla pretium odio ac quam aliquam convallis.
+            </p>
+            <p>
+                Fusce a urna ac lorem eleifend eleifend. Etiam mollis quam nisl, et scelerisque felis lacinia quis.
+                Mauris ullamcorper mi et feugiat auctor. Sed placerat tincidunt tincidunt. Vestibulum dictum vestibulum
+                orci dignissim ornare. Nullam sed congue sapien. Donec rhoncus nibh quis malesuada egestas. Cras non est
+                quam. Curabitur vulputate, metus non faucibus rutrum, ex lorem viverra ligula, sodales vehicula sapien
+                diam quis justo. Quisque tempor maximus mauris sit amet eleifend. Cras auctor feugiat ullamcorper.
+                Mauris ultricies elit vel euismod volutpat. Praesent in elit dignissim, dignissim urna varius,
+                consectetur lacus. Sed ligula tellus, consectetur a ligula a, tempus hendrerit urna. Maecenas volutpat
+                sapien risus, ac egestas ex porta et.
+            </p>
+            <p>
+                Nullam velit quam, efficitur vitae sem nec, sodales porttitor orci. Sed egestas lacus sit amet ex
+                dictum, sit amet tincidunt ex hendrerit. Morbi pharetra, ipsum sed gravida fermentum, felis quam rhoncus
+                lacus, vitae auctor enim ligula pulvinar tellus. Cras sapien augue, ultricies pulvinar arcu et,
+                convallis porttitor augue. Vestibulum accumsan lorem eros, id volutpat orci tincidunt at. Vivamus porta
+                magna id finibus tristique. Quisque sodales augue in lacus tristique ornare. Curabitur cursus hendrerit
+                neque rutrum blandit. Maecenas posuere ex eget eleifend fringilla.
+            </p>
+            <p>
+                Integer est dui, elementum in nisl nec, blandit auctor libero. Cras in nulla nunc. Curabitur fringilla
+                dolor sagittis felis fringilla, non euismod felis tempus. Aenean scelerisque euismod nisl vitae
+                tincidunt. Nam nec purus eleifend, fringilla diam quis, faucibus ex. Maecenas nunc felis, rhoncus sed
+                sollicitudin non, luctus sed dolor. Phasellus elit neque, rutrum a est venenatis, convallis imperdiet
+                dui. Vestibulum at ultrices eros, at vulputate sem. Ut vestibulum libero sed sapien sagittis, id laoreet
+                velit eleifend. Phasellus eleifend nec odio non bibendum. Suspendisse nec lectus nec ex blandit rutrum
+                nec et felis. Cras libero justo, sagittis sed lacinia quis, pharetra quis nibh. Maecenas vitae lacus ac
+                augue condimentum suscipit.
+            </p>
+            <p>
+                Pellentesque eu tempor orci. Aenean pulvinar, justo ac maximus molestie, nibh nunc rutrum ex, varius
+                finibus mi nulla lobortis tellus. Nam dictum leo maximus ultrices maximus. Aliquam bibendum libero sem,
+                mattis pulvinar erat vulputate quis. Duis venenatis nisi ac sem iaculis, nec feugiat orci elementum.
+                Curabitur accumsan lacinia justo id suscipit. In lacinia ornare justo quis egestas. Nullam nec lacus a
+                ligula pulvinar tempus eget id nunc. Morbi tincidunt placerat placerat.
+            </p>
+        </div>
+        <div class="section" data-title="Dragonfly Project">
+            <h2>Project Dragonfly</h2>
+            <p>
+                Morbi vitae nulla erat. Etiam eros ipsum, tristique in maximus sed, rutrum a mi. Integer molestie
+                imperdiet mauris sit amet lacinia. Aenean dignissim posuere lacus, ut vulputate tellus venenatis
+                posuere. Nullam suscipit tempor massa at viverra. Sed volutpat justo ut lacinia luctus. Sed egestas
+                hendrerit tellus, non bibendum quam gravida non. Aenean suscipit ligula tristique venenatis molestie.
+                Nunc aliquet orci mi.
+            </p>
+            <p>
+                Nunc vel dolor lorem. Sed venenatis lacinia sapien ut aliquam. Nulla vitae tincidunt sem. Aliquam eu
+                nisl pharetra, ornare justo nec, egestas nisi. Nam et metus vitae enim tempus vestibulum. Fusce ipsum
+                quam, maximus et mattis nec, consectetur vitae urna. Vivamus rhoncus augue sed justo bibendum, in
+                imperdiet metus vestibulum. Nam egestas eleifend enim ultricies lobortis. Pellentesque sed nibh eros.
+                Nulla mattis facilisis felis, eu lacinia neque condimentum ut. Suspendisse fermentum ultrices faucibus.
+                Aliquam ac ultrices lectus, in pharetra lectus. Curabitur in molestie felis. Proin ac ante eget sem
+                fringilla hendrerit sit amet a leo. Sed at nunc vitae dolor vestibulum luctus quis ac nunc. Suspendisse
+                nunc justo, gravida id pharetra et, convallis nec velit.
+            </p>
+            <p>
+                Nunc dui leo, varius ac venenatis nec, vehicula et dui. Pellentesque quis enim dolor. Vestibulum
+                tincidunt egestas porta. Suspendisse ac nisl nisl. Pellentesque auctor convallis euismod. In pharetra
+                iaculis accumsan. Maecenas scelerisque molestie dui eu gravida. Aliquam hendrerit ipsum vitae laoreet
+                laoreet. Phasellus nec mattis leo, at rhoncus sem. Nam maximus, dolor eget consequat mattis, tortor leo
+                blandit mi, in lacinia est ligula et erat. Fusce at nisi eleifend, dapibus leo eget, porttitor ipsum.
+                Duis tristique velit vitae dui fermentum, quis gravida lorem tempor. Phasellus sed risus diam. Aenean
+                fringilla justo ac felis lacinia, quis placerat tellus pretium.
+            </p>
+            <p>
+                Vestibulum ante nisl, porta vitae ultrices in, fermentum eget tellus. Quisque ornare, leo aliquet tempor
+                aliquet, ligula diam vehicula nisi, nec faucibus mauris ex at dui. Phasellus vel ligula suscipit lacus
+                eleifend egestas. Suspendisse ut lacus suscipit, gravida dui at, volutpat dolor. Nunc suscipit erat ac
+                risus tempus tempor. Nulla quis mi blandit, hendrerit mauris eget, commodo nisl. Aliquam ultricies purus
+                metus, quis gravida ante condimentum quis. Mauris porta vestibulum ornare. Vivamus elementum pharetra
+                nisl, a vehicula nibh. Etiam ac turpis tortor.
+            </p>
+            <p>
+                Nunc non elit ac diam interdum pretium ac sed velit. Etiam non metus elementum, consectetur ante vel,
+                iaculis lorem. Pellentesque convallis finibus ipsum ut fermentum. Morbi at eros vel felis pharetra
+                dapibus faucibus et nisl. Nunc sit amet felis nec leo malesuada aliquam quis in risus. Sed quis leo
+                felis. Curabitur in porta urna. Nulla dignissim, tortor et sodales auctor, ante odio porttitor nunc, ut
+                tincidunt ligula dolor non sapien. Suspendisse vitae iaculis urna, id commodo sem.
+            </p>
+            <p>
+                Nulla facilisi. Sed at augue sit amet erat posuere consectetur. Aliquam pretium lectus ipsum, nec ornare
+                enim tincidunt sit amet. Praesent sit amet iaculis odio. Etiam nibh risus, pulvinar vel arcu quis,
+                elementum faucibus mauris. Curabitur posuere leo a consectetur hendrerit. Proin finibus lobortis turpis,
+                ac feugiat est elementum at. Suspendisse vitae neque id nisi ultricies viverra. Curabitur ut libero sed
+                arcu accumsan accumsan a sed ex. Sed suscipit non sapien non eleifend. Vivamus condimentum scelerisque
+                est, sit amet sollicitudin nisi lacinia nec. Nunc in lacus consectetur neque ultrices laoreet ut et est.
+                Quisque vulputate odio neque, eget laoreet felis molestie sit amet.
+            </p>
+        </div>
+        <div class='section' data-title="Burglary-Free Neighbourhood">
+            <h2>Burglary-free Neighbourhood</h2>
+            <p>
+                Aenean fringilla nisl sed ante congue, in commodo tellus ullamcorper. Nullam sollicitudin, lacus id
+                interdum facilisis, erat augue feugiat justo, ac finibus nunc tellus ac odio. Cras a tempor nulla.
+                Nullam consequat convallis eros, sed interdum orci. Etiam justo lectus, ornare nec risus ut,
+                pellentesque mattis ante. Integer tristique sapien quis lacus cursus luctus. Pellentesque risus lacus,
+                auctor eget lacus eu, dapibus pretium ligula. Sed eget tortor ut lacus elementum facilisis. Pellentesque
+                velit ante, sagittis vel odio nec, rhoncus sagittis sem. Duis sodales lectus eget suscipit scelerisque.
+            </p>
+            <p>
+                Donec suscipit, nulla at congue scelerisque, eros odio consectetur quam, a ornare ex leo a sapien.
+                Curabitur gravida massa at posuere aliquet. Maecenas consequat, dui quis posuere hendrerit, nunc ipsum
+                interdum erat, sit amet ultricies justo nibh vel nulla. Integer venenatis semper ipsum quis congue.
+                Nulla facilisi. Proin dapibus diam nec erat viverra imperdiet. Proin quis rhoncus sem. Maecenas
+                ultricies elementum mauris, sit amet rutrum libero laoreet cursus. Maecenas quam velit, consectetur sit
+                amet sapien vitae, tempor egestas nisi. Suspendisse pulvinar ultricies erat sit amet pretium. In luctus,
+                diam vitae ornare feugiat, risus eros tincidunt orci, at convallis lacus lacus quis felis.
+            </p>
+            <p>
+                Praesent et facilisis elit, id ultricies magna. Donec interdum sed dolor vitae blandit. Vestibulum
+                hendrerit eros et magna finibus, nec pharetra est aliquam. Suspendisse tempor sagittis maximus. Ut
+                porttitor tellus ipsum, non malesuada lectus vulputate a. Fusce vitae bibendum justo, non aliquam elit.
+                Mauris fringilla purus sit amet aliquet laoreet. Nulla tempus ac metus luctus porta. Donec quis tellus
+                luctus, dignissim nisl vitae, iaculis eros. Duis nisl nulla, rhoncus eu iaculis non, faucibus vitae
+                risus. Pellentesque consectetur faucibus metus. Nulla facilisi.
+            </p>
+            <p>
+                Mauris maximus ullamcorper mattis. Morbi consectetur mollis sapien, sed ultricies ipsum interdum vitae.
+                Proin feugiat vitae elit eget pharetra. Sed in maximus nisl, non ultrices massa. In nec ipsum placerat,
+                tempor neque vitae, consequat neque. Nam in tempor libero. Sed feugiat massa pellentesque malesuada
+                volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
+                vel odio vel orci auctor aliquam convallis id lacus. Sed euismod ultricies ullamcorper. Morbi lobortis
+                luctus interdum. Quisque ac nisl lobortis, elementum tortor et, euismod erat.
+            </p>
+            <p>
+                Etiam at dolor mauris. Morbi in mauris scelerisque, suscipit lacus id, condimentum est. Vestibulum ante
+                ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed rutrum lobortis ullamcorper.
+                Vivamus ac mi non libero rutrum tempus. Donec ante ipsum, gravida eu magna auctor, efficitur molestie
+                augue. Aenean a justo eros. Vivamus aliquet pretium eros, tempus feugiat odio molestie vitae. Aenean
+                mattis gravida erat, eget venenatis dolor faucibus nec. Nullam in risus feugiat, aliquam nisi vel,
+                tincidunt tortor. Donec quis imperdiet felis. Curabitur suscipit auctor purus quis faucibus. Cras nec
+                diam rutrum, pharetra erat ut, pellentesque augue. Morbi mattis massa ut ante congue blandit. Orci
+                varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+            </p>
+            <p>
+                Integer tincidunt odio non mauris egestas viverra. Nulla blandit vulputate enim vel vestibulum. Donec
+                suscipit dignissim nisi a scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia
+                nostra, per inceptos himenaeos. Donec egestas mauris posuere diam tempor, vel consectetur enim rhoncus.
+                Phasellus accumsan feugiat dui, sit amet viverra neque facilisis in. Pellentesque fermentum ipsum
+                porttitor, luctus felis eu, ornare quam. Integer ut pharetra nisi. Phasellus sed facilisis quam, nec
+                porta metus. Sed consequat ac nisl eget faucibus. Proin blandit nisi id pharetra vestibulum. Vestibulum
+                posuere nibh vitae elit pharetra rhoncus at a ligula. Duis at tincidunt dolor. Quisque a diam varius,
+                facilisis libero a, volutpat dolor. Nulla vel accumsan diam. Praesent eu neque nibh.
+            </p>
+        </div>
+        <p>
+            Suspendisse ac libero mi. In hac habitasse platea dictumst. Ut bibendum a dui eu congue. Sed et lacus
+            congue, faucibus nulla cursus, sagittis odio. In ac risus vehicula, interdum mauris quis, porttitor
+            massa. Vivamus non iaculis tortor. Mauris ac pharetra urna. Integer ac mattis enim. Integer egestas
+            velit purus. In hac habitasse platea dictumst. Ut interdum felis ut libero pellentesque, ac vulputate
+            felis faucibus. Sed facilisis fringilla leo, et condimentum quam fermentum ac. Maecenas blandit
+            sollicitudin libero in pretium.
+        </p>
+        <p>
+            Donec sodales convallis sapien eget rutrum. Nullam fermentum nisi nec auctor convallis. Phasellus
+            euismod ante erat, ut vulputate sem rhoncus et. Quisque ac eros sit amet metus aliquet blandit. Integer
+            sagittis ligula vitae orci gravida rhoncus. Vestibulum eu ante id ipsum ultricies tempor. Proin viverra,
+            felis vel suscipit laoreet, lorem nisl condimentum ipsum, id convallis ipsum ante ac sem. Maecenas vitae
+            ultricies augue. Morbi lectus dolor, tempus ac scelerisque sit amet, condimentum eget tortor. Fusce id
+            rutrum ligula.
+        </p>
+        <p>
+            In suscipit purus at leo convallis sodales. Sed a placerat arcu. Fusce id mi quis nisl ullamcorper
+            imperdiet. Donec eu leo sit amet lacus euismod accumsan. Fusce facilisis congue leo eu commodo. Sed vel
+            libero sem. Nulla nec volutpat eros. Pellentesque habitant morbi tristique senectus et netus et
+            malesuada fames ac turpis egestas. In lacinia massa sed justo tincidunt, sed aliquam erat tristique. Nam
+            porta pharetra nisi eu aliquet.
+        </p>
+        <p>
+            In in neque vel ligula dictum suscipit. Cras cursus a felis nec mattis. Praesent rhoncus orci nec nulla
+            rutrum, sit amet iaculis massa varius. Mauris sit amet finibus ipsum. Nam sit amet augue sed ipsum
+            laoreet venenatis. Praesent feugiat faucibus congue. Nunc vulputate ante at neque suscipit auctor. In
+            nec sagittis lacus. Suspendisse ornare ut eros a lobortis. Donec et pharetra urna, sit amet dictum enim.
+            Morbi fringilla ligula tristique nibh tempus, quis pharetra sem imperdiet. Suspendisse auctor fringilla
+            purus, ultricies feugiat augue consectetur et. Integer neque mauris, elementum imperdiet finibus vel,
+            suscipit ac metus. In hac habitasse platea dictumst. Mauris eu nibh porttitor, tempor enim vel,
+            tristique libero.
+        </p>
+        <p>
+            Suspendisse commodo in justo a hendrerit. Nunc nec laoreet ante. Nam ac tincidunt libero, sed rhoncus
+            libero. Nunc et arcu a ex consequat malesuada eget vel nunc. Mauris felis lectus, sodales sed lacus id,
+            congue blandit diam. Curabitur eu quam accumsan augue accumsan lacinia. Nulla id justo elementum,
+            placerat lectus et, varius purus. Nam congue, erat at congue posuere, diam felis consequat mi, a tempor
+            erat odio id dolor. Nunc pulvinar libero sit amet neque posuere, sit amet placerat metus facilisis. In
+            justo libero, facilisis condimentum molestie eu, tristique in sapien. Interdum et malesuada fames ac
+            ante ipsum primis in faucibus. In mattis, nisl eu mollis ultricies, justo lacus commodo nisl, ut
+            pulvinar augue odio nec leo. Pellentesque ornare tellus nec massa pellentesque, id euismod odio mattis.
+            Aliquam at massa a nisi maximus varius. Donec interdum odio id nibh commodo, in ultricies lacus lacinia.
+            Ut et ultricies libero.
+        </p>
+        <p>
+            Nunc pretium vehicula leo, ut vehicula dolor ultricies quis. Nunc ultricies elit lobortis lorem tempus
+            placerat. Vestibulum vitae velit ut libero pretium dignissim sed vitae sapien. Ut ornare nunc nec tortor
+            sodales, nec volutpat risus ornare. Morbi ac iaculis arcu. Fusce viverra feugiat porta. Nam aliquam
+            aliquet urna quis consequat. Sed suscipit arcu ut eros imperdiet posuere non at nunc. Quisque ac
+            convallis lacus, non efficitur nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+            Fusce suscipit tincidunt pharetra. Sed eget egestas enim.
+        </p>
+        <p>
+            Quisque tellus nulla, facilisis eget ante ac, pharetra pretium mauris. Nam arcu urna, condimentum sed
+            urna sed, mattis dictum nisi. Maecenas eget ante facilisis, dignissim nisl non, venenatis odio. Integer
+            turpis enim, sagittis eu commodo nec, mollis at ex. In non dui dictum, porttitor mauris in, rutrum
+            dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin vel
+            nisi eros. Aliquam vel turpis est. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
+            per inceptos himenaeos. In libero risus, feugiat non tristique quis, egestas vel tortor. Praesent cursus
+            lorem nec euismod placerat. Fusce tincidunt non risus at luctus. Nullam hendrerit mi diam, ut rhoncus
+            neque accumsan vel. Sed cursus dolor id velit ullamcorper rhoncus. Duis volutpat sodales aliquam.
+        </p>
+        <p>
+            Curabitur dignissim posuere ex sit amet porta. Sed viverra arcu et sapien tristique, ullamcorper
+            eleifend elit posuere. Aenean nec augue dui. Proin semper efficitur vehicula. Praesent vestibulum tortor
+            fringilla dolor congue maximus. Morbi sagittis mollis blandit. Lorem ipsum dolor sit amet, consectetur
+            adipiscing elit. Cras pulvinar laoreet tincidunt. Mauris hendrerit mollis neque nec vehicula. Mauris
+            auctor pharetra nisl, at ornare ante accumsan feugiat. Maecenas felis risus, posuere vel nunc et,
+            fringilla viverra dolor. Cras consectetur rutrum ipsum vel tempus. Etiam mattis ante in lacus mollis,
+            non porta quam pulvinar. Sed rutrum tempor placerat. Sed id dui eleifend, interdum tellus ut, sagittis
+            odio. Ut iaculis at enim a dignissim.
+        </p>
+        <p>
+            Proin tempor mi sed mattis mollis. Quisque nulla odio, rutrum vitae ligula eget, interdum faucibus
+            tellus. Aliquam et augue vel justo molestie vestibulum eu nec risus. Maecenas aliquet, risus eget
+            feugiat consequat, diam magna bibendum diam, sed pharetra tellus purus ut est. Aenean dictum pulvinar
+            vestibulum. Sed non neque eros. Etiam vitae aliquam nisl, quis congue velit. Ut gravida libero vel
+            vestibulum tincidunt. Sed vel nibh ac velit aliquam porttitor eget et nulla.
+        </p>
+        <p>
+            Suspendisse ut odio molestie odio auctor sollicitudin. Vestibulum viverra ornare nibh, vel lobortis odio
+            dapibus ac. Cras dapibus porta libero, nec congue nisi sagittis sit amet. Class aptent taciti sociosqu
+            ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ullamcorper leo vitae urna
+            sollicitudin sodales. Suspendisse quis nulla vitae quam ornare lobortis sodales sit amet lectus.
+            Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eleifend gravida laoreet. Cras id purus
+            vehicula, egestas velit sit amet, pretium magna. In in pulvinar quam.
+        </p>
+        <p>
+            Aliquam fermentum a tellus a sodales. Pellentesque habitant morbi tristique senectus et netus et
+            malesuada fames ac turpis egestas. Etiam facilisis molestie ipsum ac viverra. Vestibulum lacus nunc,
+            egestas at lorem vel, pulvinar consequat lacus. Sed feugiat nisl vel risus vehicula, sed imperdiet elit
+            ornare. Maecenas non magna vitae erat feugiat scelerisque. Nam vulputate lacus porta porttitor
+            sollicitudin.
+        </p>
+        <p>
+            Quisque auctor tellus lorem, et ornare tellus efficitur id. Cras dictum tortor quis lorem facilisis, in
+            molestie erat porta. Sed vel porttitor libero. Etiam pulvinar augue a semper finibus. Mauris tellus
+            metus, lobortis non viverra eu, commodo quis nunc. Maecenas vitae pellentesque lectus. Nunc ut felis
+            tellus. Phasellus a mi in neque placerat egestas eget vitae tellus. Vivamus ut metus tellus.
+            Pellentesque mollis tempus tempus.
+        </p>
+        <p>
+            Ut at pretium lacus, non sollicitudin velit. Vivamus sagittis fermentum purus, nec suscipit lectus
+            imperdiet eu. Cras velit risus, porttitor vitae lectus id, condimentum pulvinar sem. Ut lacinia metus eu
+            rhoncus finibus. Vivamus accumsan, ex suscipit porttitor dictum, tellus lectus luctus lorem, sed lacinia
+            lectus sem et ligula. Duis vitae turpis nunc. Curabitur non sapien felis. Maecenas a egestas nunc, eget
+            luctus quam. Duis vestibulum metus eu turpis vulputate, et lacinia ante maximus. Vivamus molestie leo
+            eget sem dictum, nec posuere sapien euismod.
+        </p>
+        <p>
+            Cras et risus venenatis nisi dapibus feugiat non at dui. Pellentesque faucibus nulla aliquam nunc
+            congue, ut fringilla est viverra. Mauris nulla elit, ornare non augue a, cursus elementum diam. Proin
+            pulvinar justo nulla, et semper tortor dapibus ac. Maecenas ac libero ut eros hendrerit auctor at nec
+            augue. Aliquam dictum, ligula fermentum lobortis egestas, risus neque pulvinar felis, id lobortis tellus
+            nunc eget massa. Fusce vel mollis arcu. Suspendisse dapibus, tortor in blandit pulvinar, nulla dolor
+            euismod justo, vel ullamcorper dui ante ac dolor. Duis congue urna et purus posuere semper. Phasellus ut
+            feugiat justo, in commodo turpis. Donec venenatis et urna ut vestibulum.
+        </p>
+        <p>
+            Nam tristique odio a ultricies suscipit. Cras sollicitudin vulputate euismod. Sed elementum congue
+            tortor, ut pretium lacus dapibus accumsan. Sed eget aliquam tortor. Donec blandit tempor tellus, sit
+            amet pharetra mauris iaculis vel. Quisque pharetra nisi eget orci egestas dignissim. Mauris sed laoreet
+            ligula, vel placerat ante. Curabitur vel libero ornare, suscipit ante sed, feugiat orci. Sed malesuada
+            mattis augue. Sed auctor mattis diam, bibendum pretium arcu tempus quis.
+        </p>
+        <p>
+            Praesent id finibus purus, sed congue turpis. Maecenas fringilla, nisi non elementum congue, diam nunc
+            vestibulum urna, non elementum quam risus ut tellus. Donec imperdiet, turpis vel elementum sollicitudin,
+            ipsum odio faucibus lectus, quis facilisis urna nibh non ipsum. Sed sed massa sed orci cursus viverra eu
+            quis velit. Donec volutpat pretium erat vitae sodales. Suspendisse posuere nisi at orci rhoncus,
+            fermentum sodales lacus scelerisque. Suspendisse consectetur enim eget faucibus eleifend. Nullam magna
+            eros, elementum id aliquam non, egestas eu nunc. Sed tincidunt scelerisque nibh, id venenatis dolor
+            ultricies vitae. Morbi sapien nisi, tempor ut odio non, varius varius ipsum.
+        </p>
+        <p>
+            Pellentesque sit amet maximus nibh, et placerat orci. Duis accumsan libero a dolor dignissim viverra.
+            Sed purus nibh, egestas eu nisi at, commodo elementum sem. Nunc id dui a ex condimentum venenatis.
+            Maecenas id mattis nunc. Fusce accumsan nibh nec lacus congue consequat. Donec cursus laoreet leo in
+            egestas. Proin sit amet dui tristique, rhoncus tortor eget, aliquet tellus. Aenean vitae pellentesque
+            ex, in congue odio. Etiam lectus velit, fermentum ultricies consequat eget, pellentesque quis tellus.
+        </p>
+        <p>
+            Aenean id libero et turpis fringilla elementum. Orci varius natoque penatibus et magnis dis parturient
+            montes, nascetur ridiculus mus. Sed vel ex euismod, dignissim nunc ac, consequat ipsum. Donec et tortor
+            nisi. Nulla tempor turpis nec elit aliquam, id rutrum nulla blandit. Maecenas ullamcorper turpis
+            placerat lectus imperdiet tincidunt. Vestibulum tempor posuere risus tincidunt porttitor. Mauris sit
+            amet hendrerit diam, non porta sem. Proin finibus quam eu metus vulputate, quis vehicula lectus
+            lobortis. Aenean libero felis, ullamcorper sit amet sagittis et, scelerisque et leo. Sed vehicula sem
+            justo, eget pulvinar leo laoreet nec. In hac habitasse platea dictumst.
+        </p>
+        <p>
+            Donec ac felis sem. Morbi lorem felis, mollis ac elit ut, luctus congue augue. Donec leo purus, accumsan
+            non pulvinar vel, hendrerit vitae diam. Etiam bibendum ut quam vehicula cursus. Mauris tristique
+            volutpat ligula. Ut quis augue sollicitudin, tincidunt nisl ac, egestas turpis. Morbi gravida in nisi
+            non interdum. Nullam pharetra accumsan tellus in laoreet. Mauris auctor auctor odio. Nunc cursus at
+            metus a fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
+        </p>
+        <p>
+            Mauris hendrerit vel mi non mollis. Morbi nibh felis, convallis non lacinia sed, accumsan in nulla.
+            Fusce non erat in massa venenatis euismod. Fusce justo felis, varius nec dolor vel, lobortis fringilla
+            enim. Pellentesque ac fringilla mi. Aliquam ultrices interdum pellentesque. Vivamus purus mi, porta ut
+            dui malesuada, interdum lobortis leo. Sed in sem in dolor hendrerit posuere ut eget tortor. Duis id
+            dolor vitae risus accumsan tincidunt.
+        </p>
+        <p>
+            Sed consectetur ornare risus porta rutrum. Sed vel leo at neque rutrum lobortis eu at lorem. Curabitur
+            ultrices congue lacinia. Proin non bibendum augue. Maecenas et volutpat leo, in rutrum neque. In
+            efficitur, purus quis pharetra pretium, nibh metus pharetra metus, vitae euismod mi metus a nibh.
+            Praesent condimentum velit felis, sollicitudin pretium elit lacinia nec. Integer non arcu dignissim,
+            suscipit nunc nec, rutrum tellus. Mauris lobortis, lorem lacinia sagittis tincidunt, mi lacus viverra
+            orci, id ultricies ipsum dui at quam.
+        </p>
+        <p>
+            Maecenas ornare sagittis vestibulum. Phasellus egestas a tellus sit amet ullamcorper. Sed eu vestibulum
+            sapien. Ut et ipsum augue. Sed tincidunt nibh magna, non accumsan dolor aliquet eu. Cras vitae pharetra
+            elit. Donec pretium dui nec pellentesque vehicula. Cras eu sem elementum mi posuere fringilla. Duis
+            porta, purus a sodales rhoncus, eros eros iaculis turpis, nec ornare magna nisl a ex. Pellentesque
+            dictum eu mi non pretium. Donec pharetra elementum dui. Curabitur et nunc ut nunc euismod aliquet eu
+            quis libero. Quisque sollicitudin metus maximus elit lacinia bibendum a a velit. Sed commodo est at nisl
+            varius, et egestas libero mattis. Vivamus sit amet rutrum turpis, nec vulputate purus. Morbi in feugiat
+            massa.
+        </p>
+        <p>
+            Pellentesque vel justo congue, scelerisque ex at, vehicula diam. Donec elementum tincidunt nulla, et
+            pharetra ex varius et. Suspendisse iaculis ligula a dolor bibendum, quis eleifend velit tristique. Fusce
+            vitae leo vitae dolor porta lobortis. Pellentesque consectetur sem quis dolor rhoncus volutpat.
+            Pellentesque ullamcorper volutpat condimentum. Cras venenatis elit a vehicula feugiat. Maecenas interdum
+            enim justo, eu tincidunt nibh pharetra at. Cras porta dui ut accumsan aliquam. Nam ut ultricies dolor.
+            Ut in libero vitae nibh accumsan maximus. Duis hendrerit ligula ligula, vehicula ullamcorper purus
+            cursus vel. Mauris efficitur vulputate elit id fermentum. Nam turpis lorem, fermentum et ullamcorper ut,
+            ultrices aliquam felis. Morbi et faucibus justo.
+        </p>
+        <p>
+            Morbi a nisi nibh. Aenean ut ex ut justo cursus venenatis. Aliquam erat volutpat. Phasellus posuere
+            libero sed enim pretium maximus. Curabitur risus nunc, feugiat nec libero sed, fermentum semper turpis.
+            Pellentesque vestibulum scelerisque ipsum quis porttitor. Proin dapibus tortor sed odio dignissim, a
+            maximus turpis fringilla.
+        </p>
+        <p>
+            Aenean blandit nulla lorem, sodales rutrum leo dignissim ac. Aliquam ornare nulla mi, eget mollis enim
+            rhoncus eu. Donec quis erat sem. Sed in orci quis lectus interdum efficitur. Fusce non fringilla orci.
+            Pellentesque elementum ut leo at aliquet. Mauris fringilla, nisi in imperdiet consectetur, lorem tellus
+            iaculis eros, quis ullamcorper justo est sit amet felis. In felis justo, mattis nec elit vel, convallis
+            accumsan libero. Nulla facilisi. Suspendisse faucibus, magna a hendrerit tempor, elit elit posuere nibh,
+            non maximus mi enim ac justo. Mauris ut tempor leo. Etiam finibus imperdiet pellentesque. Vestibulum
+            massa arcu, iaculis vitae leo eu, fringilla semper metus. Etiam nunc dolor, consectetur eu justo non,
+            feugiat viverra est. Aliquam tristique molestie purus, quis ultrices est ullamcorper eu. Etiam cursus
+            elit et rhoncus viverra.
+        </p>
+        <p>
+            Donec et porttitor lacus. Suspendisse venenatis sapien ut ultrices ornare. Quisque dignissim, tortor ut
+            fringilla dignissim, est orci lobortis odio, ac egestas sem odio dapibus lorem. Vestibulum in magna
+            fermentum, laoreet metus sit amet, molestie lacus. Ut quam felis, dignissim non gravida non, vulputate
+            quis sapien. Sed sit amet tellus sem. Fusce eget ligula et enim feugiat vulputate. Duis nec orci id
+            lectus accumsan fermentum vel ac dolor. Aliquam vel accumsan augue, at consequat nibh. Ut vulputate
+            sapien augue, ullamcorper accumsan magna luctus id. In congue et dui sed tempus. Sed et venenatis dui,
+            et viverra sem. Nam elementum, libero sed lobortis pellentesque, nulla dolor tincidunt odio, in
+            ullamcorper orci magna eu nulla.
+        </p>
+        <p>
+            Etiam vitae pharetra erat. Pellentesque ullamcorper a urna vel gravida. Maecenas dapibus erat sed metus
+            ultrices, venenatis pulvinar felis bibendum. Morbi sollicitudin pretium rhoncus. Proin tempor pretium
+            feugiat. Ut sed ornare eros. Etiam sed ullamcorper justo. Integer tristique ornare lobortis. Aenean et
+            vestibulum sapien. Aliquam non interdum diam. Pellentesque egestas sagittis nibh, eu feugiat leo
+            vestibulum eget. Proin bibendum ligula sapien, ut dapibus turpis sodales sed. Sed vitae nunc feugiat,
+            porta diam non, fringilla arcu. Suspendisse eleifend arcu vitae mi auctor suscipit. Lorem ipsum dolor
+            sit amet, consectetur adipiscing elit. Integer ut odio vel ipsum luctus maximus.
+        </p>
+        <p>
+            Nunc rhoncus dui nibh, ac pulvinar risus vulputate in. Quisque gravida convallis ultricies. In vitae
+            felis dolor. Aenean congue vitae libero ac mattis. Quisque tincidunt arcu id mi bibendum, non viverra mi
+            vulputate. Sed mollis commodo elementum. Vivamus iaculis urna at ante tempor, eu aliquet elit bibendum.
+            Praesent feugiat lacinia dolor, sit amet semper enim auctor nec.
+        </p>
+        <p>
+            Vivamus tincidunt turpis id nulla maximus commodo. Nullam a ligula ut risus congue tempus in et ipsum.
+            Fusce dapibus a elit vitae sagittis. Nam metus quam, pretium a tortor eu, molestie hendrerit lacus. Cras
+            volutpat lacinia sem, non volutpat tellus pretium sagittis. Morbi a viverra diam, vel feugiat nisi. Orci
+            varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras varius nibh ut
+            tempor ullamcorper. Cras convallis, massa sit amet mollis laoreet, elit erat scelerisque arcu, ac
+            bibendum augue dolor vel nunc. Aliquam sit amet orci nec dui venenatis imperdiet.
+        </p>
+        <p>
+            Nulla facilisi. Aliquam vehicula velit in aliquam auctor. Cras ut nibh diam. Donec vitae vulputate
+            lacus. Suspendisse potenti. Morbi quis leo quis sapien sagittis finibus in id purus. Sed congue
+            fringilla purus, vel finibus leo aliquet eu. Cras volutpat sapien imperdiet erat consectetur interdum.
+            Nam eu pretium diam, quis mattis lacus.
+        </p>
+        <p>
+            Donec sed ligula nunc. Donec fermentum tempor diam, malesuada cursus ante iaculis at. Aliquam sodales
+            lectus in lorem molestie commodo. Ut aliquet faucibus commodo. Curabitur ut nisi sit amet orci molestie
+            ultrices at ac diam. Morbi nec tellus nec enim lobortis faucibus quis non tellus. Nulla varius ligula in
+            dolor fringilla vulputate. Phasellus sed finibus justo, nec faucibus ipsum. Cras at tempor mi. Donec
+            ipsum ligula, ultrices in suscipit non, cursus vel est. In vitae neque condimentum, euismod nunc at,
+            pulvinar est. Donec rhoncus luctus ornare.
+        </p>
+    </content>
+    <script>
+        const frameEl = document.getElementById('frame');
+        frameEl.addEventListener('load', function () {
+
+            const caseEls = document.getElementsByClassName('section');
+            for (let caseEl of caseEls) {
+                console.log(caseEl.dataset.title);
+                const toSelect = typeof caseEl.dataset.title == 'undefined' ? null : frameEl.contentWindow.getIdForTitle(caseEl.dataset.title);
+                // navItemEl.hash url-encodes
+                // let targetEl = document.getElementById(navItemEl.attributes.href.value.substr(1));
+                // let wrapperEl = targetEl.parentNode;
+                let intersectionObserver = new IntersectionObserver(function (entries) {
+                    console.log(entries);
+                    // If intersectionRatio is 0, the target is out of view
+                    // and we do not need to do anything.
+                    if (entries[0].intersectionRatio <= 0) {
+                        // navItemEl.classList.remove('active');
+                    } else {
+                        if(toSelect === null) {
+                            frameEl.contentWindow.mapGraph.deselectNode();
+                            frameEl.contentWindow.mapGraph.resetZoom();
+                        } else {
+                            const node = frameEl.contentWindow.mapGraph.graph.nodes.filter(n => n.id == toSelect)[0]
+                            frameEl.contentWindow.mapGraph.selectNode(node);
+                        }
+                        // navItemEl.classList.add('active');
+                    }
+
+                });
+                // start observing
+                intersectionObserver.observe(caseEl);
+            }
+
+        })
+
+        // frame.contentWindow;
+    </script>
+</body>
+
+</html>

www/world_test.html

@@ -0,0 +1,309 @@
+<html>
+
+<head>
+    <style>
+        body{
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+    <script src="https://d3js.org/topojson.v3.min.js"></script>
+    <script src="//unpkg.com/d3-geo-zoom"></script>
+    <script type="text/javascript">
+    // see also: http://bl.ocks.org/dwtkns/4973620
+        var width = window.innerWidth;
+        var height = window.innerHeight;
+
+        const eu_countries = ['Austria', 'Italy', 'Belgium', 'Latvia', 'Bulgaria', 'Lithuania', 'Croatia', 'Luxembourg', 'Cyprus', 'Malta', 'Czechia', 'Netherlands', 'Denmark', 'Poland', 'Estonia	', 'Portugal', 'Finland	', 'Romania', 'France', 'Slovakia', 'Germany', 'Slovenia', 'Greece', 'Spain', 'Hungary', 'Sweden', 'Ireland'];
+
+        const config = {
+            'max_y_rotation' : 55,
+        }
+
+        var graph = {
+            nodes: [
+                { id: "New York", lat: 40.706109, lon: -74.01194 },
+                { id: "London", lat: 51.508070, lon: -0.126432 },
+                { id: "Montevideo", lat: -34.901776, lon: -56.163983 },
+                { id: "London-NewYork1" },
+                { id: "London-NewYork2" },
+                { id: "London-NewYork3" },
+                { id: "Montevideo-London" }
+            ],
+            links: [
+                { source: "New York", target: "London-NewYork1" },
+                { source: "New York", target: "London-NewYork2" },
+                { source: "New York", target: "London-NewYork3" },
+                { source: "London-NewYork1", target: "London" },
+                { source: "London-NewYork2", target: "London" },
+                { source: "London-NewYork3", target: "London" },
+                { source: "London", target: "Montevideo-London" },
+                { source: "Montevideo-London", target: "Montevideo" }
+            ]
+        }
+
+
+        const force = d3.forceSimulation()
+            .force("link", d3.forceLink()
+                .id(function (d) {
+                    return d.id;
+                })
+                .distance(10))
+            .force("charge", d3.forceManyBody().strength(-200));
+            
+
+        const svg = d3.select("body")
+            .append("svg")
+            .attr("width", width)
+            .attr("height", height);
+
+        const container = svg.append("g").attr("id", "container");
+
+        const projection = d3.geoOrthographic()
+            .center([0, 0])
+            .translate([width / 2, height / 2])
+            .rotate([ -12, -52, 0])
+            .clipAngle(90)
+            .scale(height*1.5);
+
+        const proj = d3.geoPath().projection(projection);
+        const graticule = d3.geoGraticule10();
+
+        const g_countries = container.append("g").attr("id", "countries");
+        const g_borders = container.append("g").attr("id", "borders");
+        container.append("g")
+                .append('path')
+                .attr("class", "graticule")
+                .attr('d', proj(graticule))
+                .attr("fill", "none")
+                .attr("stroke-width", "!px")
+                .attr("stroke", (n) => {
+                    return "lightgray";
+                });
+            ;
+
+
+        d3.json("https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json").then(function (world) {
+            // land = topojson.feature(world, world.objects.land)
+            const borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
+            console.log(borders);
+            const countries = topojson.feature(world, world.objects.countries).features;
+            // console.log(topojson.feature(world, world.objects.countries).features);
+            g_countries.selectAll("path")
+                .data(countries)
+                .enter()
+                .append("path")
+                .attr("class", "countries")
+                .attr("d", proj)
+                .attr("fill", (n) => {
+                    if(eu_countries.indexOf(n.properties.name) !== -1) {
+                        return '';
+                    }
+                    return "lightgray";
+                });
+                
+            g_borders//.selectAll("path")
+                // .data(borders)
+                // .enter()
+                .append("path")
+                .attr("class", "borders")
+                .attr("d", proj(borders))
+                .attr("fill", "none")
+                .attr("stroke-width", "2px")
+                .attr("stroke", (n) => {
+                    return "white";
+                });
+
+            const links = container.append('g')
+                .attr("id", "links")
+                .selectAll("line")
+                .data(graph.links)
+                .enter()
+                .append("line")
+                .attr("stroke-width", 2)
+                .attr("stroke", "black");
+
+
+            const nodes = container.append('g')
+                .attr("id", "nodes")
+                .selectAll("circle")
+                .data(graph.nodes)
+                .enter()
+                .append("circle")
+                .attr('r', 5)
+                .call(d3.drag()
+                    .on("start", dragInicia)
+                    .on("drag", dragging)
+                    .on("end", dragTermina));
+
+
+
+            force.nodes(graph.nodes);
+            force.force("link").links(graph.links);
+
+            graph.nodes.forEach(function (d) {
+                if (d.lon && d.lat) {
+                    var p = projection([d.lon, d.lat]);
+                    d.fx = p[0];
+                    d.fy = p[1];
+                }
+            })
+
+            //simulación y actualizacion de la posicion de los nodos en cada "tick"
+            force.on("tick", function () {
+                links
+                    .attr('x1', function (d) {
+                        return d.source.x;
+                    })
+                    .attr('y1', function (d) {
+                        return d.source.y;
+                    })
+                    .attr('x2', function (d) {
+                        return d.target.x;
+                    })
+                    .attr('y2', function (d) {
+                        return d.target.y;
+                    })
+                    ;
+
+                nodes
+                    .attr('cx', function (d) {
+                        return d.x;
+                    })
+                    .attr('cy', function (d) {
+                        return d.y;
+                    })
+                    ;
+            })
+
+
+            function dragInicia(d) {
+                if (!d.lon || !d.lat) {
+                    if (!d3.event.active) force.alphaTarget(0.3).restart();
+                    d.fx = d.x;
+                    d.fy = d.y;
+                }
+            }
+
+            function dragging(d) {
+                if (!d.lon || !d.lat) {
+                    d.fx = d3.event.x;
+                    d.fy = d3.event.y;
+                }
+            }
+
+            function dragTermina(d) {
+                if (!d.lon || !d.lat) {
+                    if (!d3.event.active) force.alphaTarget(0);
+                    d.fx = null;
+                    d.fy = null;
+                }
+            }
+
+
+
+            function refresh() {
+              container.selectAll(".countries").attr("d", proj);
+              container.selectAll(".graticule").attr("d", proj(graticule));
+              container.selectAll(".borders").attr("d",  proj(borders));
+
+            //   console.log(graph.nodes);
+            force.alpha = 0;
+            force.restart();
+              graph.nodes.forEach(function (d) {
+                        if (d.lon && d.lat) {
+                            var p = projection([d.lon, d.lat]);
+                            d.fx = p[0];
+                            d.fy = p[1];
+                        }
+                    })
+
+            }
+
+            
+            // svg.call(d3.zoom().extent([[0,0],[1,1]]).scaleExtent([0.3, 6]).on("start", function () {
+            //     // svg.node().classList.add("dragging");
+            // }).on("end", function () {
+            //     // svg.node().classList.remove("dragging");
+            // }).on("zoom", function ({ transform }) {
+            //     // container.attr("transform", transform);
+            //     o = [transform.x/6, -transform.y/6];
+            //     o[1] = o[1] > config.max_y_rotation  ? config.max_y_rotation  :
+            //             o[1] < -config.max_y_rotation ? -config.max_y_rotation :
+            //             o[1];
+            //     projection .rotate(o).scale(window.innerHeight*1.5*transform.k)
+                       
+            //     refresh();
+            //     // container.attr("transform", "scale(" + transform.k + ")");
+            // }));
+
+
+            // svg.on("wheel.zoom", (e) => {
+
+            // }, {passive: false})
+
+            d3.geoZoom()
+            .northUp(true)
+            .projection(projection)
+            .scaleExtent([.3, 6])
+            .onMove(refresh)(svg.node());
+            // (<mapDomNode>);
+
+
+
+            // d3.select('svg').call(d3.drag()
+            //                 .on("start", mousedown)
+            //                 .on("drag", mousemove)
+            //                 .on("end", mouseup));
+            //     var m0, o0;
+            //     function mousedown(e) {
+            //       m0 = [d3.event.x, d3.event.y];
+            //       o0 = projection.rotate();
+            //        console.log(e, d3.event, m0,o0);
+            //     //   d3.event.preventDefault();
+            //     }
+            //     function mousemove() {
+            //       if (m0) {
+            //         var m1 = [d3.event.x, d3.event.y]
+            //           , o1 = [o0[0] + (m1[0] - m0[0]) / 6, o0[1] + (m0[1] - m1[1]) / 6];
+            //         o1[1] = o1[1] > config.max_y_rotation  ? config.max_y_rotation  :
+            //                 o1[1] < -config.max_y_rotation ? -config.max_y_rotation :
+            //                 o1[1];
+            //         projection.rotate(o1);
+            //         // sky.rotate(o1);
+            //         refresh();
+            //       }
+            //     }
+            //     function mouseup() {
+            //       if (m0) {
+            //         mousemove();
+            //         m0 = null;
+            //       }
+            //     }
+                
+            
+            function resize(){
+                width = window.innerWidth;
+                height = window.innerHeight;
+
+                d3.selectAll('svg')
+                .attr("width", width)
+                .attr("height", height);
+                projection.translate([width / 2, height / 2]);
+                projection.scale(height*1.5);
+                refresh();
+            }
+            window.addEventListener('resize', resize);
+        });
+
+    
+
+
+    </script>
+
+</body>
+
+</html>