Maps, Data, Viz, UX, Design
Published
Edited
Dec 2, 2020
1 fork
Importers
5 stars
sorted = countiesGeoArea
.map(d => d.properties)
.sort((a, b) => b.pop_density - a.pop_density)
countyPopDensityByFips = new Map(
countiesGeoArea.map(({ id, properties }) => [id, properties])
)
countyPopDensityFC = ({
type: "FeatureCollection",
features: countiesGeoArea.slice()
})
countiesGeoArea = countiesGeo.features
.map(f => {
const area_sqkm = landAreaByFips.get(f.id).area / 1000000;
const pop = countiesPopulation.get(f.id);
const pop_density = pop && area_sqkm ? pop / area_sqkm : undefined;
return {
...f,
properties: {
...f.properties,
pop,
area_sqkm,
pop_density
}
};
})
.filter(d => d.properties.pop_density !== undefined)
landAreaByFips = new Map(
usCountyArea.map(({ GEOID, NAME, ALAND }) => [
GEOID,
{ name: NAME, area: ALAND }
])
)
countiesGeo = topojson.feature(us, us.objects.counties)
usCountyArea = {
const csv = await FileAttachment("us_county_land_area.csv").csv();
for (let row of csv) {
row.ALAND = Number(row.ALAND);
}
return csv;
}
countiesPopulation = {
const data = await d3.json(
`${baseURI}?get=B01001_001E&for=county:*&in=state:*&key=${key}`
);
return new Map(
data.slice(1).map(([value, state, county]) => [`${state}${county}`, +value])
);
}
us = FileAttachment("counties-10m.json").json()
import {
map,
mapLegend
} from "@clhenrick/u-s-county-population-density-choropleth"
import { baseURI, key } from "@clhenrick/us-census-constants"
topojson = require("topojson-client@3")
d3 = require("d3-fetch@2")
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.
