chart = {
const width = 975;
const height = 610;
const margin = 30;
const svg = d3
.create("svg")
.attr("viewBox", [-margin, 0, width + margin, height + margin]);
svg
.append("g")
.attr("transform", "translate(610,20)")
.append(() => legend({ color, title: data.title, width: 260 }));
svg
.append("g")
.attr("id", "map")
.selectAll("path")
.data(topojson.feature(us, us.objects.counties).features)
.join("path")
.attr("class", "county")
.attr("fill", d => color(data.get(d.id)))
.attr("d", path);
svg
.select("#map")
.append("path")
.attr("fill", "none")
.attr("stroke", "white")
.attr("d", path(topojson.mesh(us, us.objects.states, (a, b) => a !== b)));
const tooltip = svg.append("g");
svg
.selectAll(".county")
.on("touchmove mousemove", function(event, d) {
tooltip.call(
callout,
`${format(data.get(d.id))}
${d.properties.name}, ${states.get(d.id.slice(0, 2)).name}`
);
tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
d3.select(this)
.attr("stroke", "red")
.raise();
})
.on("touchend mouseleave", function() {
tooltip.call(callout, null);
d3.select(this)
.attr("stroke", null)
.lower();
});
return svg.node();
}