Skip to content

Commit 8d65c13

Browse files
adamvosburghadamvosburgh
committed
anthromes menu adjustments
1 parent c207202 commit 8d65c13

2 files changed

Lines changed: 166 additions & 45 deletions

File tree

‎src/anthromes/App.svelte‎

Lines changed: 124 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,15 @@
55
import ZoomsPanel from './lib/ZoomsPanel.svelte';
66
import { prepareAnthromesData } from './lib/dataAdapter.js';
77
8+
const LEGEND_CATEGORIES = [
9+
{ name: 'Dense Settlements', codes: [11, 12] },
10+
{ name: 'Villages', codes: [21, 22, 23, 24] },
11+
{ name: 'Croplands', codes: [31, 32, 33, 34] },
12+
{ name: 'Rangelands', codes: [41, 42, 43] },
13+
{ name: 'Cultured', codes: [51, 52, 53, 54] },
14+
{ name: 'Wildlands', codes: [61, 62, 63] },
15+
];
16+
817
// State
918
let loading = $state(true);
1019
let error = $state(null);
@@ -383,25 +392,36 @@
383392
{#if openPanel === 'info'}
384393
<div class="info-body">
385394
<p><strong><u>More than 65% of terrestrial nature</u></strong> has been shaped, in very different ways, by people.</p>
386-
<p><strong>Anthromes</strong> are defined as the ecological patterns shaped by human habitation.</p>
395+
<p><strong>Anthromes</strong> are defined as the global ecological patterns shaped by direct human interactions with ecosystems.</p>
387396
<p>Visualized here is the <strong>Anthromes Dataset</strong>. It is a "hindcast," a model built from global population and land use data showing change over <u>12,025 years</u>.</p>
388397
<p>As global population increases, and urbanization accelerates, <strong>biodiversity shrinks.</strong></p>
389398
<p><u>Preserving "cultured" and "wild" lands</u> is key to preserving biodiversity.</p>
390399
391-
<div class="info-swatches" aria-label="Anthrome color swatches">
392-
{#each orderedCodes as code}
393-
<div class="swatch-pill">
394-
<span class="swatch-pill__color" style={`background: ${colorMapping[code]}`}></span>
395-
<span class="swatch-pill__label">{labelMapping[code]}</span>
400+
<div class="legend-section">
401+
<div class="legend-category-name">Legend</div>
402+
<div class="legend-body">
403+
<div class="legend-axis" aria-hidden="true">
404+
<span class="legend-axis-label">more intensive anthromes</span>
396405
</div>
397-
{/each}
406+
<div class="info-swatches" aria-label="Anthrome color swatches">
407+
{#each LEGEND_CATEGORIES as category}
408+
<div class="legend-category-name">{category.name}</div>
409+
{#each category.codes as code}
410+
<div class="swatch-pill">
411+
<span class="swatch-pill__color" style={`background: ${colorMapping[code]}`}></span>
412+
<span class="swatch-pill__label">{labelMapping[code]}</span>
413+
</div>
414+
{/each}
415+
{/each}
416+
</div>
417+
</div>
398418
</div>
399419
400420
<div class="info-citations">
401421
<div class="info-citations-title">Citations</div>
402-
<p>This project was completed by Laura Kurgan, Dan Miller and Adam Vosburgh at The Center for Spatial Research, Columbia University Graduate School of Architecture Planning and Preservation. This project is open-source, and the repository is located <a href="https://github.com/CenterForSpatialResearch/twosides" target="_blank" rel="noopener">here</a>.</p>
403422
<p>Ellis, E.C., N. Gauthier, K. Klein Goldewijk, R. Bliege Bird, N. Boivin, S. Diaz, D. Fuller, J. Gill, J. Kaplan, N. Kingston, H. Locke, C. McMichael, D. Ranco, T. Rick, M.R. Shaw, L. Stephens, J.C. Svenning, and J.E.M. Watson. 2021. "People have shaped most of terrestrial nature for at least 12,000 years." <em>Proceedings of the National Academy of Sciences</em> 118(17): e2023483118. <a href="https://doi.org/10.1073/pnas.2023483118" target="_blank" rel="noopener">https://doi.org/10.1073/pnas.2023483118</a></p>
404423
<p>Klein Goldewijk, K. 2025. History Database of the Global Environment (HYDE 3.5). Utrecht University. <a href="https://public.yoda.uu.nl/geo/UU01/F45D44.html" target="_blank" rel="noopener">https://public.yoda.uu.nl/geo/UU01/F45D44.html</a></p>
424+
<p>This project was completed by Laura Kurgan, Dan Miller and Adam Vosburgh at The Center for Spatial Research, Columbia University Graduate School of Architecture Planning and Preservation. This project is open-source, and the repository is located <a href="https://github.com/CenterForSpatialResearch/twosides" target="_blank" rel="noopener">here</a>.</p>
405425
</div>
406426
</div>
407427
{#if showBarChart && barChartData?.length}
@@ -411,7 +431,10 @@
411431
</div>
412432
{/if}
413433
{:else if openPanel === 'anthromes'}
414-
<p class="overlay-desc">Select anthrome classes; click or drag to choose a range.</p>
434+
<div class="overlay-desc">
435+
<p>Select anthrome classes below to filter the visualization; click or drag to choose a range.</p>
436+
<p>Anthromes are patterns of direct human interactions with ecosystems, also known as "human biomes."</p>
437+
</div>
415438
<div class="overlay-actions">
416439
<button class="btn" onclick={handleSelectAll}>Select All</button>
417440
<button class="btn" onclick={handleClear}>Clear</button>
@@ -969,7 +992,7 @@
969992
970993
/* Views panel uses the full middle row */
971994
.filter-overlay.views-open {
972-
padding: 8px 10px;
995+
padding: 12px 14px;
973996
height: 100%;
974997
max-height: 100%;
975998
}
@@ -979,7 +1002,7 @@
9791002
align-items: center;
9801003
justify-content: space-between;
9811004
gap: 8px;
982-
margin-bottom: 8px;
1005+
margin-bottom: 10px;
9831006
}
9841007
9851008
.overlay-title {
@@ -1100,12 +1123,20 @@
11001123
}
11011124
11021125
.overlay-desc {
1103-
margin: 6px 0 10px;
1126+
margin: 0 0 10px;
11041127
font-size: 11px;
11051128
color: var(--muted);
11061129
line-height: 1.4;
11071130
}
11081131
1132+
.overlay-desc p {
1133+
margin: 0;
1134+
}
1135+
1136+
.overlay-desc p + p {
1137+
margin-top: 8px;
1138+
}
1139+
11091140
.info-body {
11101141
display: grid;
11111142
gap: 10px;
@@ -1122,11 +1153,90 @@
11221153
padding-top: 6px;
11231154
}
11241155
1156+
.legend-section {
1157+
display: flex;
1158+
flex-direction: column;
1159+
gap: 4px;
1160+
}
1161+
1162+
.legend-body {
1163+
display: flex;
1164+
gap: 30px;
1165+
align-items: stretch;
1166+
}
1167+
1168+
/* Axis: vertical arrow + label spanning full legend height */
1169+
.legend-axis {
1170+
position: relative;
1171+
width: 16px;
1172+
flex-shrink: 0;
1173+
}
1174+
1175+
/* Line and arrowhead sit on the right edge of the axis column */
1176+
.legend-axis::before {
1177+
content: '';
1178+
position: absolute;
1179+
left: 20px;
1180+
top: 6px;
1181+
bottom: 0;
1182+
width: 1px;
1183+
background: rgba(255,255,255,0.3);
1184+
}
1185+
1186+
.legend-axis::after {
1187+
content: '';
1188+
position: absolute;
1189+
left: 20px;
1190+
top: 1px;
1191+
transform: translateX(-50%);
1192+
width: 0;
1193+
height: 0;
1194+
border-left: 3px solid transparent;
1195+
border-right: 3px solid transparent;
1196+
border-bottom: 5px solid rgba(255,255,255,0.3);
1197+
}
1198+
1199+
/* Text spans only the top half so its center sits near Urban */
1200+
.legend-axis-label {
1201+
position: absolute;
1202+
top: 12px;
1203+
bottom: 50%;
1204+
left: 5px;
1205+
right: 0;
1206+
display: flex;
1207+
align-items: center;
1208+
justify-content: center;
1209+
writing-mode: vertical-rl;
1210+
transform: rotate(180deg);
1211+
font-size: 9px;
1212+
text-transform: uppercase;
1213+
letter-spacing: 0.06em;
1214+
color: rgba(255,255,255,0.35);
1215+
white-space: nowrap;
1216+
pointer-events: none;
1217+
user-select: none;
1218+
}
1219+
11251220
.info-swatches {
1221+
flex: 1;
1222+
min-width: 0;
11261223
display: grid;
11271224
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1128-
gap: 8px;
1129-
margin-top: 4px;
1225+
gap: 4px 8px;
1226+
}
1227+
1228+
.legend-category-name {
1229+
grid-column: 1 / -1;
1230+
font-size: 10px;
1231+
font-weight: 700;
1232+
text-transform: uppercase;
1233+
letter-spacing: 0.08em;
1234+
color: var(--muted);
1235+
margin-top: 8px;
1236+
}
1237+
1238+
.legend-category-name:first-child {
1239+
margin-top: 0;
11301240
}
11311241
11321242
.swatch-pill {

‎src/anthromes/lib/ZoomsPanel.svelte‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -278,19 +278,20 @@
278278
<!-- Sort dropdown — centered at top -->
279279
<div class="zp-header">
280280
<p class="zp-intro">Views of selected sites at higher resolution. Highlight cells to see the year that cell changed to its current anthrome.</p>
281-
<div class="zp-sort">
282-
<label for="zp-sort-sel">Sort By</label>
283-
<div class="zp-sort-row">
281+
<div class="zp-controls">
282+
<label for="zp-sort-sel">Sort By:</label>
283+
<select id="zp-sort-sel" bind:value={sortBy}>
284+
<option value="selected">Selected sites</option>
285+
<option value="intensive-1900">Largest Intensive Shifts since 1900</option>
286+
<option value="cultured-1900">Largest Cultured Shifts since 1900</option>
287+
<option value="intensive-2000">Largest Intensive Shifts since 2000</option>
288+
<option value="cultured-2000">Largest Cultured Shifts since 2000</option>
289+
</select>
290+
<span class="zp-zoom-group">
291+
<span class="zp-zoom-label">Zoom:</span>
284292
<button class="zp-zoom-btn" onclick={() => { flushSync(() => { rendering = true; }); setTimeout(() => { zoomK = Math.max(ZOOM_MIN, zoomK - ZOOM_STEP); }, 0); }} disabled={zoomK <= ZOOM_MIN}>−</button>
285-
<select id="zp-sort-sel" bind:value={sortBy}>
286-
<option value="selected">Selected sites</option>
287-
<option value="intensive-1900">Largest Intensive Shifts since 1900</option>
288-
<option value="cultured-1900">Largest Cultured Shifts since 1900</option>
289-
<option value="intensive-2000">Largest Intensive Shifts since 2000</option>
290-
<option value="cultured-2000">Largest Cultured Shifts since 2000</option>
291-
</select>
292293
<button class="zp-zoom-btn" onclick={() => { flushSync(() => { rendering = true; }); setTimeout(() => { zoomK = Math.min(ZOOM_MAX, zoomK + ZOOM_STEP); }, 0); }} disabled={zoomK >= ZOOM_MAX}>+</button>
293-
</div>
294+
</span>
294295
</div>
295296
</div>
296297
@@ -320,63 +321,73 @@
320321
height: 100px;
321322
display: flex;
322323
flex-direction: column;
323-
justify-content: center;
324-
align-items: center;
324+
justify-content: flex-start;
325+
align-items: flex-start;
325326
gap: 6px;
326327
flex-shrink: 0;
327-
padding: 0 8px;
328328
}
329329
330330
.zp-intro {
331-
margin: 0;
331+
margin: 0 0 2px;
332332
font-size: 11px;
333333
color: var(--muted);
334-
text-align: center;
335334
line-height: 1.4;
336-
width: 75%;
337335
}
338336
339-
.zp-sort {
337+
.zp-controls {
340338
display: flex;
341-
flex-direction: column;
342339
align-items: center;
343-
gap: 3px;
340+
gap: 6px;
341+
flex-wrap: nowrap;
344342
}
345343
346-
.zp-sort label {
344+
.zp-controls label {
347345
font-size: 10px;
348346
text-transform: uppercase;
349347
color: var(--muted);
350348
letter-spacing: 0.06em;
349+
white-space: nowrap;
350+
flex-shrink: 0;
351351
}
352352
353-
.zp-sort-row {
354-
display: flex;
355-
align-items: center;
356-
gap: 4px;
357-
}
358-
359-
.zp-sort select {
353+
.zp-controls select {
360354
padding: 4px 8px;
361355
border-radius: 6px;
362356
border: 1px solid rgba(255, 255, 255, 0.18);
363357
background: #1a1625;
364358
color: var(--fg);
365359
font-size: 11px;
366360
cursor: pointer;
367-
max-width: 220px;
361+
min-width: 0;
362+
flex: 1 1 auto;
368363
}
369364
370-
.zp-sort select option {
365+
.zp-controls select option {
371366
background: #1a1625;
372367
color: var(--fg);
373368
}
374369
375-
.zp-sort select:focus {
370+
.zp-controls select:focus {
376371
outline: none;
377372
border-color: var(--accent);
378373
}
379374
375+
.zp-zoom-group {
376+
display: flex;
377+
align-items: center;
378+
gap: 4px;
379+
flex-shrink: 0;
380+
margin-left: 8px;
381+
}
382+
383+
.zp-zoom-label {
384+
font-size: 10px;
385+
text-transform: uppercase;
386+
color: var(--muted);
387+
letter-spacing: 0.06em;
388+
white-space: nowrap;
389+
}
390+
380391
.zp-zoom-btn {
381392
width: 22px;
382393
height: 22px;

0 commit comments

Comments
 (0)