Skip to content

Commit 901c692

Browse files
nourguermazinourguermazi
committed
last fixes
1 parent 59c3278 commit 901c692

17 files changed

Lines changed: 296 additions & 249 deletions

‎website/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>DArts — Diversity in the MoMA Collection</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap" rel="stylesheet">
710
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎨</text></svg>">
811
</head>
912
<body>

‎website/src/global.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
html {
1111
scroll-behavior: smooth;
12-
font-size: 16px;
12+
font-size: 22px;
1313
}
1414

1515
body {

‎website/src/lib/charts/Globe.svelte‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { interpolate } from 'd3-interpolate';
55
import { feature } from 'topojson-client';
66
import { worldAtlasIdToIso3 } from '../data/worldIso3.js';
7-
import { filters, setSelectedCountry } from '../stores/filters.js';
7+
import { filters, setSelectedCountry, clearSelectedCountry } from '../stores/filters.js';
88
import {
99
closestRotationStart,
1010
easeInOutCubic,
@@ -17,7 +17,7 @@
1717
} from '../utils/globeMotion.js';
1818
import './globe.css';
1919
20-
let { countryByDecade = [], step = 0, active = false } = $props();
20+
let { countryByDecade = [], step = 0, active = false, highlightTopThree = false } = $props();
2121
2222
const width = 760;
2323
const height = 760;
@@ -47,7 +47,7 @@
4747
let path = $derived(geoPath(projection));
4848
let graticulePath = $derived(path(geoGraticule10()));
4949
let range = $derived($filters.decadeRange);
50-
let selectedCountry = $derived($filters.selectedCountry);
50+
let selectedCountry = $derived(active ? $filters.selectedCountry : null);
5151
let countByIso = $derived(buildIsoCounts(countryByDecade, range));
5252
let maxCount = $derived(Math.max(1, ...Object.values(countByIso)));
5353
@@ -177,6 +177,10 @@
177177
}
178178
});
179179
180+
$effect(() => {
181+
if (!active) clearSelectedCountry();
182+
});
183+
180184
$effect(() => {
181185
if (active && step === 2 && lastFocusedStep !== 2 && !selectedCountry) focusTopThreeCountries();
182186
lastFocusedStep = step;
@@ -225,7 +229,7 @@
225229
d={path(country)}
226230
data-country-index={index}
227231
data-iso3={iso3}
228-
fill={globeFillFor(iso3, countByIso[iso3] || 0, maxCount, step)}
232+
fill={globeFillFor(iso3, countByIso[iso3] || 0, maxCount, step, highlightTopThree)}
229233
class:selected={selectedCountry === iso3}
230234
class:clickable={Boolean(iso3 && countByIso[iso3])}
231235
onpointermove={(event) => showTooltip(event, country)}

‎website/src/lib/charts/LineChart.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
99
const width = 760;
1010
const height = 420;
11-
const margin = { top: 24, right: 32, bottom: 48, left: 56 };
11+
const margin = { top: 24, right: 32, bottom: 70, left: 78 };
1212
const innerWidth = width - margin.left - margin.right;
1313
const innerHeight = height - margin.top - margin.bottom;
1414
const decades = Array.from({ length: 17 }, (_, i) => 1860 + i * 10);
@@ -84,10 +84,10 @@
8484
/>
8585
{/each}
8686
{#each decades.filter((d) => d % 20 === 0) as decade}
87-
<text class="x-label" x={x(decade)} y={innerHeight + 30}>{decade}</text>
87+
<text class="x-label" x={x(decade)} y={innerHeight + 38}>{decade}</text>
8888
{/each}
89-
<text class="axis-title y" x={-innerHeight / 2} y="-42">female-credited share</text>
90-
<text class="axis-title x" x={innerWidth / 2} y={innerHeight + 46}>artwork decade</text>
89+
<text class="axis-title y" x={-innerHeight / 2} y="-59">female-credited share</text>
90+
<text class="axis-title x" x={innerWidth / 2} y={innerHeight + 62}>artwork decade</text>
9191
</g>
9292
</svg>
9393
<table class="sr-only">

‎website/src/lib/charts/globe.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@
4242
cursor: pointer;
4343
}
4444

45+
.globe-figure path:focus-visible {
46+
outline: none;
47+
}
48+
4549
.globe-figure path.clickable:hover,
4650
.globe-figure path.selected {
4751
stroke: var(--fg-on-dark-strong);

‎website/src/lib/components/DecadeSlider.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
<span>Decade range</span>
8686
<strong>{minDecade}-{maxDecade}</strong>
8787
</div>
88+
<span class="sparkline-label">credited works per decade</span>
8889
<div class="sparkline" aria-hidden="true">
8990
{#each decades as decade}
9091
<span

‎website/src/lib/components/Legend.svelte‎

Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,27 @@
66
export let maxLabel = '';
77
export let caption = '';
88
export let dark = false;
9+
export let noDataLabel = '';
910
</script>
1011

1112
<div class="legend" class:dark aria-label={caption || 'Chart legend'}>
1213
{#if mode === 'sequential'}
13-
<div class="ramp" aria-hidden="true"></div>
14-
<div class="ramp-labels">
15-
<span>{minLabel}</span>
16-
{#if midLabel}<span>{midLabel}</span>{/if}
17-
<span>{maxLabel}</span>
14+
<div class="ramp-row">
15+
{#if noDataLabel}
16+
<div class="no-data-block">
17+
<div class="no-data-swatch" aria-hidden="true"></div>
18+
<span class="no-data-label">{noDataLabel}</span>
19+
</div>
20+
<div class="ramp-divider" aria-hidden="true"></div>
21+
{/if}
22+
<div class="ramp-group">
23+
<div class="ramp" style={noDataLabel ? 'background: linear-gradient(90deg, var(--seq-1), var(--seq-2), var(--seq-3), var(--seq-4))' : undefined} aria-hidden="true"></div>
24+
<div class="ramp-labels">
25+
<span>{minLabel}</span>
26+
{#if midLabel}<span>{midLabel}</span>{/if}
27+
<span>{maxLabel}</span>
28+
</div>
29+
</div>
1830
</div>
1931
{:else}
2032
<div class="chips">
@@ -43,16 +55,57 @@
4355
color: var(--fg-on-dark-mute);
4456
}
4557
58+
.ramp-row {
59+
display: flex;
60+
align-items: flex-start;
61+
gap: 0.5rem;
62+
width: min(22rem, 100%);
63+
}
64+
65+
.no-data-block {
66+
display: flex;
67+
flex-direction: column;
68+
align-items: center;
69+
gap: 0.25rem;
70+
flex-shrink: 0;
71+
}
72+
73+
.no-data-swatch {
74+
width: 1.5rem;
75+
height: 0.75rem;
76+
background: var(--seq-0);
77+
border: 1px solid currentColor;
78+
}
79+
80+
.no-data-label {
81+
font-size: 0.625rem;
82+
text-align: center;
83+
white-space: nowrap;
84+
}
85+
86+
.ramp-divider {
87+
width: 1px;
88+
height: 0.75rem;
89+
background: currentColor;
90+
opacity: 0.3;
91+
flex-shrink: 0;
92+
}
93+
94+
.ramp-group {
95+
flex: 1;
96+
min-width: 0;
97+
}
98+
4699
.ramp {
47-
width: min(18rem, 100%);
100+
width: 100%;
48101
height: 0.75rem;
49102
background: linear-gradient(90deg, var(--seq-0), var(--seq-1), var(--seq-2), var(--seq-3), var(--seq-4));
50103
}
51104
52105
.ramp-labels {
53106
display: flex;
54107
justify-content: space-between;
55-
width: min(18rem, 100%);
108+
width: 100%;
56109
margin-top: 0.25rem;
57110
font-family: var(--font-mono);
58111
font-size: var(--type-small-size);

‎website/src/lib/components/decadeSlider.css‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
--slider-muted: var(--fg-on-light-mute);
44
--slider-track: var(--rule-on-light);
55
--slider-spark: color-mix(in srgb, var(--fg-on-light-mute) 30%, transparent);
6-
--slider-spark-selected: color-mix(in srgb, var(--accent-primary) 72%, var(--seq-1));
6+
--slider-spark-selected: var(--accent-primary);
77
--slider-thumb-bg: var(--bg-paper);
88
--slider-label-bg: var(--bg-paper);
99

@@ -18,7 +18,7 @@
1818
--slider-muted: var(--fg-on-dark-mute);
1919
--slider-track: color-mix(in srgb, var(--fg-on-dark-mute) 30%, transparent);
2020
--slider-spark: color-mix(in srgb, var(--seq-1) 22%, transparent);
21-
--slider-spark-selected: color-mix(in srgb, var(--accent-primary) 76%, var(--seq-2));
21+
--slider-spark-selected: color-mix(in srgb, var(--accent-primary) 76%, transparent);
2222
--slider-thumb-bg: var(--bg-dark);
2323
--slider-label-bg: color-mix(in srgb, var(--bg-dark) 92%, var(--accent-primary));
2424
}
@@ -39,11 +39,21 @@
3939

4040
.decade-slider .slider-header strong {
4141
color: var(--slider-strong);
42-
font-family: var(--font-mono);
42+
font-family: var(--font-ui);
4343
font-size: var(--type-small-size);
4444
font-variant-numeric: tabular-nums;
4545
}
4646

47+
.decade-slider .sparkline-label {
48+
display: block;
49+
margin-bottom: 0.25rem;
50+
color: var(--slider-muted);
51+
font-family: var(--font-ui);
52+
font-size: var(--type-small-size);
53+
letter-spacing: 0.06em;
54+
text-transform: uppercase;
55+
}
56+
4757
.decade-slider .sparkline {
4858
position: relative;
4959
display: flex;
@@ -107,7 +117,7 @@
107117
left: 50%;
108118
translate: -50% 0;
109119
color: var(--slider-muted);
110-
font-family: var(--font-mono);
120+
font-family: var(--font-ui);
111121
font-size: 0.6875rem;
112122
font-variant-numeric: tabular-nums;
113123
}
@@ -140,7 +150,7 @@
140150
padding: 0.0625rem 0.25rem;
141151
color: var(--slider-strong);
142152
background: var(--slider-label-bg);
143-
font-family: var(--font-mono);
153+
font-family: var(--font-ui);
144154
font-size: var(--type-small-size);
145155
font-variant-numeric: tabular-nums;
146156
}

‎website/src/lib/design/tokens.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313
--rule-on-light: #c7c1b5;
1414

1515
/* Accent */
16-
--accent-primary: #d94f2a;
16+
--accent-primary: #b91c1c;
1717
--accent-secondary: #2e5bff;
1818

1919
/* Gender encoding */
20-
--gender-female: #d94f2a;
20+
--gender-female: #e02020;
2121
--gender-male: #5c6573;
2222
--gender-nonbinary: #6e4fb8;
2323
--gender-unknown: #b9b3a6;
@@ -37,7 +37,7 @@
3737
--region-wcasia: #56b4e9;
3838
--region-easia: #d55e00;
3939
--region-ssasia: #f0e442;
40-
--region-oceania: #999999;
40+
--region-oceania: #5b2d8e;
4141

4242
/* Type scale */
4343
--type-display-size: 4.5rem;
@@ -56,7 +56,7 @@
5656
--type-mono-line: 1.4;
5757

5858
/* Font families */
59-
--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
59+
--font-display: 'Oswald', 'Inter', system-ui, sans-serif;
6060
--font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
6161
--font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
6262
--font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
@@ -91,7 +91,7 @@
9191
--color-surface-alt: #ede6db;
9292
--color-border: var(--rule-on-light);
9393
--color-primary: var(--accent-primary);
94-
--color-primary-light: #e77a5f;
94+
--color-primary-light: #e86060;
9595
--color-secondary: var(--accent-secondary);
9696
--color-accent: var(--seq-3);
9797
--color-text: var(--fg-on-light-strong);

‎website/src/lib/scenes/Scene1Mediums.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
display: grid;
125125
grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
126126
gap: var(--space-6);
127-
width: min(var(--max-content), calc(100% - var(--space-4)));
127+
width: min(var(--max-content), calc(100% - var(--space-2)));
128128
margin: 0 auto;
129129
padding: var(--space-10) 0;
130130
}

0 commit comments

Comments
 (0)