A focusable SVG element can receive keyboard focus in a document. Set tabindex="0" on chart marks so users can reach them with the Tab key. section 10.2.4
Sort data before creating the marks to control their DOM and focus order. Pair mouse tooltip handlers with focus and blur handlers so keyboard users receive the same feedback. section 10.2.4
const updatedData = datum.id === "all"
? data
: data.filter(d => d.hemisphere === datum.id)
.sort((a, b) => a.global_population_estimate -
b.global_population_estimate);
innerChart
.selectAll("circle")
.data(updatedData, d => d.uid)
.join(
enter => enter
.append("circle")
...
.attr("tabindex", 0)
.on("mouseenter focus", showTooltip)
.on("mouseleave blur", hideTooltip)
...
Reapply tabindex and focus/blur handlers inside the data join whenever filtering creates new SVG circles. section 10.2.4
