Search⌘ K

Challenge: Add Tooltip to a Treemap

Explore how to implement tooltips in treemaps using D3.js. This lesson helps you add interactive elements that reveal continent names when hovering over countries, aiding your understanding of tooltips and hierarchical data visualization.

Problem statement

Add a tooltip to the treemap already drawn in the Drawing a Treemap lesson. The tooltip should show the name of the continent of the country over which the mouse has hovered.

Expected output

Expected output

Coding exercise

The problem is designed to check your understanding of the tooltip and treemap, so you are encouraged to solve it on your own. If you are completely stuck, then refer to the next lesson, which will explain the solution in detail.

If you’re unsure how to do this, click the “Show Solution” button.