Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Spike mapBubble mapChoroplethD3 U.S. Map (Live Projection)Map Maker Dot Density: Cumulative Covid CasesFIPS County Code BrushCOVID-19 Cases by CountyCMU COVIDcast API: Map makerGeoJson BoilerplateMethods of Comparison, ComparedCOVID-19: Cumulative deaths per thousand (US Counties)ChoroplethCOVID-19 in the USSanders Donation 2020 County LevelTrump Donation 2020 County LevelBiden Donation 2020 County LevelUSA County Heat MapUSA County Heat MapUS County Dot MapAncestry by US County MapTry to impeach this? Challenge accepted!Streaming ShapefilesHow well does population density predict U.S. voting outcomes?Bivariate choroplethB&W Choropleth
Ancestry by U.S. County
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
${format(data.get(d.id))}`);
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("stroke-linejoin", "round")
.attr("d", path);
return svg.node();
}
alldata = d3.csvParse(await FileAttachment("ACSDT5Y2018.B04006_data_with_overlays_2020-05-08T171725.csv").text())
total = "B04006_001E"
variables = new Map(Object.entries(alldata[0])
.filter(([GEO_ID]) => /^B\d+_\d+E$/.test(GEO_ID) && GEO_ID !== total)
.map(([GEO_ID, id]) => [GEO_ID, {id: GEO_ID, name: id.split(/!!/g).pop(), total: d3.sum(alldata.slice(1), d => d[GEO_ID])}])
.sort(([, {total: a}], [, {total: b}]) => d3.descending(a, b)))
data = new Map(alldata.slice(1).map(d => [d.GEO_ID.slice(-5), +d[variable.id] / +d[total]]))
color = d3.scaleSequential([0, d3.max(data.values())], d3.interpolateYlGnBu)
path = d3.geoPath()
format = color.tickFormat(5, "%")
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = FileAttachment("counties-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@5", "d3-array@2")
import {legend} from "@d3/color-legend"
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.
