Maps, Data, Viz, UX, Design
Published
Edited
Jun 6, 2021
Importers
2 stars
data.filter((d) => d.name.indexOf("California") !== -1)
dataTableView = data.map(
({ fips, with_broadband, without_subscription, ...d }) => ({
...d
})
)
labels = Array.from(
new Set(
data
.slice()
.sort((a, b) => a.fips - b.fips)
.map((d) => d.name)
)
)
data = {
// API response is a 2D array, with the first inner array being the variable names
const json = await d3.json(
`${endpoint}
?get=${variables.join(",")}
&for=county:${counties.join(",")}
&in=state:${states.join(",")}`
.replace(/\n/gi, "")
.replace(/ /gi, "")
);
// convert the 2D array into a flat array of objects
const transformed = json.slice(1).map((row) =>
row.reduce((acc, cur, i) => {
acc[headers[i]] = i < 6 ? +cur : cur;
return acc;
}, {})
);
// add props for fips & ratios, remove state & county
transformed.forEach((d) => {
d.fips = `${d.state}${d.county}`;
d.ratio_with =
(d.with_subscription + d.without_subscription) / d.total_households;
d.ratio_without = d.without_internet_access / d.total_households;
delete d.state;
delete d.county;
});
return transformed;
}
endpoint = `https://api.census.gov/data/${year}/acs/acs5`
counties = ["*"]
states = ["*"]
// NOTE: there are more variables available, these are ones I chose that I'm interested in.
variables = [
"B28002_001E", // total households (integer)
"B28002_002E", // total households with some form of internet subscription (integer)
"B28002_004E", // total households with a broadband subscription (integer)
"B28002_006E", // households with only a cellular data plan (integer)
"B28002_012E", // total households without an internet subscription but with internet access (integer)
"B28002_013E", // total households with no internet access (integer)
"NAME" // county, state name (string)
]
headers = [
"total_households",
"with_subscription",
"with_broadband",
"with_cellular_only",
"without_subscription",
"without_internet_access",
"name",
"state",
"county"
]
import { Inputs } from "@observablehq/inputs"
d3 = require("d3-fetch")
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.
