Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610])
.attr("stroke-linejoin", "round");
svg.append("g")
.attr("fill", "#ccc")
.selectAll("path")
.data(features.features)
.join("path")
.attr("fill", d => color(distances.get(d.id)))
.attr("d", path)
.append("title")
.text(d => `${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}
${d.id}
${distances.get(d.id)} hop${distances.get(d.id) === 1 ? "" : "s"}`);
svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-opacity", 0.5)
.attr("stroke-width", 0.5)
.attr("d", path(topojson.mesh(us, us.objects.counties, (a, b) => a !== b)));
svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));
return svg.node();
}
path = d3.geoPath()
distances = {
let current = [...coastals];
let next = [];
let distance = 0;
const distances = new Map(features.features.map(({id}) => [id, Infinity]));
while (current.length) {
for (const id of current) {
if (distances.get(id) > distance) {
distances.set(id, distance);
next.push(...neighbors.get(id));
}
}
current = next;
next = [];
++distance;
}
return distances;
}
neighbors = new Map(topojson.neighbors(us.objects.counties.geometries).map((neighbors, i) => [features.features[i].id, neighbors.map(j => features.features[j].id)]))
features = topojson.feature(us, us.objects.counties)
states = new Map(us.objects.states.geometries.map(d => [d.id, d.properties]))
us = FileAttachment("counties-albers-10m.json").json()
coastals = new Set(d3.tsvParse(await FileAttachment("coastal-counties@5.tsv").text(), ({id}) => id))
color = d3.scaleSequentialSqrt([0, d3.max(Array.from(distances.values()))], t => d3.interpolateYlGnBu(1 - t))
topojson = require("topojson-client@3")
d3 = require("d3@5")
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.
