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.
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:
the angle around our circle
the offset from the center of our circle to start our line at
the text that we want to display
We'll also create a
<g> element to contain all of our annotations.
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
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
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.