chart = {
let current = 0;
const roledescription = "State Boundary";
const svg = d3.create("svg")
.attr("viewBox", [0, 0, 975, 610])
const thresholds = () => {
return legend({color, title: data.title, width: 260 });
};
svg.append("g")
.attr("transform", "translate(610,20)")
.append(thresholds);
svg.append("g")
.attr("role", "list")
.attr("aria-roledescription", "Map")
.attr("aria-live", "polite")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.join("path")
.attr("role", "button")
.attr("aria-roledescription", roledescription)
.attr("fill", d => color(data.get(d.properties.name)))
.attr("data-value", d => data.get(d.properties.name))
.attr("tabindex", 0)
.attr("aria-label", d => d.properties.name)
.attr("aria-describedby", d => `label-${d.properties.name}`)
.attr("d", path)
.append("title")
.attr("id", d => `label-${d.properties.name}`)
.text(d => data.get(d.properties.name));
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("stroke-width", 1)
.attr("d", path)
svg.selectAll(`[aria-roledescription='${roledescription}']`)
.on("path-update", (event) => {
const belowThreshold = parseFloat(event.target.dataset.value) >= event.detail.value;
d3.select(event.target)
.attr("tabindex", belowThreshold ? "0" : "-1")
.attr("stroke-width", belowThreshold ? 3 : 1)
.attr("stroke", belowThreshold ? "black" : "white")
.attr("aria-hidden", !belowThreshold);
});
svg.on("legend-increment", (event) => {
d3.selectAll(`[aria-roledescription='${roledescription}']`).dispatch("path-update", { bubbles: true, detail: event.detail });
});
return svg.node();
}