chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610])
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round");
// create grey state outlines
svg.append("path")
.datum(topojson.mesh(us, us.objects.states))
.attr("fill", "none")
.attr("stroke", "#ccc")
.attr("d", path);
// create dark states outlines, shrink, and fill in
const state = svg.append("g")
.attr("stroke", "#000")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features.filter(d => data.has(d.id)))
.join("path")
.attr("vector-effect", "non-scaling-stroke")
.attr("d", path)
.attr("fill", d => color(data.get(d.id)[0]))
.attr("transform", d => transform(d, 0));
state.append("title")
.text(d => `${d.properties.name}
${format(data.get(d.id)[0])} in 2014
${format(data.get(d.id)[1])} in 2018
${format(data.get(d.id)[2])} in 2022`);
return Object.assign(svg.node(), {
update(year) {
state.transition()
.duration(750)
.attr("fill", d => color(data.get(d.id)[year]))
.attr("transform", d => transform(d, year));
}
});
}
chart.update(year)
function transform(d, year) {
const [x, y] = path.centroid(d);
return `
translate(${x},${y})
scale(${Math.sqrt(data.get(d.id)[year])})
translate(${-x},${-y})
`;
}
color = d3.scaleSequential(d3.extent(Array.from(data.values()).flat()), d3.interpolateGreens).nice()
data = new Map(d3.csvParse(await FileAttachment("streamingpop.csv").text(), ({id, subscribed2014, subscribed2018, subscribed2022}) => [id, [+subscribed2014, +subscribed2018, +subscribed2022]]))
path = d3.geoPath()
format = d3.format(".1%")
us = FileAttachment("states-albers-10m@1.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
