Adding a Tooltip
D3's event system can be used to add helpful UI elements such as tooltips that provide additional details about a chart.
We'll cover the following...
For our next project, we are going to add interactions to our scatterplot. We created a scatterplot in an earlier section, so we are going to bring back that code. Here is the completed project we left off with.
The scatterplot is displaying hundreds of dots. It can be difficult to read each dot. We can use tooltips to improve the user experience.
We briefly talked about how to listen for events at the start of this section. D3 provides an API to listen for events on our selections. All browser events are supported in D3.
We are going to use D3’s event system to add a tooltip to our scatterplot. Tooltips give additional information about a shape. They are completely voluntary. We do not want to show a tooltip unless a reader is hovering their mouse over a dot. We will use an event to help us detect when the mouse is ...