Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Sep 25, 2021
18 forks
Importers
11 stars
state
viewof state = {
let value = null;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610]);
svg.append("g")
.attr("fill", "#ccc")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path")
.attr("d", path)
.on("click", (event, d) => {
const node = svg.node();
node.value = value = value === d.id ? null : d.id;
node.dispatchEvent(new Event("input", {bubbles: true}));
outline.attr("d", value ? path(d) : null);
});
svg.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none")
.attr("d", path);
const outline = svg.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none");
return Object.assign(svg.node(), {value: null});
}
path = d3.geoPath()
us = FileAttachment("states-albers-10m.json").json()
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.
