draw lines

similarities_map.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mapping Movements - Alternative map of movements</title>
     <style>
-        :root{
+        :root {
             --marker-size: 20px;
         }
 
@@ -46,7 +46,9 @@
             border-radius: 0 7px 0 7px;
             content: ' ';
         }
-        .initiative.selected::before, .initiative:hover::before {
+
+        .initiative.selected::before,
+        .initiative:hover::before {
             background: black;
         }
 
@@ -90,18 +92,39 @@
             opacity: 1;
             display: block;
         }
+
+        svg {
+
+            position: fixed;
+            top: 40px;
+            left: calc(20px + var(--marker-size) / 2);
+            right: 0;
+            height: calc(100vh - 100px);
+            z-index: -1;
+        }
+
+        svg line {
+            stroke: rgba(255, 255, 255, .5);
+            stroke-width: 0.3px;
+            stroke-dasharray: 100 100;
+            stroke-dashoffset: 0;
+            transition: stroke-dashoffset 2s, opacity 2s;
+        }
     </style>
 
     <script>
 
         class Map {
-            constructor(mapEl) {
-                this.margin = 60;
+            constructor(mapEl, lineEl) {
+                this.margin = 20;
 
                 this.mapEl = mapEl;
+                this.lineEl = lineEl;
                 this.initiatives = []
                 this.similarities = {}
                 this.offsets = []
+                this.offsetsEls = {}
+
 
             }
 
@@ -144,6 +167,16 @@
                     el.addEventListener('click', (e) => this.selectInitiative(initiative_idx));
                     initiative['el'] = el;
                     this.mapEl.appendChild(el);
+
+                    // <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
+                    const line = document.createElementNS("http://www.w3.org/2000/svg", 'line')
+                    line.setAttributeNS(null, "x1", 0)
+                    line.setAttributeNS(null, "y1", 0)
+                    line.setAttributeNS(null, "x2", Math.cos(this.offsets[initiative_idx] * Math.PI - Math.PI * .5) * 100)
+                    line.setAttributeNS(null, "y2", Math.sin(this.offsets[initiative_idx] * Math.PI - Math.PI * .5) * 100)
+
+                    this.lineEl.appendChild(line);
+                    this.offsetsEls[initiative_idx] = line;
                 })
             }
 
@@ -161,14 +194,19 @@
                     const r = (similarity - 1) * radius;
                     const x = Math.cos(offset * Math.PI + Math.PI * .5) * r
                     const y = Math.sin(offset * Math.PI + Math.PI * .5) * r
-                    el.style.left = `${centerX + x}px`;
-                    el.style.top = `${centerY + y}px`;
 
                     if (this.selectedIndex == initiative_idx) {
                         el.classList.add('selected');
+                        el.style.top = `${centerY}px`;
+                        el.style.left = `${centerX}px`;
                     } else {
+                        el.style.top = `${centerY + y}px`;
+                        el.style.left = `${centerX + x}px`;
                         el.classList.remove('selected')
                     }
+
+                    this.offsetsEls[initiative_idx].style.strokeDashoffset = similarity * 100;
+                    this.offsetsEls[initiative_idx].style.opacity = similarity;
                 });
             }
 
@@ -177,7 +215,7 @@
 
         var map;
         document.addEventListener("DOMContentLoaded", (event) => {
-            map = new Map(document.getElementById('map'));
+            map = new Map(document.getElementById('map'), document.getElementById('lines'));
             map.init()
         });
     </script>
@@ -187,6 +225,7 @@
     <div class="about">This map was created by Ruben van de Ven for the <em>Mapping Movements</em> pressure cooker,
         organised by Creative Coding Utrecht for the Copernicus Institute of the Utrecht University.</div>
     <div id="map"></div>
+    <svg reserveaspectratio="xMinYMid meet" viewBox="0,-100,200,200" id="lines"></svg>
 </body>
 
 </html>