Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

---
title: "Scatter plot"
description: "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."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/hvkvsfr9uo
codeFolder: course/module_04/lesson_04.04/protected/code/05-interactions/end
---

# Scatter plot

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

![Scatter plot](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_04/lesson_04.04/public/images/2-making-a-scatterplot/scatterplot-finished.png)

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

<CodeSandboxEmbed
  src="//codesandbox.io/s/h9uo5?fontsize=14&hidenavigation=1&theme=dark&autoresize=1&module=/chart.js"
  style={{width: '100%', height: '35em'}}
/>

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

```javascript
bounds.selectAll("circle")
    .on("mouseenter", onMouseEnter)
    .on("mouseleave", onMouseLeave)
```

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.

```javascript
const tooltip = d3.select("#tooltip")
function onMouseEnter(event, d) {
}

function onMouseLeave() {
}
```

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.

```javascript
function onMouseEnter(event, d) {
  const formatHumidity = d3.format(".2f")
  tooltip.select("#humidity")
      .text(formatHumidity(yAccessor(d)))

  const formatDewPoint = d3.format(".2f")
  tooltip.select("#dew-point")
      .text(formatDewPoint(xAccessor(d)))

}
```

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.

```javascript
const dateParser = d3.timeParse("%Y-%m-%d")
console.log(dateParser(d.date))
```

Now we need to turn our date object into a friendlier string. The [**d3-time-format**](https://github.com/d3/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 <https://github.com/d3/d3-time-format>.

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

```javascript
const dateParser = d3.timeParse("%Y-%m-%d")
const formatDate = d3.timeFormat("%B %A %-d, %Y")
console.log(formatDate(dateParser(d.date)))
```

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

```javascript
const dateParser = d3.timeParse("%Y-%m-%d")
const formatDate = d3.timeFormat("%B %A %-d, %Y")
tooltip.select("#date")
    .text(formatDate(dateParser(d.date)))
```

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

```javascript
const x = xScale(xAccessor(d))
  + dimensions.margin.left
const y = yScale(yAccessor(d))
  + dimensions.margin.top
```

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.

```javascript
tooltip.style("transform", `translate(`
  + `calc( -50% + ${x}px),`
  + `calc(-100% + ${y}px)`
  + `)`)
```

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

```javascript
  tooltip.style("opacity", 1)
}

function onMouseLeave() {
  tooltip.style("opacity", 0)
}
```

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.