The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Edited
Jan 23, 2023
28 forks
Importers
76 stars
Pizza ParadiseUSAFacts Higher Education DataStack Overflow Developer Survey DataMonthly Retail Trade Report DataCurated datasetsStreetEasy Real Estate DataFAA Laser Reports DataVisualization Publication DatasetDarkCideS: Bats in Caves DataThe MoMA Collection DataPlot Test DataNOAA Hourly Weather DataEIA Electricity DataBandcamp Sales DataGoogle Merchandise Sales Data
U.S. Geographic Data
Plot.plot({
projection: "albers-usa",
width: exampleWidth,
height: exampleHeight,
marks: [
Plot.frame({stroke: "white", fill: "#111"}),
Plot.geo(nation, {stroke: "#fff", strokeWidth: 0.35})
]
})
us = d3.json("https://unpkg.com/us-atlas@3/counties-10m.json")
nation = topojson.feature(us, us.objects.nation)
Plot.plot({
projection: "albers-usa",
width: exampleWidth,
height: exampleHeight,
marks: [
Plot.frame({ stroke: "white", fill: "#111" }),
Plot.geo(countyShapes, { stroke: "#fff", strokeWidth: 0.35 })
]
})
countyShapes = topojson.feature(us, us.objects.counties)
fipsByName = new Map(
countyShapes.features.map((d) => {
const state = statesByFips.get(d.id.slice(0, 2)).name;
const county = d.properties.name;
const name = county + ", " + usStateCodes.getStateCodeByStateName(state);
return [name, d.id];
})
)
nameByFips = new Map(Array.from(fipsByName, ([name, fips]) => [fips, name]))
countyStates = countyShapes.features.map((d) => {
const state = statesByFips.get(d.id.slice(0, 2)).name;
const stateCode = usStateCodes.getStateCodeByStateName(state);
const county = d.properties.name;
const name = `${county}, ${stateCode}`;
return {fips: d.id, state, stateCode, county, name};
})
countyStates.filter(d => d.stateCode === "MD").sort((a, b) => a.county.localeCompare(b.county))
Plot.plot({
projection: "albers-usa",
width: exampleWidth,
height: exampleHeight,
marks: [
Plot.frame({stroke: "white", fill: "#111"}),
Plot.geo(stateShapes, {stroke: "#fff", strokeWidth: 0.35})
]
})
usStateCodes = import('https://cdn.skypack.dev/us-state-codes@1.1.2?min').then(d => d.default)
stateShapes = topojson.feature(us, us.objects.states)
statesByFips = new Map(Array.from(us.objects.states.geometries, d => [d.id, d.properties]))
// The borders of the states are merged so we can render a single line where they would otherwise overlap
statesMesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
Plot.plot({
projection: "albers-usa",
width: exampleWidth,
height: exampleHeight,
marks: [
Plot.frame({stroke: "white", fill: "#111"}),
Plot.dot(usCities, {x: "longitude", y: "latitude", fill: "#fff", r: 1})
]
})
usCities = (await FileAttachment("ne_10m_populated_places.csv").csv())
.filter((d) => d["ADM0NAME"] === "United States of America")
.map((d) => ({
name: d.NAME,
state: d.ADM1NAME,
population: +d.POP_MAX,
latitude: +d.LATITUDE,
longitude: +d.LONGITUDE
}))
usCitiesGeo = ({
type: "FeatureCollection",
features: usCities.map(
({ longitude, latitude, ...properties }) => ({
type: "Feature",
id: properties.name,
properties,
geometry: { type: "Point", coordinates: [longitude, latitude] }
})
)
})
{
const f3 = d3.format(",.3r");
const f1 = d3.format(".1s");
return Plot.plot({
projection: "albers-usa",
width: exampleWidth,
height: exampleHeight,
marks: [
Plot.frame({ fill: "#111" }),
Plot.geo(countyShapes, {
stroke: "none",
strokeWidth: 0.35,
fill: (d) => density(d),
title: (d) => `${d.id}: ${f3(density(d))} hab/km²`
})
],
color: {
scheme: "ylgnbu",
domain: [0.2, 20000],
type: "log",
legend: true,
label: "population density (hab/km²)",
ticks: 4,
tickFormat: (d) => (d < 1 ? "≤1" : f1(d))
}
});
}
populationByCounty = new Map(Array.from(populationData, ({ POP, state, county }) => [`${state}${county}`, +POP]))
function density(d) {
const population = populationByCounty.get(d.id);
const area = d3.geoArea(d) * (510e6 / (4 * Math.PI)); // km²
return population / area;
}
populationData = useCache
? FileAttachment("populationData.csv").csv() // cache of the API call from October 2020
// or load the data from the census API, and tweak its format
: d3.json("https://api.census.gov/data/2018/pep/population?get=POP&for=county:*").then(rows => {
const keys = rows.shift();
return Array.from(rows, row => Object.fromEntries(keys.map((key, i) => [key, row[i]])));
})
demographicsData = ({
2018: new Map(demographicsData2018.map(processDemographics).map(d => [`${d.state}${d.county}`, d])),
2016: new Map(demographicsData2016.map(processDemographics).map(d => [`${d.state}${d.county}`, d])),
2014: new Map(demographicsData2014.map(processDemographics).map(d => [`${d.state}${d.county}`, d])),
})
selectedFields = [
"B01003_001E", // estimated total population
// Sex demographics
// https://api.census.gov/data/2018/acs/acs5/groups/B01001.html
"B01001_002E", // Total Male
// TODO: age breakdowns for male
"B01001_026E", // Total Female
// TODO: age breakdowns for female
// Racial demographics
// https://api.census.gov/data/2018/acs/acs5/groups/B02001.html
"B02001_002E", // White (includes Hispanic or Latino?)
"B02001_003E", // Black or African American
"B02001_004E", // American Indian or Alaskan Native
"B02001_005E", // Asian
"B02001_006E", // Native Hawaiian or Pacific Islander
"B02001_007E", // Some other race
"B02001_008E", // Two or more races
"B02001_009E", // Two or more races (one is some other)
"B02001_010E", // Three or more races
// Hispanic or Latino Origin
// https://api.census.gov/data/2018/acs/acs5/groups/B03003.html
// "B03003_001E", // Total
"B03003_002E", // not Hispanic or Latino
"B03003_003E", // Hispanic or Latino
// GINI index of inequality
// https://api.census.gov/data/2018/acs/acs5/groups/B19083.html
"B19083_001E", // gini index
// Per-capita income in last 12 months (inflation adjusted for that year)
"B19301_001E", // All races
"B19301A_001E", // White
"B19301H_001E", // White (not hispanic)
"B19301I_001E", // Hispanic or Latino
"B19301B_001E", // Black or African American
"B19301C_001E", // American Indian or Alaskan Native
"B19301D_001E", // Asian
"B19301E_001E", // Native Hawaiian or Pacific Islander
"B19301F_001E", // Some other race
"B19301G_001E", // Two or more races
]
niceKeys = selectedFields.map(niceLabel)
// Uncomment this cell if you want to query the Census API
// demographicsDataApi = d3.json(`https://api.census.gov/data/2018/acs/acs5?get=NAME,${selectedFields.join(",")}&for=county`)
demographicsData2018 = FileAttachment("demographicsData2018.csv").csv({typed: true})
demographicsData2016 = FileAttachment("demographicsDataApi2016.csv").csv({typed: true})
demographicsData2014 = FileAttachment("demographicsDataApi2014.csv").csv({typed: true})
// Uncomment this cell if you want to query the Census API
// demographicsKeys = d3.json("https://api.census.gov/data/2018/acs/acs5/variables.json")
demographicsKeysFile = FileAttachment("demographicsKeys.json").json()
processDemographics = ({ ...d }) => {
d.state = String(d.state).padStart(2, "0");
d.county = String(d.county).padStart(3, "0");
for (const key of selectedFields) if (!d[key] || d[key] < 0) d[key] = -1;
return d;
}
niceLabel = (key) => {
const moe = key.slice(key.length - 1) == "M";
// if its a margin of error field, we don't have it in the lookup so we us the E(stimate) field instead
const d = demographicsKeysFile.variables[moe ? key.replace(/M$/, "E") : key];
const niceLabel = d.label
.split("!!")
.filter((d) => d !== "Estimate" && d !== "Total" && d.indexOf("Per capita") !== 0)
.join(" ");
const niceConcept = `${moe ? "Margin of error: " : ""}${d.concept.toLowerCase()}`;
return niceLabel ? `${niceConcept}: ${niceLabel.toLowerCase()}` : niceConcept;
}
nytDate = "2021-12-31"
nytOnDateByCounty = new Map(Array.from(nytOnDate, d => [d.fips, d]))
import { rawData as nytData } with { nytStartDate as startDate } from "@jashkenas/united-states-coronavirus-daily-cases-map-covid-19"
nytByDay = d3.group(nytData, d => d.date)
nytOnDate = nytByDay.get(nytDate)
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.