r/mapping_movements
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Prototype distances/similarities map

Browse source
This commit is contained in:
Ruben van de Ven 2024-01-03 11:47:11 +01:00
parent 9cf4fd47cd
commit 55d5adbda9
3 changed files with 223 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

246
Mapping Movements.ipynb
View file

File diff suppressed because one or more lines are too long

109
distances.html Normal file
View file

@ -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>

1
similarities.json Normal file
View file

File diff suppressed because one or more lines are too long