Published
Edited
Apr 18, 2022
choropleth = {
const svg = d3.create("svg")
.attr("viewBox", [0, -100, width, height+100]);
svg.append("g")
.attr("transform", "translate(360,-60)")
.append(() =>
legend({
color: color,
title: data.title,
width: 260,
tickFormat: ".0f"
})
);
svg.append("g")
.selectAll("path")
.data(statedetail.features)
.join("path")
.attr("stroke", function(d){
if(data.get(+d.properties.STATE_FIPS) > 50589)
return "white";
else
return "#d9d9d9";
})
.attr("stroke-linejoin", "round")
.attr("stroke-width", 1)
.attr("fill", d => color(data.get(+d.properties.STATE_FIPS)))
.attr("d", path)
.append("title")
.text(d => " Median Income: " + data.get(+d.properties.STATE_FIPS));
svg.selectAll(".subunit-label")
.data(statedetail.features)
.enter().append("text")
.attr("class", function(d) { return "subunit-label " + d.id; })
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
.attr("fill", "black")
.attr("fill-opacity", "1")
.attr("font-size", "10px")
.attr("font-weight", "400")
.attr("text-anchor", "middle")
.text(function(d) { return d.properties.StateName; })
return svg.node();
}
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.
