index

templates/assets/css/nav.css

@@ -41,6 +41,7 @@
     top: 0;
     right: -90vw;
     background: #fff;
+    opacity: 90%;
     width: 70vw;
     height: 100%;
     padding-top: 11vh;

templates/assets/css/net.css

@@ -0,0 +1,37 @@
+svg {
+  max-height: 90vh;
+  width: 100%;
+}
+
+.link {
+    stroke: #000;
+    stroke-width: 1.5px;
+  }
+  
+  .node {
+    cursor: move;
+    stroke: #000;
+    stroke-width: .07vw;
+    fill-rule: evenodd;
+  }
+  
+  .node.fixed {
+    stroke: #30dfdf;
+    stroke-width: .05vw;
+  }
+
+@media(min-width: 768px) {
+
+    body {
+        max-height: 90vh;
+        min-width: 100vw;
+    }
+      svg { 
+          height: 50 !important;
+          width: 200;
+      }
+}
+
+
+
+  

templates/assets/js/net.js

@@ -0,0 +1,197 @@
+let graph = {
+    nodes : [
+      {id : "hemp", index: 0, x: 719.1790913580512, y: 326.11409230900296, vy: 0.0009665554475078223, vx: 0.00044710537175425926},
+      {id : "permapp", index: 1, x: 473.51321690437135, y: 317.1181430586339, vy: 0.0005811239352358496, vx: 0.0005105059544352408 },
+      {id : "spider", index: 2, x: 495.66982580572676, y: 18.53, vy: 0.0007713356454593206, vx: 0.0007887999665437037 },
+      {id : "cyberpreneur", index: 3, x: 457.9995206323447, y: 277.13445200140694, vy: 0.0004637678594351416, vx: 0.0007441570379881761 },
+      {id : "kaoscube", index: 4, x: 428.05791236956037, y: 237.65121337678465, vy: 0.00037483669542696317, vx: 0.00039028860355878376 },
+      {id : "offgrid", index: 5, x: 461.65464520161396, y: 189.18158017082138, vy: -0.00023265081878199873, vx: 0.00006278089396472572 }
+  
+  ],
+  
+    links : [
+      {source: 0, target: 1, index: 0 },
+      {source: 0, target: 2, index: 1 },
+      {source: 0, target: 3, index: 2 },
+      {source: 0, target: 4, index: 3 },
+      {source: 1, target: 2, index: 4 },
+      {source: 1, target: 4, index: 5 },
+      {source: 2, target: 3 ,index: 6 },
+      {source: 2, target: 4 ,index: 7 },
+      {source: 2, target: 5 ,index: 8 },
+      {source: 4, target: 5 ,index: 9 }
+    ],
+
+}
+
+let width = 100;
+let height = 200;
+
+const svg = d3.select("#mobile_network").append("svg").attr("viewBox", "0, 0, 100, 200").attr("preserveAspectRatio", "xMidYMid meet"),
+    link = svg
+      .selectAll(".link")
+      .data(graph.links)
+      .join("line")
+      .classed("link", true),
+    node = svg
+      .selectAll(".node")
+      .data(graph.nodes)
+      .join("circle")
+      .attr("id", d => d.id)
+      .attr("r", 15)
+      .classed("node", true)
+      .classed("fixed", d => d.fx !== undefined);
+
+const node1 = svg.select("#hemp")
+    .attr("fill", "url(#imgHemp)")
+    .append("a")
+    .attr("xlink:href", "/hemp");
+
+const node2 = svg.select("#permapp")
+    .attr("fill", "url(#imgPermapp)");
+
+const node3 = svg.select("#spider")
+    .attr("fill", "url(#imgSpider)");
+
+const node4 = svg.select("#cyberpreneur")
+    .attr("fill", "url(#imgCyber)");
+
+const node5 = svg.select("#kaoscube")
+    .attr("fill", "url(#imgKaos)");
+
+const node6 = svg.select("#offgrid")
+    .attr("fill", "url(#imgOff)");
+
+const defs = svg.append("svg:defs");
+
+defs.append("svg:pattern")
+.attr("width", "100%")
+.attr("height", "100%")
+.attr("id", "imgHemp")
+.append("svg:image")
+.attr("xlink:href", "/assets/img/hemp.webp")
+.attr("width", 35)
+.attr("height", 35)
+.attr("x", -5 )
+.attr("y", 0);
+
+defs.append("svg:pattern")
+.attr("width", "100%")
+.attr("height", "100%")
+.attr("id", "imgPermapp")
+.append("svg:image")
+.attr("xlink:href", "/assets/img/v1-permapp.webp")
+.attr("width", 35)
+.attr("height", 35)
+.attr("x", 0 )
+.attr("y", 0);
+
+defs.append("svg:pattern")
+.attr("width", "100%")
+.attr("height", "100%")
+.attr("id", "imgSpider")
+.append("svg:image")
+.attr("xlink:href", "/assets/img/spider_out.webp")
+.attr("width", 34)
+.attr("height", 34)
+.attr("x", -4 )
+.attr("y", -4);
+
+defs.append("svg:pattern")
+.attr("width", "100%")
+.attr("height", "100%")
+.attr("id", "imgCyber")
+.append("svg:image")
+.attr("xlink:href", "/assets/img/3d_greenhouse.webp")
+.attr("width", 40)
+.attr("height", 40)
+.attr("x", -5 )
+.attr("y", -8);
+
+
+defs.append("svg:pattern")
+.attr("width", "100%")
+.attr("height", "100%")
+.attr("id", "imgKaos")
+.append("svg:image")
+.attr("xlink:href", "/assets/img/cube_space.webp")
+.attr("width", 35)
+.attr("height", 35)
+.attr("x", -6 )
+.attr("y", -6);
+
+defs.append("svg:pattern")
+.attr("width", "100%")
+.attr("height", "100%")
+.attr("id", "imgOff")
+.append("svg:image")
+.attr("xlink:href", "/assets/img/boat_construction.webp")
+.attr("width", 35)
+.attr("height", 35)
+.attr("x", -6 )
+.attr("y", -6);
+
+
+  const simulation = d3
+    .forceSimulation()
+    .nodes(graph.nodes)
+    .force("charge", d3.forceManyBody().strength(-60))
+    .force("center", d3.forceCenter(width / 2.1, height / 2.1))
+    .force("link", d3.forceLink(graph.links).distance(50))
+    .force("collide", d3.forceCollide(22))
+    .force("x", d3.forceX(-40))
+    .on("tick", tick);
+
+
+  const drag = d3
+    .drag()
+    .on("start", dragstart)
+    .on("drag", dragged);
+
+// invokes regiserd callback
+  node.call(drag).on("click", click);
+
+  function tick() {
+    link
+      .attr("x1", d => d.source.x)
+      .attr("y1", d => d.source.y)
+      .attr("x2", d => d.target.x)
+      .attr("y2", d => d.target.y);
+    node
+      .attr("cx", d => d.x)
+      .attr("cy", d => d.y);
+  }
+
+  // make this work on touch as well
+
+  function click(event, d) {
+    delete d.fx;
+    delete d.fy;
+    d3.select(this).classed("fixed", false);
+        simulation.alpha(1).restart();
+    
+    // on this click display html text box
+
+  }
+
+  function dragstart() {
+    d3.select(this).classed("fixed", true);
+  }
+
+  function dragged(event, d) {
+    d.fx = clamp(event.x, 0, width);
+    d.fy = clamp(event.y, 0, height);
+    simulation.alpha(1).restart();
+  }
+
+function clamp(x, lo, hi) {
+    return x < lo ? lo : x > hi ? hi : x;
+}
+
+const Nodes = graph.nodes;
+const nodeIx = d => d.img
+const N = d3.map(Nodes, nodeIx);
+
+const Images = d3.map( Nodes, ( _,i ) => ({ img: N[i] }) );
+
+

templates/base.html

@@ -12,6 +12,7 @@
             <link rel="stylesheet" href="/assets/css/base.css" />
             <link rel="stylesheet" href="/assets/css/nav.css" />
             <link rel="stylesheet" href="/assets/css/footer.css" />
+            <link rel="stylesheet" href="/assets/css/net.css"/>
             <title>Cannabinieri</title>
         {% endblock %}
     </head>

templates/index.html

@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% block content %}
-  <h1>Index</h1>
-  <p>Hello, world!</p>
+<div id="mobile_network"></div>
+<script type="module" src="/assets/js/net.js"></script>
+<script type="text/javascript" src="/assets/js/d3.v7.min.js"></script>
 {% endblock %}