chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, -40, width, height]);
const selectedColors = colors;
const color = d => {
if (!data.has(d.properties[idAttribute])) return "#636363";
const [floodDepth, popDensity] = data.get(d.properties[idAttribute]);
const xIdx = x(popDensity);
const yIdx = y(floodDepth);
const colorIdx = xIdx + yIdx * 3;
return selectedColors[Math.min(colorIdx, selectedColors.length - 1)] || "#636363";
};
svg.append(legend)
.attr("transform", `translate(100,500)`);
svg.append("text")
.attr("x", width / 2)
.attr("y", -20)
.attr("text-anchor", "middle")
.attr("font-size", "20px")
.attr("font-weight", "bold")
.text("Flood Prone Areas vs Population Density");
svg.append("text")
.attr("x", width / 2)
.attr("y", 0)
.attr("text-anchor", "middle")
.attr("font-size", 16)
.attr("font-style", "italic")
.text("Johnson County, Iowa");
svg.append("text")
.attr("x", width / 2)
.attr("y", 0)
.attr("text-anchor", "middle")
.attr("font-size", 12)
.attr("font-style", "italic")
.text("Data: Census 2019-2023 and Iowa Geospatial Data Clearinghouse")
.attr("transform", "translate(-250,650)");
svg.append("g")
.selectAll("path")
.data(topojson.feature(polygons, polygons.objects.johnson_county_fld_dpth).features)
.join("path")
.attr("fill", d => color(d))
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("stroke-opacity", 0.8)
.attr("d", path)
.append("title")
.text(d => {
const values = data.get(d.properties[idAttribute]) || [0, 0];
return `Block Group: ${d.properties[idAttribute]}
Flood Depth: ${values[0].toFixed(2)} ft
Population Density: ${values[1].toFixed(2)}/sq mi`;
});
return svg.node();
}