From 0057afa5fc859ad63c21803a6e25b2bc1944260b Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Wed, 3 Jan 2024 13:38:55 +0100
Subject: [PATCH] Rotated to make better use of landscape screen

---
 similarities_map.html | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/similarities_map.html b/similarities_map.html
index 5194f2a..4b698ab 100644
--- a/similarities_map.html
+++ b/similarities_map.html
@@ -19,7 +19,7 @@
 
         .about {
             position: absolute;
-            bottom: 20px;
+            top: 20px;
             right: 20px;
             width: 400px;
             z-index: 10;
@@ -63,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 {
@@ -94,12 +95,12 @@
         }
 
         svg {
-
             position: fixed;
-            top: 40px;
-            left: calc(20px + var(--marker-size) / 2);
-            right: 0;
-            height: calc(100vh - 100px);
+            top: 20px;
+            left: 20px;
+            /* right: 20px; */
+            height: calc(100vh - 2 * 20px - var(--marker-size));
+            width: calc(100vw - 2 * 20px);
             z-index: -1;
         }
 
@@ -109,6 +110,7 @@
             stroke-dasharray: 100 100;
             stroke-dashoffset: 0;
             transition: stroke-dashoffset 2s, opacity 2s;
+            opacity: 1 ;
         }
     </style>
 
@@ -172,8 +174,8 @@
                     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)
+                    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;
@@ -184,16 +186,17 @@
                 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
+                    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');
@@ -225,7 +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 reserveaspectratio="xMinYMid meet" viewBox="0,-100,200,200" id="lines"></svg>
+    <svg preserveAspectRatio="xMidYMax meet" viewBox="-100,-100,200,100" id="lines"></svg>
 </body>
 
 </html>
\ No newline at end of file