chart = {
const svg = d3.create("svg")
.attr("viewBox", [-25, 0, width+55, height+50])
.attr("style", "width: 100%; height: auto; height: intrinsic;");
const g = svg.append("g");
svg.append("g")
.attr("transform", "translate(750,0)")
.append(() => legend({color, title: "Inches", width: 280, tickFormat: ".0f"}));
const counties = g.append("g")
.selectAll("path")
.data(topojson.feature(us, us.objects.lower48).features)
.join("path")
.attr("class" , "county")
.attr("fill", d => color(update.get(d.id)))
.attr("d", path);
g.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 tooltip = svg.append("g");
svg
.selectAll(".county")
.on("touchmove mousemove", function(event, d) {
tooltip.call(
callout,`County: ${d.properties.NAME}
Moving Average: ${update.get(d.id)}"`
);
tooltip.attr("transform", `translate(${d3.pointer(event, this)})`);
})
.on("touchend mouseleave", function() {
tooltip.call(callout, null);
});
return svg.node();
}