chart = {
const data = population.map((d) => ({
...d,
county: countymap.get(d.fips),
state: statemap.get(d.state)
}))
.filter(d => d.county)
.sort((a, b) => d3.descending(a.population, b.population));
const length = d3.scaleLinear([0, d3.max(data, d => d.population)], [0, 200]);
const path = d3.geoPath();
const svg = d3.create("svg")
.attr("width", 975)
.attr("height", 610)
.attr("viewBox", [0, 0, 975, 610])
.attr("style", "width: 100%; height: auto; height: intrinsic;");
svg.append("path")
.datum(topojson.feature(us, us.objects.nation))
.attr("fill", "#ddd")
.attr("d", path);
svg.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 legend = svg.append("g")
.attr("fill", "#777")
.attr("transform", "translate(886,592)")
.attr("text-anchor", "middle")
.style("font", "10px sans-serif")
.selectAll()
.data(length.ticks(4).slice(1))
.join("g")
.attr("transform", (d, i) => `translate(${20 * i},0)`);
legend.append("path")
.attr("fill", "red")
.attr("fill-opacity", 0.5)
.attr("stroke", "red")
.attr("stroke-width", 0.5)
.attr("d", d => spike(length(d)));
legend.append("text")
.attr("dy", "1em")
.text(length.tickFormat(4, "s"));
const format = d3.format(",.0f");
svg.append("g")
.attr("fill", "red")
.attr("fill-opacity", 0.5)
.attr("stroke", "red")
.attr("stroke-width", 0.5)
.selectAll()
.data(data)
.join("path")
.attr("transform", d => `translate(${centroid(d.county)})`)
.attr("d", d => spike(length(d.population)))
.append("title")
.text(d => `${d.county.properties.name}, ${d.state.properties.name}
${format(d.population)}`);
return svg.node();
}