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