Public
Edited
Nov 1, 2023
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-25, 0, width+55, height+50])
.attr("style", "width: 100%; height: auto; height: intrinsic;");
const g = svg.append("g");
svg.append("g")
.attr("transform", "translate(750,0)")
.append(() => legend({color, title: "Inches", width: 280, tickFormat: ".0f"}));
const counties = g.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.lower48).features)
.join("path")
.attr("class" , "county")
.attr("fill", d => color(update.get(d.id)))
.attr("d", path);
g.append("path")
.datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);
const tooltip = svg.append("g");
svg
.selectAll(".county")
.on("touchmove mousemove", function(event, d) {
tooltip.call(
callout,`County: ${d.properties.NAME}
Moving Average: ${update.get(d.id)}"`
);
tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
})
.on("touchend mouseleave", function() {
tooltip.call(callout, null);
});
return svg.node();
}
format = d3.format("0.2f")
update = new Map(data.filter(d => d.year == year).map(d => [d.id, format(d.fitted)]))
updateCounty(county, aveUpdate)
path = d3.geoPath().projection(projection)
projection = d3.geoAlbersUsa().fitSize([width, 700], topojson.feature(us, us.objects.lower48))
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.
