viewof states = {
let value = null;
const svg = d3.create("svg").attr("viewBox", [0, 0, 975, 610]);
svg
.append("g")
.attr("fill", "#eee")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter()
.append("path")
.attr("opacity", "1.0")
.attr("fill", function(d) {
return colorScheme[Math.floor(d.id / 10)];
})
.attr("d", path)
.on("click", d => {
const node = svg.node();
node.value = value = value === d.id ? null : d.properties.name;
node.dispatchEvent(new CustomEvent("input"));
outline.attr("d", value ? path(d) : null);
outline.attr("fill", colorScheme[Math.floor(d.id / 10)]);
});
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("pointer-events", "none")
.attr("d", path);
const outline = svg
.append("path")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("pointer-events", "none");
return Object.assign(svg.node(), { value: null });
}