viewof svg = {
const svg = d3
.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto")
.call(zoom);
// background
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("x", 0)
.attr("y", 0)
.attr("fill", "hsl(0, 0%, 96%)");
// choropleth
const g = svg.append("g").classed("map-layers", true);
g.selectAll("path")
.data(geojson.features)
.enter()
.append("path")
.attr("class", (d) => quantile(d.properties[category]))
.attr("d", path)
.append("title")
.text((d) => `${format(d.properties[category])} / sq meter`);
// legend
const legend = svg
.append("g")
.classed("legend", true)
.attr("transform", `translate(20, ${height - 60})`);
legend
.selectAll("rect")
.data(quantile.range())
.enter()
.append("rect")
.attr("height", 8)
.attr("width", x.bandwidth())
.attr("x", (d) => x(d))
.attr("class", (d) => d);
legend.select(".domain").remove();
legend.selectAll(".tick > line").remove();
return svg.node();
}
function zoom (s) {
s.call(d3.zoom()
.on("zoom", () => s.select(".map-layers").attr("transform", d3.event.transform))
.scaleExtent([1, 18])
.translateExtent([[0, 0], [width, height]]))
}
fixedgeojson = FileAttachment("fixedGeoJSON.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.
