distances as similarities

similarities_map.html

@@ -6,6 +6,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mapping Movements - Alternative map of movements</title>
     <style>
+        :root{
+            --marker-size: 20px;
+        }
+
+        body {
+            background: linear-gradient(#e66465, #9198e5);
+            height: 100vh;
+            color: white;
+            font-family: sans-serif;
+        }
+
+        .about {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            width: 400px;
+            z-index: 10;
+        }
+
+
         #map {
             position: fixed;
             top: 0;
@@ -14,15 +34,61 @@
             bottom: 0;
         }
 
+        .initiative::before {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: var(--marker-size);
+            height: var(--marker-size);
+            /* background: black; */
+            border: solid 2px black;
+            /* border-style: dotted; */
+            border-radius: 0 7px 0 7px;
+            content: ' ';
+        }
+        .initiative.selected::before, .initiative:hover::before {
+            background: black;
+        }
+
         .initiative {
             position: absolute;
             top: calc(50% - 50px);
             left: 0;
-            height: 100px;
-            width: 100px;
-            overflow: hidden;
-
+            /* height: 100px;
+            width: 100px; */
+            /* overflow: hidden; */
+            height: var(--marker-size);
+            width: var(--marker-size);
             transition: left 2s, top 2s;
+            cursor: pointer;
+        }
+
+        .initiative h2 {
+            position: absolute;
+            width: 250px;
+            font-size: 100%;
+            margin: 0;
+            /* opacity: .1; */
+            display: none;
+            top: calc(var(--marker-size) - 5px);
+            left: calc(var(--marker-size) + 10px);
+        }
+
+        .initiative .organisation {
+            position: absolute;
+            width: 250px;
+            /* opacity: .1; */
+            display: none;
+            bottom: calc(var(--marker-size) - 5px);
+            left: calc(var(--marker-size) + 10px);
+        }
+
+        .initiative:hover .organisation,
+        .initiative:hover h2,
+        .initiative.selected .organisation,
+        .initiative.selected h2 {
+            opacity: 1;
+            display: block;
         }
     </style>
 
@@ -30,9 +96,13 @@
 
         class Map {
             constructor(mapEl) {
+                this.margin = 60;
+
                 this.mapEl = mapEl;
                 this.initiatives = []
                 this.similarities = {}
+                this.offsets = []
+
             }
 
             _load() {
@@ -48,6 +118,7 @@
                     .then((response) => {
                         this.initiatives = response.initiatives
                         this.similarities = response.similarities
+                        this.offsets = response.pca_1
                     });
             }
 
@@ -56,6 +127,8 @@
                     .then(() => {
                         this._createElements()
                         this.selectInitiative(0)
+
+                        window.addEventListener('resize', (e) => this.selectInitiative(this.selectedIndex))
                     });
             }
 
@@ -78,14 +151,24 @@
                 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;
+
                 this.similarities[this.selectedIndex].forEach((similarity, initiative_idx) => {
-                    // if (initiative_idx == this.selectedIndex) {
-                    //     return;
-                    // }
+                    const offset = this.offsets[initiative_idx] // initiative_idx / (this.initiatives.length - 1);
                     const el = this.initiatives[initiative_idx]['el'];
-                    const position = window.innerWidth - (similarity * window.innerWidth);
-                    el.style.left = `${position}px`;
-                    // console.log(distance_idx, distance)
+                    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');
+                    } else {
+                        el.classList.remove('selected')
+                    }
                 });
             }