Learn D3.js

Adding interactivity

You are probably curious to know which European country is indicated by that dot at the top right of the chart, or which African country has nearly 10,000 GDP per capita but lags behind many poorer countries in the HDI. We can't place static labels beside each dot, since that would make the chart unreadable, but we can add interactive tooltips to display the country's name, and perhaps other information, such as the HDI and the GDP values as well.

Let's create a function for that. The following function creates a tooltip as an initially hidden (opacity: 0) SVG <g> object, which contains one <rect> element with rounded corners and three lines of text, all of which are initially empty:

function drawTooltips() { const tooltip ...