-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (192 loc) · 7.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Baby Jo</title>
<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<style>
body {
margin: 0;
font-size: 20px;
font-family: Georgia, 'Times New Roman', Times, serif;
text-rendering: optimizeLegibility;
}
.content {
max-width: 640px;
margin: auto;
}
.header {
padding: 2.5em 0;
}
a {
color: #f05349;
}
.footer {
background: #f4f4f4;
text-align: center;
font-size: 0.8em;
margin-top: 4em;
padding: 4em 0;
}
figure {
margin: 0;
padding-bottom: 1.4em;
}
figcaption {
font-size: 0.6em;
text-align: center;
margin-top: 0.5em;
color: #666;
}
h1 {
font-family: 'Lora', Georgia, serif;
font-weight: bold;
font-size: 3em;
line-height: 1.1;
}
.subhead {
font-family: 'Lora', Georgia, serif;
}
h3 {
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
iframe,
img,
video {
max-width: 100%;
}
p {
line-height: 1.6;
margin: 0;
padding-bottom: 1.2em;
}
ul {
margin: 0;
padding-bottom: 1em;
line-height: 1.6;
}
iframe {
padding-bottom: 1.2em;
}
code {
font-family: 'Courier New', monospace;
background: #fffbaf;
font-size: 0.85em;
}
.full-width figure {
text-align: center;
}
.text-with-image {
position: relative;
}
.image-right {
position: absolute;
top: 50%;
right: -250px;
transform: translateY(-50%);
}
.image-left {
position: absolute;
top: 100%;
left: -275px;
transform: translateY(-50%);
}
/* margin on mobile */
@media (max-width: 640px) {
body {
font-size: 18px;
}
.content {
padding-left: 0.5em;
padding-right: 0.5em;
}
}
</style>
</head>
<body>
<div class="content">
<div class="header">
<h1>Getting to know Jo</h1>
<subhead>Although two-letter names are often abbreviations, some have risen on their own
and even eclipsed their original version. This is the case of Jo, the most common two-letter
name in the US for over a century.</subhead>
</div>
<div class="byline">
<p>By <a href="mailto:ana.mpadros@gmail.com">Ana Muñoz</a></p>
</div>
<p>My mother chose my name because it was the shortest one she could find in our language. Interestingly, there
are even shorter names than mine, according to
the <a href="https://www.ssa.gov/oact/babynames/limits.html">US Social Security database</a>.
Naturally, I became curious about those with just two letters and why parents chose such brief names.</p>
<div class="text-with-image">
<p>Looking at the data collected since 1880, if you come from the US and have a two-letter name, chances are your name is Jo and that you were born
in 1954. A record number of Jos were born that year—8,077, to be exact.</p>
<img src="baby_wow.png" alt="A vintage baby saying 'wow'" class="image-left"></img>
</div>
<h3>Which two-letter names are the most popular?</h3>
<div class="full-width">
<figure>
<img
src="names_hierarchy.svg" alt="A treemap showing the proportion of two-letter names">
<figcaption>Source: <a href="https://www.ssa.gov/oact/babynames/limits.html">US Social Security database</a>.
Chart: Ana Muñoz with <a href="https://www.rawgraphs.io/">RAWGraphs</a>.
</figcaption>
</figure>
</div>
<p>It's also likely that you were assigned female at birth.
Given the current <a href="https://www.cdc.gov/nchs/pressroom/nchs_press_releases/2022/20220831.htm">life
expectancy of 76 years</a>, the ratio of female Jos to male Jos is quite pronounced.</p>
<figure>
<img
src="babies10.png" alt="Nine baby girls and one baby boy representing Jo">
<figcaption>Source: <a href="https://www.ssa.gov/oact/babynames/limits.html">US Social Security database</a>.
Design: Ana Muñoz.</figcaption>
</figure>
<p>Many two-letter names, like Jo, started as abbreviations of longer names. But what happened to those original,
longer versions? Is there a correlation between Jo's golden era and the rise or decline of its antecedents?</p>
<h3>When Jo was popular, Josephine was not... but Jo and Joanne peaked together</h3>
</div>
<div class="full-width">
<figure>
<img
src="josephine and joanne.svg" alt="Two line charts comparing the popularity of Jo, Josephine and Joanne">
<figcaption>Source: <a href="https://www.ssa.gov/oact/babynames/limits.html">US Social Security database</a>.
Charts: Ana Muñoz with <a href="https://www.rawgraphs.io/">RAWGraphs</a>.</figcaption>
</figure>
</div>
<div class="content">
<p>Jo was quite popular between 1940 and 1960. By 1980, she had almost faded into oblivion,
while Josephine was about to make her comeback.
</p>
<p> Although Joanne was never as picked as Jo, she was around during the same period.
Other “Jo-“ names too. The only exception was Joan, who surpassed Jo at its peak.</p>
<h3>Joan was always more popular than Jo, but they were both trendy during the same years</h3>
<figure>
<img
src="joan.svg" alt="A line chart comparing Jo and Joan">
<figcaption>Source: <a href="https://www.ssa.gov/oact/babynames/limits.html">US Social Security database</a>.
Chart: Ana Muñoz with <a href="https://www.rawgraphs.io/">RAWGraphs.</a></figcaption>
</figure>
</div>
</div>
<div class="content">
<p>Joan might provide insights into these trends and their correlations. And not any Joan,
<a href="https://en.wikipedia.org/wiki/Joan_Crawford">this Joan</a>. Is it a coincidence that 1954,
the year when thousands named their baby girls Jo, was also the year Jo(hnny Guitar), starring Jo(an Crawford),
<a href="https://www.imdb.com/title/tt0047136/?ref_=tt_urv">was released?</a></p>
</div>
<div class="footer">
<div class="content">
<p>You can find the code for this template <a href="https://github.com/jsoma/page-templates/">here</a>.
</p>
</div>
</div>
</body>
</html>