Prototype distances/similarities map

2024-01-03 11:47:11 +01:00 · 2024-01-03 11:47:11 +01:00 · 55d5adbda9
parent 9cf4fd47cd
commit 55d5adbda9
3 changed files with 223 additions and 133 deletions
--- a/Movements.ipynb
+++ b/Movements.ipynb
--- a/distances.html
+++ b/distances.html
@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mapping Movements - Alternative map of movements</title>
+    <style>
+        #map {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+        }
+
+        .initiative {
+            position: absolute;
+            top: calc(50% - 50px);
+            left: 0;
+            height: 100px;
+            width: 100px;
+            overflow: hidden;
+
+            transition: left 2s, top 2s;
+        }
+    </style>
+
+    <script>
+
+        class Map {
+            constructor(mapEl) {
+                this.mapEl = mapEl;
+                this.initiatives = []
+                this.similarities = {}
+            }
+
+            _load() {
+
+                return fetch("similarities.json")
+                    .then((response) => {
+                        if (!response.ok) {
+                            throw new Error(`HTTP error! Status: ${response.status}`);
+                        }
+
+                        return response.json();
+                    })
+                    .then((response) => {
+                        this.initiatives = response.initiatives
+                        this.similarities = response.similarities
+                    });
+            }
+
+            init() {
+                this._load()
+                    .then(() => {
+                        this._createElements()
+                        this.selectInitiative(0)
+                    });
+            }
+
+            _createElements() {
+                this.mapEl.innerHMTL = "";
+                this.initiatives.forEach((initiative, initiative_idx) => {
+                    const el = document.createElement('div')
+                    el.classList.add('initiative')
+                    el.innerHTML = `
+                        <h2>${initiative.Title}</h2>
+                        <div class='organisation'>${initiative.Organisation}</div>
+                        `;
+                    el.addEventListener('click', (e) => this.selectInitiative(initiative_idx));
+                    initiative['el'] = el;
+                    this.mapEl.appendChild(el);
+                })
+            }
+
+            selectInitiative(nr) {
+                this.selectedIndex = nr;
+                this.selectedInitiative = this.initiatives[nr];
+
+                this.similarities[this.selectedIndex].forEach((similarity, initiative_idx) => {
+                    // if (initiative_idx == this.selectedIndex) {
+                    //     return;
+                    // }
+                    const el = this.initiatives[initiative_idx]['el'];
+                    const position = window.innerWidth - (similarity * window.innerWidth);
+                    el.style.left = `${position}px`;
+                    // console.log(distance_idx, distance)
+                });
+            }
+
+
+        }
+
+        var map;
+        document.addEventListener("DOMContentLoaded", (event) => {
+            map = new Map(document.getElementById('map'));
+            map.init()
+        });
+    </script>
+</head>
+
+<body>
+    <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>
+</body>
+
+</html>
--- a/similarities.json
+++ b/similarities.json