A transparent interaction circle is an invisible, enlarged circular hit area placed over or behind a visual mark. It makes pointer interactions easier when the visible mark is too small to target precisely. section 10.2.4
Implement the pattern by:
- Appending a second set of circles behind the original marks. section 10.2.4
- Keeping each interaction circle aligned with its mark through the same cx and cy values. section 10.2.4
- Using a larger radius, such as 30 pixels, and setting fill to transparent. section 10.2.4
- Attaching mouseenter and mouseleave handlers to show and hide the tooltip. section 10.2.4
- Retaining mouse and focus handlers on the original marks for keyboard access. section 10.2.4
Listing 10.14 Adding larger invisible circles (scatterplot.js)
innerChart #1
.selectAll("interaction-circles")
.data(data)
.join("circle")
.attr("class", "interaction-circles")
.attr("cx", d => xScale(d.global_population_estimate))
.attr("cy", d => yScale(d.max_size_m))
.attr("r", 30) #2
.attr("fill", "transparent")
.on("mouseenter", showTooltip) #3
.on("mouseleave", hideTooltip);
innerChart
.selectAll(".cetacean")
.data(data.sort((a, b) => a.global_population_estimate -
b.global_population_estimate))
.join("circle")
.attr("class", d => `cetacean cetacean-${d.status}`)
.attr("cx", d => xScale(d.global_population_estimate))
.attr("cy", d => yScale(d.max_size_m))
.attr("r", d => rScale(d.max_weight_t))
.attr('fill-opacity', 0.6)
.attr("stroke", d => colorScale(d.status))
.attr("stroke-width", 2)
.attr("tabindex", 0)
.on("mouseenter focus", showTooltip)
.on("mouseleave blur", hideTooltip);
Inspect the complete scatterplot implementation, including the enlarged transparent circles and their tooltip event handlers. section 10.2.4
