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.

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.

Going back to our chart.js file, let's draw our first two annotations. To keep the top of our chart as clean as possible, let's create an annotation for the outer two data elements: cloud and precipitation bubbles.

We'll want to draw these annotations in the top right of our chart, to prevent from stealing the show too early. If our annotations were in the top left, viewers might read them first (since English text usually runs from left-to-right, top-to-bottom). We'll set the angle of these two annotations around π / 4, which is one-eight of a turn around our chart.



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