I'm a professor of mathematics at the University of North Carolina Asheville. I've also done a fair amount of consulting work over the years focusing on scientific and data visualization.
I'm happy to be part of the first Observable Ambassador's cohort.
Public
Edited
Aug 30, 2023
Paused
1 fork
3 stars
variables = (
await (
await fetch("https://api.census.gov/data/2021/acs/acs5/variables.json")
).json()
).variables
concepts = d3
.sort(
d3.filter(_.uniq(Object.values(variables).map((o) => o.concept)), (s) => s),
(s) => s.length
)
.slice(0, -1)
var_info = {
if (concept_table.length == 1) {
return Object.entries(variables)
.filter((a) => a[1].concept == concept_table[0].concept)
.map(([v, o]) => Object.assign(o, { var: v }));
}
}
selected_vars = var_info ? var_info.map((o) => o.var).join(",") : ""
results = selected_vars
? await (
await fetch(
`https://api.census.gov/data/2021/acs/acs5?get=NAME,${selected_vars}&for=county:*&in=state:*`
)
).json()
: md``
// results = selected_vars
// ? await (
// await fetch(
// `https://api.census.gov/data/2021/acs/acs5?get=NAME,${selected_vars}&for=block%20group:*&in=state:37&in=county:021`
// )
// ).json()
// : md``
query_data = {
let columns = results[0];
return results.slice(1).map(function (a) {
return Object.fromEntries(d3.zip(columns, a));
});
}
state_populations = {
// The API call itself as discussed above.
let results = await (
await fetch(
"https://api.census.gov/data/2021/acs/acs5?get=NAME,B01003_001E&for=state"
)
).json();
// Manipulate the results into proper JSON
let columns = results[0];
results = results.slice(1).map(function (a) {
return Object.fromEntries(d3.zip(columns, a));
});
// Return the result as a Javascript Map object to easily access the
// popoulation count from the state FIPS code.
return d3.rollup(
results,
(a) => parseInt(a[0].B01003_001E),
(o) => o.state
);
}
Plot.geo(states, {
fill: (d) => state_populations.get(d.properties.STATEFP),
title: (d) =>
`${d.properties.NAME}: ${d3.format(",")(
state_populations.get(d.properties.STATEFP)
)}`,
stroke: "black"
}).plot({
projection: "albers-usa",
color: {
type: "quantile",
n: 8,
scheme: "blues",
legend: true,
tickFormat: (n) => `${Math.round(n / 10 ** 6)}M`
}
})
// The geographic data file for the map
states = {
let states = await FileAttachment("states.json").json();
states = topojson.feature(states, states.objects.states);
return states;
}
sex_by_age_info = {
let sex_by_age_info = await FileAttachment("sex_by_age.csv").csv();
// Supplement the data with an age_base
sex_by_age_info.forEach(function (o) {
let label_components = o.label.split("!!");
let sex = label_components[2];
if (sex) {
o.sex = sex.slice(0, -1);
}
let age_base = label_components[3];
if (age_base) {
age_base = age_base.slice(0, -6);
if (age_base == "Under 5") {
age_base = 0;
} else if (age_base) {
age_base = 5 * Math.floor(parseInt(age_base.split(" ")[0]) / 5);
}
o.age_base = age_base;
}
});
return sex_by_age_info;
}
sex_by_age_results = fetch(
`https://api.census.gov/data/2021/acs/acs5?for=us&get=NAME,${sex_by_age_info
.map((o) => o.var)
.join()}`
).then((r) => r.json())
values = new Map(d3.zip(...sex_by_age_results).slice(1, -1))
pop_by_age_sex = {
let data = d3.rollup(
sex_by_age_info,
(a) => ({
sex: a[0].sex,
age_range: `${a[0].age_base}-${
a[0].age_base == 85 ? "" : a[0].age_base + 4
}`,
value: d3.sum(a.map((o) => parseInt(values.get(o.var))))
}),
(o) => o.sex,
(o) => o.age_base
);
return Array.from(data.values())
.map((d) => Array.from(d.values()))
.flat()
.filter((o) => !o.age_range.match("undefined"));
}
tippy_style
import { make_map, tippy_style } from "2cd910776a0daf15"
import { Swatches } from "@d3/color-legend"
selected_vars
? `https://api.census.gov/data/2021/acs/acs5?get=NAME,${selected_vars}&for=block%20group:*&in=state:37%20county:021`
: md``
my_variables = "B03003_001E,B03003_002E,B03003_003E"
await (
await fetch(
`https://api.census.gov/data/2021/acs/acs5?get=NAME,${my_variables}&for=block%20group:*&in=state:37%20county:021`
)
).json()
all_variables = (
await (
await fetch("https://api.census.gov/data/2021/acs/acs5/variables.json")
).json()
).variables
my_variables.split(",").map((k) => all_variables[k])
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.
