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.
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
We know that we'll need to modify our
#tooltip element, so let's assign that to a variable. Let's also define our
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:
it will return the string verbatim, other than specific directives,
these directives contain a percent sign and a letter,
usually the letter in a directive has two formats: lowercase (abbreviated) and uppercase (full), and
a dash (
-) between the percent sign and the letter prevents padding of numbers.
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 https://github.com/d3/d3-time-format.
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
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?