Axes, Legends, & Annotations

[00:00:00]
>> Shirley Wu: So the first example I want to give is axes. So these are axes, these beautiful things. And as you might imagine, axes are extremely important to make sure that your data is readable. Because if you notice something. We've been making these really fun bar charts and radio charts thus far, except there is no labelling on them, and so [LAUGH] without that context you don't know what's going on, right?

[00:00:35]
And here too, these bar charts and stuff are kind of fun, and at least you have some colors in there. But then if you don't have axes, you don't know what time frame this is. You don't know what this y axis is. So axes are extremely important in data visualization.

[00:00:53]
For the readability of your chart, and the good thing is D3 makes it really, really, easy. And they make it really, really, easy because if you think about it, to render this whole thing with SVG, that's like, a bunch of text elements, a bunch of line elements, a bunch of path elements, and you've already seen how much work that is.

[00:01:17]
And you can see in this, this is kind of like the DOM the DOM elements required to like just draw this one thing. It's like, at the beginning of the day, you are like, these path elements are not fun, or having to hand coat these as SVG elements are not going to be fun so.

[00:01:38]
Same thing for drawing these axes, like you don't want to be hand coding axes every single time for your visualization and D3 makes that really, really easy for you. But on the flip side, that's why it needs access to the DOM so that it can do all of these SVG elements for you.

[00:01:58]
And so, it's really quite easy to do axes. So create a D3 axes generator. axisLeft, axisBottom are the ones I usually use at the beginning of the React lifecycle. And set the corresponding scales so all we have to do is axisLeft and then pass in, in this case, we're trying to do the y-axis.

[00:02:22]
So pass in the y-scale that we already have from earlier. And then create an SVG group element in the render. And finally, a componentDidUpdate call the axis on the group element. And that's all it takes. These three parts will draw this on the screen for you. It's really quite nice.