This video is available to students only

Adding annotations

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.

Adding annotations#

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

Chart with precipitation bubbles, translucent

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.

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>.

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.


This page is a preview of Fullstack D3 Masterclass

No discussions yet