Creating Charts in Canvas

[00:00:00]
>> Shirley Wu: So the code for the bar chart,
>> Shirley Wu: Is just the,
>> Shirley Wu: The data calculation part remains exactly the same. But now what we want to do is, in return we have the Canvas, and then Canvas is kind of like the group element that is the black box to React.

[00:00:29]
We just create it, and then something happens in this Canvas element, and React doesn't need to know what's happening within it. And so after we create the canvas element and componentDidMmount, I go and grab the Canvas and I get the context, the 2d context. And then I call this function called this.drawBars, and I call that same function in componentDidUpdate.

[00:00:55]
And all that drawBars does is goes through that same data object of bars, and for each of them, I just say, define the fill style. So basically define the color of whatever that I'm going to draw. And set that to bar.fill, and then fillRect(bar.x, bar.y, a width of 2, bar.height),

[00:01:28]
>> Shirley Wu: And it draws that. It's that same thing,
>> Shirley Wu: With just as easy of code. This is all it takes.
>> Shirley Wu: Yeah,
>> Shirley Wu: And then let's talk about the very, very last thing, almost there, which is this radio chart. [COUGH] And let's go through how easy it is to do that in Canvas with d3.

[00:02:02]
So again, in the radio chart, remember, we have the arcGenerator, and then in getDerivedStateFromProps, we calculate the data, and we give back the slices. The only difference here, that I want to point out, is that before, when we were returning each of the slices, I had a path string because I needed that path string for each of the SVG path elements.

[00:02:43]
But now, I'm going to return just the data object that has the startAngle, and angle innerRadius, and outerRadius. And the reason for that is because for canvas to draw to Canvas, it's a bunch of JavaScript commands instead of a path string. So d3, we just basically tell d3 what the Canvas context is, and d3 will generate all of those JavaScript commands and does all of the work underneath the hood.

[00:03:20]
So for this one, we do a componentDidMount, and we grab that Canvas context, so we define it here as this.refs.canvas, and I say getContext('2d'). And then I'm going to define a drawSlices function, and I'm going to call that.
>> Shirley Wu: And I'm also going to do the same thing in componentDidUpdate, this.drawSlices.

[00:03:56]
And then in here, we're going to do something very, very similar to the bars, where we loop through each of the slices.
>> Shirley Wu: Sorry, and then right here, after we've defined the context, we have to tell the arcGenerator, tell the d3 arcGenerator the context that it's going to be drawing on,

[00:04:25]
>> Shirley Wu: So that D3 knows which Canvas to give the JavaScript commands to.
>> Shirley Wu: And then we just need to go through each of the slices. So this is a forEach, not a map.
>> Shirley Wu: And we say, hey, Canvas, set my fill to the fill that I have from my data and then begin a path.

[00:05:09]
>> Shirley Wu: And then all I have to do is save this,artGenerator, and I pass in my start angle and angle etc., all of that calculation I did above, the arc data right here. And then I say, okay, after you've loaded up all of those Canvas commands, of whatever move to's and line to's that you have to do, then fill that with the correct color.

[00:05:41]
And if I did it correctly, yes! There we go!
>> Shirley Wu: That's all it takes with d3 in Canvas. So I drew that, and you might notice that, again, it's right here, it's the 00 is right here. So for this one, we just have to tell the Canvas context, hey, translate by width and height.

[00:06:11]
So let me go do that, translate width five by two, height divided by two, and then we have that again.
>> Shirley Wu: Not very much a code to convert from SVG to Canvas, and the huge gains in terms of performance.