This video is available to students only

Scatter plot

We add a tooltip to our scatter plot. Along the way, we learn about d3.timeFormat and learn a great trick for making our tooltips feel smoother, using voronoi.

Let's level up and add tooltips to a scatter plot.

Scatter plot

We want a tooltip to give us more information when we hover over a point in our chart.

At the bottom of the file, we'll select all of our <circle/> elements and add a mousenter and a mouseleave event.

We know that we'll need to modify our #tooltip element, so let's assign that to a variable. Let's also define our onMouseEnter() and onMouseLeave() functions.

Let's first fill out our onMouseEnter() function. We want to display two values:

  • the metric on our x axis (dew point), and

  • the metric on our y axis (humidity).

For both metrics, we'll want to define a string formatter using d3.format(). Then we'll use that formatter to set the text value of the relevant <span/> in our tooltip.

Let's add an extra bit of information at the bottom of this function — users will probably want to know the date of the hovered point. Our data point's date is formatted as a string, but not in a very human-readable format (for example, "2019-01-01"). Let's use d3.timeParse to turn that string into a date that we can re-format.

Now we need to turn our date object into a friendlier string. The d3-time-format module can help us out here! d3.timeFormat() will take a date formatter string and return a formatter function.

The date formatter string uses the same syntax as d3.timeParse — it follows four rules:

  1. it will return the string verbatim, other than specific directives,

  2. these directives contain a percent sign and a letter,

  3. usually the letter in a directive has two formats: lowercase (abbreviated) and uppercase (full), and

  4. a dash (-) between the percent sign and the letter prevents padding of numbers.

For example, d3.timeFormat("%Y")(new Date()) will return the current year.

Let's learn a few handy directives:

  • %Y: the full year

  • %y: the last two digits of the year

  • %m: the padded month (eg. "01")

  • %-m: the non-padded month (eg. "1")

  • %B: the full month name

  • %b: the abbreviated month name

  • %A: the full weekday name

  • %a: the abbreviated weekday name

  • %d: the day of the month

See the full list of directives at

Now, let's create a formatter string that prints out a friendly date.

Much better! Let's plug that in to our tooltip.

Next, we'll grab the x and y value of our dot , offset by the top and left margins.

Just like with our bars, we'll use calc() to add these values to the percentage offsets needed to shift the tooltip. Remember, this is necessary so that we're positioning its arrow, not the top left corner.

Lastly, we'll make our tooltip visible and hide it when we mouse out of our dot.

Nice! Adding a tooltip was much faster the second time around, wasn't it?


This page is a preview of Fullstack D3 Masterclass

Start a new discussion. All notification go to the author.