race_county_black_collar = race_county_black.filter((d) =>
new Set(["DuPage", "Kane", "Lake", "McHenry", "Will"]).has(d.CountyName)
)
race_county_raw = {
let all_years = [];
for (const year of d3.range(2010, 2021)) {
const response = await fetch(
`https://idph.illinois.gov/DPHPublicInformation/api/Statistics/getRaceBirthDemographicsByCountyYear?year=${year}&countyName=`
);
const data = await response.json();
all_years = [...all_years, ...data];
}
return all_years;
}
Plot.plot({
facet: {
data: race_county_black,
x: "CountyName",
columns: 5
},
fx: { padding: 0.25 },
y: {
grid: true,
label: "Births",
type: "log"
},
x: {
nice: true,
label: "year"
},
marks: [
Plot.frame(),
Plot.line(race_county_black, {
z: "CountyName",
x: (d) => new Date(d.Report_Year.toString()),
y: "Births",
sort: { fx: "y", reduce: "last" }
}),
Plot.text(
race_county_black,
Plot.selectFirst({
text: "CountyName",
y: 2,
dy: 18,
dx: -40,
textAnchor: "start",
fontWeight: "bold"
})
)
]
})
race_county_black = race_county_raw.filter(
(d) =>
d.Demographic === "Black" &&
d.CountyName !== "Illinois" &&
d.Report_Year > 2011 &&
black_births_in_2012.has(d.CountyName)
)
black_births_in_2012 = new Set(
race_county_raw
.filter(
(d) => d.Report_Year === 2012 && d.Demographic === "Black" && d.Births > 0
)
.map((d) => d.CountyName)
)
Plot.plot({
y: { grid: true, nice: true, label: "Births", tickFormat: ",%" },
x: {
nice: true,
label: "year"
},
marks: [
Plot.line(
relative_race.filter(
(d) =>
d.Demographic === "Black" &&
new Set([
"DuPage",
"Kane",
"Lake",
"McHenry",
"Will",
"Cook",
"Chicago"
]).has(d.CountyName) &&
d.Report_Year > 2011
),
{
z: "CountyName",
x: (d) => new Date(d.Report_Year.toString()),
y: "Births"
}
)
]
})
illinois_demos = race_county_raw.filter((d) => d.CountyName === "Illinois")
relative_race = race_county_raw.map((d) => ({
...d,
Births:
d.Births /
illinois_demos.find(
(e) => e.Report_Year === d.Report_Year && e.Demographic === d.Demographic
).Births
}))
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.
