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

Rotated to make better use of landscape screen

Browse source
This commit is contained in:
Ruben van de Ven 2024-01-03 13:38:55 +01:00
parent 1a5f365175
commit 0057afa5fc
1 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
similarities_map.html
View file

@ -19,7 +19,7 @@
.about { .about {
position: absolute; position: absolute;
bottom: 20px; top: 20px;
right: 20px; right: 20px;
width: 400px; width: 400px;
z-index: 10; z-index: 10;
@ -63,6 +63,7 @@
width: var(--marker-size); width: var(--marker-size);
transition: left 2s, top 2s; transition: left 2s, top 2s;
cursor: pointer; cursor: pointer;
transform: translate(calc(var(--marker-size) * -.5), calc(var(--marker-size) * -.5));
} }
.initiative h2 { .initiative h2 {
@ -94,12 +95,12 @@
} }
svg { svg {
position: fixed; position: fixed;
top: 40px; top: 20px;
left: calc(20px + var(--marker-size) / 2); left: 20px;
right: 0; /* right: 20px; */
height: calc(100vh - 100px); height: calc(100vh - 2 * 20px - var(--marker-size));
width: calc(100vw - 2 * 20px);
z-index: -1; z-index: -1;
} }
@ -109,6 +110,7 @@
stroke-dasharray: 100 100; stroke-dasharray: 100 100;
stroke-dashoffset: 0; stroke-dashoffset: 0;
transition: stroke-dashoffset 2s, opacity 2s; transition: stroke-dashoffset 2s, opacity 2s;
opacity: 1 ;
} }
</style> </style>
@ -172,8 +174,8 @@
const line = document.createElementNS("http://www.w3.org/2000/svg", 'line') const line = document.createElementNS("http://www.w3.org/2000/svg", 'line')
line.setAttributeNS(null, "x1", 0) line.setAttributeNS(null, "x1", 0)
line.setAttributeNS(null, "y1", 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, "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 * .5) * 100) line.setAttributeNS(null, "y2", Math.sin(this.offsets[initiative_idx] * Math.PI - Math.PI ) * 100)
this.lineEl.appendChild(line); this.lineEl.appendChild(line);
this.offsetsEls[initiative_idx] = line; this.offsetsEls[initiative_idx] = line;
@ -184,16 +186,17 @@
this.selectedIndex = nr; this.selectedIndex = nr;
this.selectedInitiative = this.initiatives[nr]; this.selectedInitiative = this.initiatives[nr];
const radius = Math.min(window.innerWidth, window.innerHeight / 2) - 2 * this.margin; const radius = Math.min(window.innerWidth / 2, window.innerHeight) - 1 * this.margin;
const centerY = window.innerHeight / 2 - this.margin; const centerX = window.innerWidth / 2;
const centerX = this.margin; const centerY = window.innerHeight - 2 * this.margin;
this.similarities[this.selectedIndex].forEach((similarity, initiative_idx) => { this.similarities[this.selectedIndex].forEach((similarity, initiative_idx) => {
const offset = this.offsets[initiative_idx] // initiative_idx / (this.initiatives.length - 1); const offset = this.offsets[initiative_idx] // initiative_idx / (this.initiatives.length - 1);
const el = this.initiatives[initiative_idx]['el']; const el = this.initiatives[initiative_idx]['el'];
// similarity=0
const r = (similarity - 1) * radius; const r = (similarity - 1) * radius;
const x = Math.cos(offset * Math.PI + Math.PI * .5) * r const x = Math.cos(offset * Math.PI) * r
const y = Math.sin(offset * Math.PI + Math.PI * .5) * r const y = Math.sin(offset * Math.PI) * r
if (this.selectedIndex == initiative_idx) { if (this.selectedIndex == initiative_idx) {
el.classList.add('selected'); 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, <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> organised by Creative Coding Utrecht for the Copernicus Institute of the Utrecht University.</div>
<div id="map"></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> </body>
</html> </html>