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: "Adding annotations"
description: "We'll add annotations to our chart to tell our viewer what the different parts of the chart are showing. To do this, we'll create a generic function, since there are so many things to label."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/priawfp33n
codeFolder: course/module_06/lesson_06.08/protected/code/11-radar-weather-chart/end
---

# Adding annotations

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

Let's take a step back and look at our charts through a new viewer's eyes.

![Chart with precipitation bubbles, translucent](https://d2uusema5elisf.cloudfront.net/courses/fullstack-d3-masterclass/module_06/lesson_06.08/public/images/11-radar-weather-chart/precip-done.png)

There's a lot going on and not much explanation. A new viewer might wonder: what does this blue dot represent? What are these yellow slashes? The goal of data visualization is communication - and being clear is important for effective communication.

Let's add some annotations to help orient a new viewer. We have a lot of things that need explanation, so let's start by creating a function that will draw an annotation, give three parameters:

1.  the **angle** around our circle
2.  the **offset** from the center of our circle to start our line at
3.  the **text** that we want to display

We'll also create a `<g>` element to contain all of our annotations.

```javascript
const annotationGroup = bounds.append("g")

const drawAnnotation = (angle, offset, text) => {
}
```

Within our `drawAnnotation()` function, we want to draw a `<line>` that extends from our `offset` to a set distance from the center of our chart. Let's draw our lines out to 1.6 times our circle's radius, just outside of our cloud bubbles. We'll also want a `<text>` element to display the text of our annotation, which we'll draw at the outer end of our `<line>`.

```javascript { actualFilename=./protected/code/11-radar-weather-chart/completed/chart.js endChar=7525 endLine=245 startChar=7033 startLine=229 statedFilename=code/11-radar-weather-chart/completed/chart.js url=https&#x3A;//gitlab.com/fullstackio/books/newline-course-template/module_06/lesson_06.08/protected/code/11-radar-weather-chart/completed/chart.js#L229 }
  const drawAnnotation = (angle, offset, text) => {
    const [x1, y1] = getCoordinatesForAngle(angle, offset)
    const [x2, y2] = getCoordinatesForAngle(angle, 1.6)

    annotationGroup.append("line")
        .attr("class", "annotation-line")
        .attr("x1", x1)
        .attr("x2", x2)
        .attr("y1", y1)
        .attr("y2", y2)

    annotationGroup.append("text")
        .attr("class", "annotation-text")
        .attr("x", x2 + 6)
        .attr("y", y2)
        .text(text)
  }
```

We'll want our `<line>` to have a light stroke and our `<text>` to be vertically centered with the end of our `<line>`. Let's add those styles to our `styles.css` file.

We'll add annotations to our chart to tell our viewer what the different parts of the chart are showing. To do this, we'll create a generic function, since there are so many things to label.