Introduction
Before writing any code, let's step back: what makes a tooltip actually useful, and what makes one annoying?
This lesson covers the design considerations that separate a good tooltip from a bad one, and introduces the HTML-on-top-of-SVG trick that powers every React tooltip.
Tooltip: Why?
One of the most frustrating experiences in data visualization is seeing a graph element on the screen but missing crucial details about it, even though that information exists somewhere.
Take the scatterplot below. It shows a strong negative correlation between vulnerability to climate change and CO₂ emissions.
Without tooltips, it would be very frustrating not being able to reveal the identity of each data point.
The countries with the highest vulnerability to climate change have the lowest CO2 emissions
All countries sorted by their vulnerability and readiness to climate change. The size shows the CO2 emission per person in that country.
Reproduction of a chart originally published by Data Wrapper using react and d3.js.
This module will end that frustration by showing you how to create reusable tooltip components for a chart made with React.
Design considerations
Before we dig into the code, let's review a few design considerations to keep in mind for building high-quality tooltips.
Oh no! 😱
It seems like you haven't enrolled in the course yet!
Join many other students today and learn how to create bespoke, interactive graphs with d3.js and React!
Enrollment is currently closed. Join the waitlist to be notified when doors reopen:
Or Login