Published
Edited
Oct 12, 2022
4 forks
Importers
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// The map data comes from the US Census Bureau:
// https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html
// That data was simplified a bit and converted to TopoJSON using MapShaper:
// https://mapshaper.org
contiguous_states = {
let contiguous_states = await FileAttachment(
"contiguous_states_tigerline.json"
).json();

contiguous_states.objects.states.geometries =
contiguous_states.objects.states.geometries.filter(
(o) => o.properties.STUSPS != "DC"
);
contiguous_states = topojson.feature(
contiguous_states,
contiguous_states.objects.states
);

return contiguous_states;
}
Insert cell
population_Map = new Map(population.map((o) => [o.fips, o.pop]))
Insert cell
// The population data comes from a Census API call.
// (
// await (
// await fetch(
// "https://api.census.gov/data/2018/acs/acs5?get=NAME,B02001_001E&for=state"
// )
// ).json()
// ).slice(1)

population = {
let population = await FileAttachment("pop.csv").csv();
population.forEach(function (o) {
o.pop = parseInt(o.pop);
});
population.max = d3.max(population.map((o) => o.pop));

return population;
}
Insert cell
Insert cell
tippy_style = html`<link rel="stylesheet" href="${await require.resolve(
`tippy.js/themes/light-border.css`
)}">`
Insert cell
import { Legend } from "@d3/color-legend"
Insert cell
tippy = require("tippy.js@6")
Insert cell

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.
Learn more