Skip to content

Commit 2dcc048

Browse files
lunasrclunasrc
authored
Merge pull request #20 from com-480-data-visualization/feat/issue-7-disaster-points
Add per-country disaster bubbles on 3D globe
2 parents 249099b + 3586610 commit 2dcc048

6 files changed

Lines changed: 558 additions & 80 deletions

File tree

‎docs/css/style.css‎

Lines changed: 84 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
--border-dim: rgba(255,255,255,0.08);
88

99
/* Disaster type colors */
10-
--flood: #5F9CF5;
11-
--storm: #7870D8;
12-
--epidemic: #70C7A8;
13-
--infestation: #B8C96B;
14-
--animal-incident: #66BFD2;
15-
--drought: #F2B44D;
16-
--wildfire: #F39A3C;
17-
--earthquake: #8A4E24;
18-
--volcano: #D85745;
19-
--landslide: #7D9D67;
20-
--extreme-temperature: #F45FA8;
21-
--impact: #C7B2FF;
10+
--flood: #5EA8FF;
11+
--storm: #8C86FF;
12+
--epidemic: #6EE7C8;
13+
--infestation: #D6E75B;
14+
--animal-incident: #6DD6E8;
15+
--drought: #FFC857;
16+
--wildfire: #FFA142;
17+
--earthquake: #C96B32;
18+
--volcano: #FF695B;
19+
--landslide: #7FE36A;
20+
--extreme-temperature: #FF5DB8;
21+
--impact: #C7A8FF;
2222

2323
/* Color theme */
2424
--bluegrey: #97AEC4;
@@ -668,6 +668,75 @@ button {
668668
font-style: italic;
669669
}
670670

671+
.globe-point-tooltip {
672+
width: 230px;
673+
padding: 12px 14px;
674+
background: rgba(13, 17, 23, 0.96);
675+
border: 1px solid rgba(151, 174, 196, 0.38);
676+
border-radius: 8px;
677+
color: var(--text);
678+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
679+
}
680+
681+
.globe-point-tooltip .tooltip-kicker {
682+
margin-bottom: 4px;
683+
color: var(--bluegrey);
684+
font-family: var(--font-inter);
685+
font-size: 0.68rem;
686+
font-weight: 600;
687+
letter-spacing: 0.08em;
688+
text-transform: uppercase;
689+
}
690+
691+
.globe-point-tooltip .tooltip-country {
692+
margin-bottom: 5px;
693+
color: var(--text-bright);
694+
}
695+
696+
.globe-point-tooltip .tooltip-stat {
697+
margin-bottom: 9px;
698+
}
699+
700+
.scene-tooltip,
701+
.float-tooltip-kap {
702+
padding: 0 !important;
703+
background: transparent !important;
704+
border: 0 !important;
705+
border-radius: 0 !important;
706+
box-shadow: none !important;
707+
color: inherit !important;
708+
font-size: inherit !important;
709+
z-index: 1000 !important;
710+
}
711+
712+
.globe-country-bubble {
713+
width: var(--marker-size, 24px);
714+
height: var(--marker-size, 24px);
715+
display: block;
716+
padding: 0;
717+
border: 1px solid color-mix(in srgb, var(--marker-color, var(--bluegrey)) 70%, #ffffff 30%);
718+
border-radius: 50%;
719+
background: color-mix(in srgb, var(--marker-color, var(--bluegrey)) 78%, transparent);
720+
box-shadow:
721+
0 0 6px color-mix(in srgb, var(--marker-color, var(--bluegrey)) 60%, transparent),
722+
0 0 16px color-mix(in srgb, var(--marker-color, var(--bluegrey)) 28%, transparent);
723+
opacity: calc(var(--angle-opacity, 1) * 0.85);
724+
cursor: pointer;
725+
pointer-events: auto;
726+
transition: filter 0.18s ease;
727+
}
728+
729+
.globe-country-bubble:hover,
730+
.globe-country-bubble:focus-visible {
731+
opacity: var(--angle-opacity, 1);
732+
filter: saturate(1.25) brightness(1.08);
733+
}
734+
735+
.globe-country-bubble:focus-visible {
736+
outline: 2px solid color-mix(in srgb, var(--marker-color, var(--bluegrey)) 60%, #ffffff 40%);
737+
outline-offset: 3px;
738+
}
739+
671740
/* ============================================
672741
SCENE 3: COUNTRY DETAIL WITH ZOOMED MAP
673742
============================================ */
@@ -1098,6 +1167,7 @@ button {
10981167
inset: 0;
10991168
background: radial-gradient(ellipse at center, #0a0e27 0%, #020308 100%);
11001169
overflow: hidden;
1170+
z-index: 1;
11011171
}
11021172

11031173
/* Starfield background */
@@ -1147,7 +1217,7 @@ button {
11471217
max-height: calc(100vh - 36px);
11481218
overflow-x: hidden;
11491219
overflow-y: auto;
1150-
z-index: 30;
1220+
z-index: 80;
11511221
scrollbar-color: rgba(151,174,196,0.5) transparent;
11521222
scrollbar-width: thin;
11531223
}
@@ -1406,7 +1476,7 @@ button {
14061476
border: 1px solid rgba(151, 174, 196, 0.35);
14071477
border-radius: 15px;
14081478
color: var(--text);
1409-
z-index: 20;
1479+
z-index: 80;
14101480
}
14111481

14121482
.earth-story-card h2 {

‎docs/data/emdat_clean.csv‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7108,7 +7108,6 @@ year,iso,country,region,subregion,type,raw_type,type_detail,name,deaths,affected
71087108
2014,SLV,El Salvador,Americas,Latin America and the Caribbean,epidemic,Epidemic,Viral disease,Dengue,4.0,12783.0,0.0,,
71097109
2014,COL,Colombia,Americas,Latin America and the Caribbean,flood,Flood,Riverine flood,Unnamed Event,0.0,4085.0,0.0,,
71107110
2014,NGA,Nigeria,Africa,Sub-Saharan Africa,epidemic,Epidemic,Bacterial disease,Cholera,755.0,35996.0,0.0,,
7111-
2014,NER,Niger,Africa,Sub-Saharan Africa,animal_incident,Animal incident,Animal incident,Unnamed Event,12.0,5.0,0.0,,
71127111
2014,CPV,Cabo Verde,Africa,Sub-Saharan Africa,volcano,Volcanic activity,Lava flow,Pico do Fogo,0.0,2500.0,0.0,,
71137112
2014,NER,Niger,Africa,Sub-Saharan Africa,epidemic,Epidemic,Bacterial disease,Cholera,8.0,183.0,0.0,,
71147113
2014,MOZ,Mozambique,Africa,Sub-Saharan Africa,flood,Flood,Flash flood,Unnamed Event,5.0,300.0,0.0,,
@@ -14227,7 +14226,6 @@ year,iso,country,region,subregion,type,raw_type,type_detail,name,deaths,affected
1422714226
2013,MDG,Madagascar,Africa,Sub-Saharan Africa,storm,Storm,Tropical cyclone,Topical Depression Feleng,9.0,4598.0,0.0,,
1422814227
2013,JPN,Japan,Asia,Eastern Asia,storm,Storm,Blizzard/Winter storm,Unnamed Event,2.0,1569.0,0.0,,
1422914228
2013,BOL,Bolivia (Plurinational State of),Americas,Latin America and the Caribbean,flood,Flood,Riverine flood,Unnamed Event,25.0,145000.0,3366.0,,
14230-
2013,RUS,Russian Federation,Europe,Eastern Europe,impact,Impact,Collision,Unnamed Event,0.0,301491.0,44436.0,,
1423114229
2013,CHN,China,Asia,Eastern Asia,storm,Storm,Tropical cyclone,Tropical storm Ciramon,1.0,3000.0,340678.0,25.8633,118.14
1423214230
2013,MKD,North Macedonia,Europe,Southern Europe,flood,Flood,Riverine flood,Unnamed Event,1.0,4864.0,0.0,42.0408,21.58
1423314231
2013,CHN,China,Asia,Eastern Asia,storm,Storm,Blizzard/Winter storm,Unnamed Event,2.0,13500.0,166972.0,,

‎docs/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,9 +172,7 @@ <h2 class="filter-title" id="timePeriodTitle">Time period</h2>
172172

173173
<section class="filter-section" aria-labelledby="disasterTypesTitle">
174174
<h2 class="filter-title" id="disasterTypesTitle">Disaster types</h2>
175-
<div class="filter-chips" id="typeFilter">
176-
<button class="chip chip-action" type="button" id="unselectAllFilters">Unselect All</button>
177-
</div>
175+
<div class="filter-chips" id="typeFilter"></div>
178176
</section>
179177

180178
<div class="events-widget" aria-live="polite">

‎docs/js/data.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@ let DATA_LOAD_ERROR = null;
1717

1818
// Metadata for normalized values from the CSV `type` column.
1919
const DISASTER_TYPE_META = {
20-
drought: { label: 'Drought', color: '#F2B44D', order: 10 },
21-
earthquake: { label: 'Earthquake', color: '#8A4E24', order: 20 },
22-
extreme_temperature: { label: 'Extreme Temperature', color: '#F45FA8', order: 30 },
23-
flood: { label: 'Flood', color: '#5F9CF5', order: 40 },
24-
landslide: { label: 'Landslide', color: '#7D9D67', order: 50 },
25-
storm: { label: 'Storm', color: '#7870D8', order: 60 },
26-
epidemic: { label: 'Epidemic', color: '#70C7A8', order: 70 },
27-
infestation: { label: 'Infestation', color: '#B8C96B', order: 80 },
28-
animal_incident: { label: 'Animal Incident', color: '#66BFD2', order: 90 },
29-
volcano: { label: 'Volcano', color: '#D85745', order: 100 },
30-
wildfire: { label: 'Wildfire', color: '#F39A3C', order: 110 },
31-
impact: { label: 'Impact', color: '#C7B2FF', order: 120 }
20+
drought: { label: 'Drought', color: '#FFC857', order: 10 },
21+
earthquake: { label: 'Earthquake', color: '#C96B32', order: 20 },
22+
extreme_temperature: { label: 'Extreme Temperature', color: '#FF5DB8', order: 30 },
23+
flood: { label: 'Flood', color: '#5EA8FF', order: 40 },
24+
landslide: { label: 'Landslide', color: '#7FE36A', order: 50 },
25+
storm: { label: 'Storm', color: '#8C86FF', order: 60 },
26+
epidemic: { label: 'Epidemic', color: '#6EE7C8', order: 70 },
27+
infestation: { label: 'Infestation', color: '#D6E75B', order: 80 },
28+
animal_incident: { label: 'Animal Incident', color: '#6DD6E8', order: 90 },
29+
volcano: { label: 'Volcano', color: '#FF695B', order: 100 },
30+
wildfire: { label: 'Wildfire', color: '#FFA142', order: 110 },
31+
impact: { label: 'Impact', color: '#C7A8FF', order: 120 }
3232
};
3333

3434
const DISASTER_COLORS = Object.fromEntries(

0 commit comments

Comments
 (0)