Skip to content

Commit 3a1a098

Browse files
francelufrancelu
committed
style: relook medalled and non-medalled visus
1 parent b15fe91 commit 3a1a098

4 files changed

Lines changed: 92 additions & 83 deletions

File tree

‎website/index.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ <h2>How has gender representation evolved across Olympic sports and disciplines
8989
</div>
9090
<div class="slide" data-anchor="gender-container">
9191
<div id="gender-viz">
92-
<h2 class="gender-viz-title">Gender representation in Olympic sports</h2>
93-
<p class="gender-viz-subtitle">
92+
<h3>Gender representation in Olympic sports</h2>
93+
<h4>
9494
Hover over the disciplines to explore how men’s and women’s participation differs across sports and disciplines.
95-
</p>
95+
</h4>
9696

9797
<div id="gender-pie"></div>
9898

@@ -118,6 +118,7 @@ <h2 class="gender-viz-title">Gender representation in Olympic sports</h2>
118118
<div class="section" data-anchor="delegations">
119119
<div class="slide" data-anchor="delegations-text">
120120
<h2>Where do the medal winners come from?</h2>
121+
<h2>Who participates without reaching the podium?</h2>
121122
<div class="text-columns">
122123
<div class="text-column">
123124
<p>
@@ -141,6 +142,8 @@ <h2>Where do the medal winners come from?</h2>
141142

142143
<div class="slide" data-anchor="medal-flow">
143144
<div id="medal-viz">
145+
<h3 class="medal-viz-title"></h3>
146+
144147
<div class="medal-controls">
145148
<div>
146149
<label for="medal-season-select">Season:</label>
@@ -159,6 +162,8 @@ <h2>Where do the medal winners come from?</h2>
159162
</div>
160163
</div>
161164

165+
<h4 class="medal-viz-subtitle"></h4>
166+
162167
<div id="medal-sankey"></div>
163168

164169
<div class="medal-timeline">
@@ -170,7 +175,8 @@ <h2>Where do the medal winners come from?</h2>
170175
</div>
171176

172177
<div class="slide" data-anchor="never-medaled">
173-
<h2>Who participates without reaching the podium?</h2>
178+
<h3 class="never-medaled-viz-title"></h3>
179+
174180
<div id="never-medaled-viz"></div>
175181

176182
<div class="medal-timeline never-timeline">

‎website/js/delegations.js‎

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -823,36 +823,23 @@
823823
root.selectAll("*").remove();
824824

825825
const width = 1280;
826-
const height = 520;
827-
const margin = { top: 75, right: 40, bottom: 20, left: 40 };
826+
const height = 445;
827+
const margin = { top: 20, right: 40, bottom: 20, left: 40 };
828828

829829
const svg = root
830830
.append("svg")
831831
.attr("viewBox", `0 0 ${width} ${height}`)
832832
.attr("class", "medal-sankey-svg");
833833

834-
svg.append("text")
835-
.attr("x", width / 2)
836-
.attr("y", 32)
837-
.attr("text-anchor", "middle")
838-
.attr("fill", "white")
839-
.attr("font-family", "'Elms Sans', sans-serif")
840-
.attr("font-size", 24)
841-
.attr("font-weight", 700)
842-
.text(`Distribution of medals in ${graph.season} Olympics`);
834+
d3.select(selectors.root).select(".medal-viz-title").text(
835+
`Distribution of medals in ${graph.season} Olympics`
836+
);
843837

844-
svg.append("text")
845-
.attr("x", width / 2)
846-
.attr("y", 58)
847-
.attr("text-anchor", "middle")
848-
.attr("fill", "rgba(255,255,255,0.75)")
849-
.attr("font-family", "'Elms Sans', sans-serif")
850-
.attr("font-size", 14)
851-
.text(
852-
graph.mode === "country"
853-
? `Flows show top medal-winning countries + other countries → medal type → top 10 sports · ${graph.medalCount} medals shown`
854-
: `Flows show continents → medal type → top 10 sports · ${graph.medalCount} medals shown`
855-
);
838+
d3.select(selectors.root).select(".medal-viz-subtitle").text(
839+
graph.mode === "country"
840+
? `Top medal-winning countries + others → medal type → top 10 sports · ${graph.medalCount} medals shown`
841+
: `Continents → medal type → top 10 sports · ${graph.medalCount} medals shown`
842+
);
856843

857844
if (!graph.links.length) {
858845
svg.append("text")

‎website/js/never-medaled.js‎

Lines changed: 53 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@
322322
justify-content: center;
323323
gap: 28px;
324324
align-items: center;
325-
margin: 0 auto 8px;
325+
margin: 0 auto;
326326
}
327327
328328
.never-controls label {
@@ -347,8 +347,7 @@
347347
348348
.never-layout {
349349
display: grid;
350-
grid-template-columns: 1.08fr 0.92fr;
351-
gap: 24px;
350+
grid-template-columns: 1.2fr 0.8fr;
352351
align-items: start;
353352
margin-top: 50px;
354353
}
@@ -366,13 +365,6 @@
366365
background: transparent;
367366
}
368367
369-
.never-panel-title {
370-
font-family: Arial, sans-serif;
371-
font-size: 16px;
372-
font-weight: 800;
373-
fill: white;
374-
}
375-
376368
.never-medaled-tooltip {
377369
position: absolute;
378370
pointer-events: none;
@@ -382,7 +374,7 @@
382374
border: 1px solid rgba(255, 255, 255, 0.18);
383375
border-radius: 10px;
384376
padding: 10px 12px;
385-
font-family: Arial, sans-serif;
377+
font-family: "Elms Sans", sans-serif;
386378
font-size: 14px;
387379
line-height: 1.35;
388380
max-width: 330px;
@@ -771,25 +763,21 @@
771763
}
772764

773765
function drawMap(container, data) {
774-
const width = 760;
775-
const height = 420;
766+
const width = 800;
767+
const height = 520;
776768

777769
const svg = container.append("svg")
778770
.attr("viewBox", `0 0 ${width} ${height}`)
779771
.attr("class", "never-map-svg");
780772

781773
const projection = d3.geoNaturalEarth1()
782-
.fitExtent([[10, 28], [width - 10, height - 10]], state.worldGeo);
774+
.fitExtent([[20, 20], [width - 10, height - 10]], state.worldGeo);
783775

784776
const path = d3.geoPath().projection(projection);
785777

786-
svg.append("text")
787-
.attr("x", width / 2)
788-
.attr("y", 20)
789-
.attr("text-anchor", "middle")
790-
.attr("class", "never-panel-title")
791-
.attr("font-family", "'Elms Sans', sans-serif")
792-
.text("Countries that have participated without ever winning a medal");
778+
d3.select(".never-medaled-viz-title").text(
779+
`Countries that have participated without ever winning a medal`
780+
);
793781

794782
const byCountry = new Map(
795783
data.neverMedaled.map(d => [normalizeCountryName(d.country), d])
@@ -816,7 +804,7 @@
816804
})
817805
.attr("stroke-width", d => {
818806
const country = normalizeCountryName(d.properties.name);
819-
return byCountry.has(country) ? 0.95 : 0.45;
807+
return byCountry.has(country) ? 1.6 : 0.6;
820808
})
821809
.attr("opacity", d => {
822810
const country = normalizeCountryName(d.properties.name);
@@ -866,6 +854,35 @@
866854

867855
tooltip.style("opacity", 0);
868856
});
857+
858+
const legendData = Object.entries(continentColors);
859+
const legendY = height - 8;
860+
const legendItemWidth = width / legendData.length;
861+
862+
const legend = svg.append("g")
863+
.attr("transform", `translate(0, ${legendY})`);
864+
865+
legendData.forEach(([continent, color], i) => {
866+
const x = i * legendItemWidth + legendItemWidth / 2;
867+
868+
legend.append("rect")
869+
.attr("x", x - 28)
870+
.attr("y", -10)
871+
.attr("width", 12)
872+
.attr("height", 12)
873+
.attr("rx", 2)
874+
.attr("fill", color);
875+
876+
legend.append("text")
877+
.attr("x", x - 10)
878+
.attr("y", 0)
879+
.attr("dy", "0.1em")
880+
.attr("fill", "white")
881+
.attr("font-family", "'Elms Sans', sans-serif")
882+
.attr("font-size", 16)
883+
.attr("font-weight", 600)
884+
.text(continent);
885+
});
869886
}
870887

871888
function drawBarChart(container, data, mode) {
@@ -893,7 +910,10 @@
893910
.attr("x", width / 2)
894911
.attr("y", 22)
895912
.attr("text-anchor", "middle")
896-
.attr("class", "never-panel-title")
913+
.attr("font-family", "Elms Sans, sans-serif")
914+
.attr("font-size", 16)
915+
.attr("font-weight", 700)
916+
.attr("fill", "white")
897917
.text(mode === "continent"
898918
? "Participations without a medal by continent"
899919
: "Most participations without a medal");
@@ -917,8 +937,8 @@
917937
.attr("dy", "0.35em")
918938
.attr("text-anchor", "end")
919939
.attr("fill", "white")
920-
.attr("font-family", "Arial, sans-serif")
921-
.attr("font-size", mode === "continent" ? 15 : 12)
940+
.attr("font-family", "Elms Sans, sans-serif")
941+
.attr("font-size", 14)
922942
.attr("font-weight", 700)
923943
.text(d => shortenLabel(d.name, mode === "continent" ? 18 : 20));
924944

@@ -967,8 +987,8 @@
967987
.attr("y", d => y(d.name) + y.bandwidth() / 2)
968988
.attr("dy", "0.35em")
969989
.attr("fill", "white")
970-
.attr("font-family", "Arial, sans-serif")
971-
.attr("font-size", mode === "continent" ? 12 : 10)
990+
.attr("font-family", "Elms Sans, sans-serif")
991+
.attr("font-size", 12)
972992
.attr("font-weight", 700)
973993
.text(d => {
974994
if (mode === "continent") {
@@ -989,16 +1009,18 @@
9891009
.call(g => g.selectAll("line").attr("stroke", "rgba(255,255,255,0.35)"))
9901010
.call(g => g.selectAll("text")
9911011
.attr("fill", "rgba(255,255,255,0.75)")
992-
.attr("font-family", "Arial, sans-serif")
993-
.attr("font-size", 11));
1012+
.attr("font-family", "Elms Sans, sans-serif")
1013+
.attr("font-size", 14))
1014+
.attr("font-weight", 700);
9941015

9951016
svg.append("text")
9961017
.attr("x", (margin.left + width - margin.right) / 2)
9971018
.attr("y", height - 8)
9981019
.attr("text-anchor", "middle")
9991020
.attr("fill", "rgba(255,255,255,0.72)")
1000-
.attr("font-family", "Arial, sans-serif")
1001-
.attr("font-size", 11)
1021+
.attr("font-family", "Elms Sans, sans-serif")
1022+
.attr("font-size", 14)
1023+
.attr("font-weight", 700)
10021024
.text("Athlete participations");
10031025
}
10041026

‎website/styles.css‎

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -91,13 +91,14 @@ body {
9191
=========================================== */
9292

9393
body,
94-
h1,
9594
h2,
9695
p {
9796
color: white;
9897
line-height: 1.15;
9998
}
10099

100+
h3,
101+
h4,
101102
body,
102103
p,
103104
button,
@@ -112,16 +113,11 @@ p {
112113
font-size: 24px;
113114
}
114115

115-
h1,
116116
h2 {
117117
font-family: "Carter One", sans-serif;
118118
text-align: center;
119119
}
120120

121-
h1 {
122-
font-size: 60px;
123-
}
124-
125121
h2 {
126122
font-size: 40px;
127123
padding-bottom: 32px;
@@ -136,6 +132,23 @@ p {
136132
width: 60%;
137133
}
138134

135+
h3 {
136+
font-size: 30px;
137+
font-weight: 700;
138+
width: 70%;
139+
padding-bottom: 6px;
140+
margin: 0 auto;
141+
}
142+
143+
h4 {
144+
font-size: 16px;
145+
font-weight: 400;
146+
width: 70%;
147+
margin: 0 auto;
148+
text-align: center;
149+
line-height: 1.25;
150+
}
151+
139152
/* =============================================
140153
Title section
141154
=========================================== */
@@ -382,25 +395,6 @@ p {
382395
padding: 20px;
383396
}
384397

385-
.gender-viz-title {
386-
font-family: "Elms Sans", sans-serif;
387-
font-size: 28px;
388-
font-weight: 700;
389-
width: 100%;
390-
padding-bottom: 6px;
391-
margin: 0 auto;
392-
}
393-
394-
.gender-viz-subtitle {
395-
font-family: "Elms Sans", sans-serif;
396-
width: 70%;
397-
margin: 0 auto 10px;
398-
text-align: center;
399-
font-size: 16px;
400-
line-height: 1.25;
401-
color: rgba(255,255,255,0.75);
402-
}
403-
404398
/* =============================================
405399
Delegations section
406400
=========================================== */

0 commit comments

Comments
 (0)