archive = zip?.zip() ?? FileAttachment("names-2021.zip").zip()
totals = byYear.map(([year, names]) => ({
year,
total: d3.sum(names, (d) => d.count),
m: d3.sum(names, (d) => (d.sex === "M" ? d.count : 0)),
f: d3.sum(names, (d) => (d.sex === "F" ? d.count : 0))
}))
picked = byName.find((n) => n.name.toLowerCase() === name.toLowerCase()) ?? {
name,
all: [],
M: [],
F: []
}
Plot.plot({
marks: [
Plot.areaY(totals, {
x: "year",
y: "total",
fill: "#0005",
curve: "catmull-rom"
}),
Plot.lineY(totals, {
x: "year",
y: "m",
stroke: "skyblue",
curve: "catmull-rom"
}),
Plot.lineY(totals, {
x: "year",
y: "f",
stroke: "pink",
curve: "catmull-rom"
}),
Plot.ruleY([0]),
...disclaimer(4e6)
],
x: {
label: "",
domain: years,
tickFormat: String,
tickFormat: (d) => (d % 10 === 0 ? +d : ""),
ticks: (years[1] - years[0]) / 2,
tickRotate: 45,
grid: true
},
y: { tickFormat: "s", grid: true }
})
Plot.plot({
marks: [
...disclaimer(1.3),
Plot.ruleY([1]),
Plot.lineY(totals, {
x: "year",
y: (d) => d.m / d.f,
stroke: "orange",
curve: "catmull-rom"
})
],
x: {
domain: years,
tickFormat: String
},
y: {
type: "log",
tickFormat: "",
ticks: 20,
domain: [0.4, 1 / 0.4],
label: "M : F"
}
})
disclaimer = (y, peakYear) => [
Plot.ruleX([1937], { stroke: "#ccc", strokeDasharray: [6, 9] }),
Plot.text(
[{ text: "People born before 1937 may\nnot have registered with the SSA" }],
{
x: peakYear < 1937 ? 1937.5 : 1936.5,
y,
text: "text",
frameAnchor: peakYear < 1937 ? "left" : "right",
fill: "#999",
fontWeight: 500
}
)
]
ratios = byName.map(({ name, F = [], M = [] }) => [
name,
d3.sum(M, (d) => d.count) / d3.sum(F, (d) => d.count),
d3.sum(F, (d) => d.count) + d3.sum(M, (d) => d.count)
])
d3.sort(
ratios.filter((d) => d[2] > 10000),
(d) => Math.abs(1 - d[1])
)
popularNames = d3.sort(byName, (n) => -d3.sum(n.all, (y) => y.count))
filled = {
const name = picked.name;
const byYear = d3.group(
picked.all ?? [],
(d) => d.year,
(d) => d.sex
);
const interval = 3;
const get = (year, sex) =>
d3.sum(
d3.range(year, year + interval),
(y) => byYear.get(y)?.get(sex)?.[0].count ?? 0
);
return d3.range(...years, interval).flatMap((year) => [
{
name,
year,
sex: "M",
count: get(year, "M")
},
{
name,
year,
sex: "F",
count: get(year, "F")
}
]);
}
years = d3.extent(byYear, (d) => d[0])
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
