Skip to content

Commit 8b4c994

Browse files
miguel-heygenmiguel-heygen
committed
style: format us-map and world-map after stagger change
1 parent fe32622 commit 8b4c994

2 files changed

Lines changed: 162 additions & 183 deletions

File tree

‎registry/blocks/us-map/us-map.html‎

Lines changed: 62 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,7 @@ <h1 class="headline">Population Density by State</h1>
158158

159159
<script>
160160
(function () {
161-
const US_TOPO_URL =
162-
"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
161+
const US_TOPO_URL = "https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json";
163162

164163
const stateData = {
165164
"01": { name: "Alabama", abbr: "AL", density: 99.2 },
@@ -169,49 +168,49 @@ <h1 class="headline">Population Density by State</h1>
169168
"06": { name: "California", abbr: "CA", density: 253.9 },
170169
"08": { name: "Colorado", abbr: "CO", density: 56.5 },
171170
"09": { name: "Connecticut", abbr: "CT", density: 738.1 },
172-
"10": { name: "Delaware", abbr: "DE", density: 508.0 },
173-
"12": { name: "Florida", abbr: "FL", density: 410.5 },
174-
"13": { name: "Georgia", abbr: "GA", density: 185.6 },
175-
"15": { name: "Hawaii", abbr: "HI", density: 226.6 },
176-
"16": { name: "Idaho", abbr: "ID", density: 22.8 },
177-
"17": { name: "Illinois", abbr: "IL", density: 228.2 },
178-
"18": { name: "Indiana", abbr: "IN", density: 186.7 },
179-
"19": { name: "Iowa", abbr: "IA", density: 57.1 },
180-
"20": { name: "Kansas", abbr: "KS", density: 35.9 },
181-
"21": { name: "Kentucky", abbr: "KY", density: 113.2 },
182-
"22": { name: "Louisiana", abbr: "LA", density: 107.7 },
183-
"23": { name: "Maine", abbr: "ME", density: 43.8 },
184-
"24": { name: "Maryland", abbr: "MD", density: 636.1 },
185-
"25": { name: "Massachusetts", abbr: "MA", density: 901.2 },
186-
"26": { name: "Michigan", abbr: "MI", density: 176.4 },
187-
"27": { name: "Minnesota", abbr: "MN", density: 71.7 },
188-
"28": { name: "Mississippi", abbr: "MS", density: 63.5 },
189-
"29": { name: "Missouri", abbr: "MO", density: 89.5 },
190-
"30": { name: "Montana", abbr: "MT", density: 7.6 },
191-
"31": { name: "Nebraska", abbr: "NE", density: 25.3 },
192-
"32": { name: "Nevada", abbr: "NV", density: 28.3 },
193-
"33": { name: "New Hampshire", abbr: "NH", density: 153.2 },
194-
"34": { name: "New Jersey", abbr: "NJ", density: 1263.0 },
195-
"35": { name: "New Mexico", abbr: "NM", density: 17.4 },
196-
"36": { name: "New York", abbr: "NY", density: 415.3 },
197-
"37": { name: "North Carolina", abbr: "NC", density: 214.7 },
198-
"38": { name: "North Dakota", abbr: "ND", density: 11.3 },
199-
"39": { name: "Ohio", abbr: "OH", density: 288.8 },
200-
"40": { name: "Oklahoma", abbr: "OK", density: 57.7 },
201-
"41": { name: "Oregon", abbr: "OR", density: 43.9 },
202-
"42": { name: "Pennsylvania", abbr: "PA", density: 286.1 },
203-
"44": { name: "Rhode Island", abbr: "RI", density: 1061.4 },
204-
"45": { name: "South Carolina", abbr: "SC", density: 170.2 },
205-
"46": { name: "South Dakota", abbr: "SD", density: 12.2 },
206-
"47": { name: "Tennessee", abbr: "TN", density: 167.0 },
207-
"48": { name: "Texas", abbr: "TX", density: 112.8 },
208-
"49": { name: "Utah", abbr: "UT", density: 40.3 },
209-
"50": { name: "Vermont", abbr: "VT", density: 68.0 },
210-
"51": { name: "Virginia", abbr: "VA", density: 218.6 },
211-
"53": { name: "Washington", abbr: "WA", density: 115.9 },
212-
"54": { name: "West Virginia", abbr: "WV", density: 74.6 },
213-
"55": { name: "Wisconsin", abbr: "WI", density: 108.8 },
214-
"56": { name: "Wyoming", abbr: "WY", density: 5.8 },
171+
10: { name: "Delaware", abbr: "DE", density: 508.0 },
172+
12: { name: "Florida", abbr: "FL", density: 410.5 },
173+
13: { name: "Georgia", abbr: "GA", density: 185.6 },
174+
15: { name: "Hawaii", abbr: "HI", density: 226.6 },
175+
16: { name: "Idaho", abbr: "ID", density: 22.8 },
176+
17: { name: "Illinois", abbr: "IL", density: 228.2 },
177+
18: { name: "Indiana", abbr: "IN", density: 186.7 },
178+
19: { name: "Iowa", abbr: "IA", density: 57.1 },
179+
20: { name: "Kansas", abbr: "KS", density: 35.9 },
180+
21: { name: "Kentucky", abbr: "KY", density: 113.2 },
181+
22: { name: "Louisiana", abbr: "LA", density: 107.7 },
182+
23: { name: "Maine", abbr: "ME", density: 43.8 },
183+
24: { name: "Maryland", abbr: "MD", density: 636.1 },
184+
25: { name: "Massachusetts", abbr: "MA", density: 901.2 },
185+
26: { name: "Michigan", abbr: "MI", density: 176.4 },
186+
27: { name: "Minnesota", abbr: "MN", density: 71.7 },
187+
28: { name: "Mississippi", abbr: "MS", density: 63.5 },
188+
29: { name: "Missouri", abbr: "MO", density: 89.5 },
189+
30: { name: "Montana", abbr: "MT", density: 7.6 },
190+
31: { name: "Nebraska", abbr: "NE", density: 25.3 },
191+
32: { name: "Nevada", abbr: "NV", density: 28.3 },
192+
33: { name: "New Hampshire", abbr: "NH", density: 153.2 },
193+
34: { name: "New Jersey", abbr: "NJ", density: 1263.0 },
194+
35: { name: "New Mexico", abbr: "NM", density: 17.4 },
195+
36: { name: "New York", abbr: "NY", density: 415.3 },
196+
37: { name: "North Carolina", abbr: "NC", density: 214.7 },
197+
38: { name: "North Dakota", abbr: "ND", density: 11.3 },
198+
39: { name: "Ohio", abbr: "OH", density: 288.8 },
199+
40: { name: "Oklahoma", abbr: "OK", density: 57.7 },
200+
41: { name: "Oregon", abbr: "OR", density: 43.9 },
201+
42: { name: "Pennsylvania", abbr: "PA", density: 286.1 },
202+
44: { name: "Rhode Island", abbr: "RI", density: 1061.4 },
203+
45: { name: "South Carolina", abbr: "SC", density: 170.2 },
204+
46: { name: "South Dakota", abbr: "SD", density: 12.2 },
205+
47: { name: "Tennessee", abbr: "TN", density: 167.0 },
206+
48: { name: "Texas", abbr: "TX", density: 112.8 },
207+
49: { name: "Utah", abbr: "UT", density: 40.3 },
208+
50: { name: "Vermont", abbr: "VT", density: 68.0 },
209+
51: { name: "Virginia", abbr: "VA", density: 218.6 },
210+
53: { name: "Washington", abbr: "WA", density: 115.9 },
211+
54: { name: "West Virginia", abbr: "WV", density: 74.6 },
212+
55: { name: "Wisconsin", abbr: "WI", density: 108.8 },
213+
56: { name: "Wyoming", abbr: "WY", density: 5.8 },
215214
};
216215

217216
const maxDensity = 500;
@@ -237,9 +236,7 @@ <h1 class="headline">Population Density by State</h1>
237236
return "rgb(" + r + "," + g + "," + bl + ")";
238237
}
239238

240-
const svg = document.querySelector(
241-
'#us-map .map-svg'
242-
);
239+
const svg = document.querySelector("#us-map .map-svg");
243240
const statesGroup = svg.querySelector(".states-group");
244241
const labelsGroup = svg.querySelector(".labels-group");
245242
const tl = gsap.timeline({ paused: true });
@@ -256,10 +253,8 @@ <h1 class="headline">Population Density by State</h1>
256253
const sortedStates = states
257254
.filter((f) => stateData[String(f.id).padStart(2, "0")])
258255
.sort((a, b) => {
259-
const aData =
260-
stateData[String(a.id).padStart(2, "0")];
261-
const bData =
262-
stateData[String(b.id).padStart(2, "0")];
256+
const aData = stateData[String(a.id).padStart(2, "0")];
257+
const bData = stateData[String(b.id).padStart(2, "0")];
263258
return aData.density - bData.density;
264259
});
265260

@@ -271,10 +266,7 @@ <h1 class="headline">Population Density by State</h1>
271266
const d = path(feature);
272267
if (!d) return;
273268

274-
const el = document.createElementNS(
275-
"http://www.w3.org/2000/svg",
276-
"path"
277-
);
269+
const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
278270
el.setAttribute("d", d);
279271
el.setAttribute("class", "state-path");
280272
el.setAttribute("data-state", info.abbr);
@@ -284,10 +276,7 @@ <h1 class="headline">Population Density by State</h1>
284276

285277
const centroid = path.centroid(feature);
286278
if (centroid[0] && centroid[1]) {
287-
const label = document.createElementNS(
288-
"http://www.w3.org/2000/svg",
289-
"text"
290-
);
279+
const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
291280
label.setAttribute("x", centroid[0]);
292281
label.setAttribute("y", centroid[1]);
293282
label.setAttribute("class", "state-label");
@@ -304,23 +293,23 @@ <h1 class="headline">Population Density by State</h1>
304293
const stateLabels = labelsGroup.querySelectorAll(".state-label");
305294

306295
tl.to(
307-
'#us-map .headline',
296+
"#us-map .headline",
308297
{
309298
clipPath: "inset(0 0% 0 0)",
310299
duration: 1.0,
311300
ease: "power2.inOut",
312301
},
313-
0
302+
0,
314303
);
315304

316305
tl.to(
317-
'#us-map .subtitle',
306+
"#us-map .subtitle",
318307
{
319308
opacity: 1,
320309
duration: 0.6,
321310
ease: "power2.out",
322311
},
323-
0.4
312+
0.4,
324313
);
325314

326315
tl.to(
@@ -335,7 +324,7 @@ <h1 class="headline">Population Density by State</h1>
335324
},
336325
ease: "back.out(1.4)",
337326
},
338-
1.0
327+
1.0,
339328
);
340329

341330
tl.to(
@@ -349,35 +338,33 @@ <h1 class="headline">Population Density by State</h1>
349338
},
350339
ease: "power2.out",
351340
},
352-
3.5
341+
3.5,
353342
);
354343

355344
tl.to(
356-
'#us-map .legend',
345+
"#us-map .legend",
357346
{
358347
opacity: 1,
359348
y: 0,
360349
duration: 0.6,
361350
ease: "power2.out",
362351
},
363-
5.0
352+
5.0,
364353
);
365354

366355
tl.to(
367-
'#us-map .source',
356+
"#us-map .source",
368357
{
369358
opacity: 1,
370359
duration: 0.5,
371360
ease: "power2.out",
372361
},
373-
5.5
362+
5.5,
374363
);
375364

376365
const highlightStates = ["CA", "NY", "TX", "FL", "NJ"];
377366
highlightStates.forEach((abbr, i) => {
378-
const el = statesGroup.querySelector(
379-
"[data-state=\"" + abbr + "\"]"
380-
);
367+
const el = statesGroup.querySelector('[data-state="' + abbr + '"]');
381368
if (!el) return;
382369

383370
tl.to(
@@ -389,7 +376,7 @@ <h1 class="headline">Population Density by State</h1>
389376
duration: 0.5,
390377
ease: "power2.out",
391378
},
392-
6.5 + i * 0.8
379+
6.5 + i * 0.8,
393380
);
394381

395382
tl.to(
@@ -401,7 +388,7 @@ <h1 class="headline">Population Density by State</h1>
401388
duration: 0.5,
402389
ease: "power2.in",
403390
},
404-
7.0 + i * 0.8
391+
7.0 + i * 0.8,
405392
);
406393
});
407394

0 commit comments

Comments
 (0)