Rotated to make better use of landscape screen

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;
         }
 
@@ -19,7 +19,7 @@
 
         .about {
             position: absolute;
-            bottom: 20px;
+            top: 20px;
             right: 20px;
             width: 400px;
             z-index: 10;
@@ -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;
         }
 
@@ -61,6 +63,7 @@
             width: var(--marker-size);
             transition: left 2s, top 2s;
             cursor: pointer;
+            transform: translate(calc(var(--marker-size) * -.5), calc(var(--marker-size) * -.5));
         }
 
         .initiative h2 {
@@ -90,18 +93,40 @@
             opacity: 1;
             display: block;
         }
+
+        svg {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            /* right: 20px; */
+            height: calc(100vh - 2 * 20px - var(--marker-size));
+            width: calc(100vw - 2 * 20px);
+            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;
+            opacity: 1 ;
+        }
     </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 +169,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 ) * 100)
+                    line.setAttributeNS(null, "y2", Math.sin(this.offsets[initiative_idx] * Math.PI - Math.PI ) * 100)
+
+                    this.lineEl.appendChild(line);
+                    this.offsetsEls[initiative_idx] = line;
                 })
             }
 
@@ -151,24 +186,30 @@
                 this.selectedIndex = nr;
                 this.selectedInitiative = this.initiatives[nr];
 
-                const radius = Math.min(window.innerWidth, window.innerHeight / 2) - 2 * this.margin;
-                const centerY = window.innerHeight / 2 - this.margin;
-                const centerX = this.margin;
+                const radius = Math.min(window.innerWidth / 2, window.innerHeight) - 1 * this.margin;
+                const centerX = window.innerWidth / 2;
+                const centerY = window.innerHeight - 2 * this.margin;
 
                 this.similarities[this.selectedIndex].forEach((similarity, initiative_idx) => {
                     const offset = this.offsets[initiative_idx] // initiative_idx / (this.initiatives.length - 1);
                     const el = this.initiatives[initiative_idx]['el'];
+                    // similarity=0
                     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`;
+                    const x = Math.cos(offset * Math.PI) * r
+                    const y = Math.sin(offset * Math.PI) * r
 
                     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 +218,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 +228,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 preserveAspectRatio="xMidYMax meet" viewBox="-100,-100,200,100" id="lines"></svg>
 </body>
 
 </html>