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;
-            top: 20px;
+            bottom: 20px;
             right: 20px;
             width: 400px;
             z-index: 10;
@@ -46,9 +46,7 @@
             border-radius: 0 7px 0 7px;
             content: ' ';
         }
-
-        .initiative.selected::before,
-        .initiative:hover::before {
+        .initiative.selected::before, .initiative:hover::before {
             background: black;
         }
 
@@ -63,7 +61,6 @@
             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 {
@@ -93,40 +90,18 @@
             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, lineEl) {
-                this.margin = 20;
+            constructor(mapEl) {
+                this.margin = 60;
 
                 this.mapEl = mapEl;
-                this.lineEl = lineEl;
                 this.initiatives = []
                 this.similarities = {}
                 this.offsets = []
-                this.offsetsEls = {}
-
 
             }
 
@@ -169,16 +144,6 @@
                     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;
                 })
             }
 
@@ -186,30 +151,24 @@
                 this.selectedIndex = nr;
                 this.selectedInitiative = this.initiatives[nr];
 
-                const radius = Math.min(window.innerWidth / 2, window.innerHeight) - 1 * this.margin;
-                const centerX = window.innerWidth / 2;
-                const centerY = window.innerHeight - 2 * this.margin;
+                const radius = Math.min(window.innerWidth, window.innerHeight / 2) - 2 * this.margin;
+                const centerY = window.innerHeight / 2 - this.margin;
+                const centerX = 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) * r
-                    const y = Math.sin(offset * Math.PI) * r
+                    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;
                 });
             }
 
@@ -218,7 +177,7 @@
 
         var map;
         document.addEventListener("DOMContentLoaded", (event) => {
-            map = new Map(document.getElementById('map'), document.getElementById('lines'));
+            map = new Map(document.getElementById('map'));
             map.init()
         });
     </script>
@@ -228,7 +187,6 @@
     <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>