React and Bar Chart Solution

[00:00:00]
>> Shirley Wu: Now let's draw a bar chart together. So this actually,
>> Shirley Wu: Should actually be much more straightforward than all of our other previous examples. So let's take the data calculation we did earlier. So this whole part,
>> Shirley Wu: Let's just copy that over.
>> Shirley Wu: Get that into getDerivedStateFromProps.
>> Shirley Wu: And then we're gonna say, I'm going to, instead of returning the array of bars, I'm going to return instead,

[00:00:55]
>> Shirley Wu: I'm gonna save it in variable bars and I'm going to return that so that I get the data as state and that I can access it in render. So if I do console.log(this.state.bars), now you can see console.log. The state has bars and the bars are exactly what we calculated before.

[00:01:23]
>> Shirley Wu: And so now that we have that, all we have to do is create a rectangle element for every single one of those.
>> Shirley Wu: So then what that will look like is, in React, I have my SVG element. Let me get my closing tag. And so we just want to create a rectangle for every single one, so this.state.bars.map.

[00:01:54]
So loop through each of the bars.
>> Shirley Wu: And then create a rectangle element for each of those.
>> Shirley Wu: And you can see that there's nothing being drawn right now because a rectangle element needs a width. So d.width, a height, a d.height.
>> Shirley Wu: Does it say?
>> Speaker 2: You want some brackets?

[00:02:30]
>> Shirley Wu: this.state.bars has to be wrapped in brackets, the whole thing.
>> Speaker 2: Thank you so much.
>> Speaker 2: That makes sense, right?
>> Shirley Wu: So I'm wrapping it in.
>> Speaker 3: That read map of undefined, so it doesn't think that state.bars is a thing?
>> Speaker 2: Did you put bars in your state above, cuz it's empty.

[00:03:06]
>> Shirley Wu: Thank you so much.
>> Shirley Wu: Okay, so now, you should hopefully, okay, we still can't see them. d.width, wait, no, because I don't have d.width defined for width. I'm just gonna give it 2. And then now you can see just these little, thin black lines over here.
>> Shirley Wu: Okay, so now we have the x position, so you can now see all of the bars, but not placed correctly in the y direction, so let's put that in there.

[00:03:58]
>> Shirley Wu: And now it's in place correctly. And then one more thing. Obviously, we've calculated the fill for each of these bars. Let me get it onto two lines. And tada, that's all it took. It took longer than it should have because I missed some things. But that's all it took for us to return the bars as part of the state, and then for us to draw a rectangle element for each one of the bars objects.

[00:04:31]
And then the fun thing about this is, how do, I hold on. The very fun thing about this is as long as I have this, because it's React, if I just update it to New York, it updates it correctly. And I don't have to bother with managing elements to enter, managing elements to exit, managing elements to update like I would with D3.

[00:05:13]
With these few lines, I just get this for free. So that's all it took. And that's why I'm really excited about doing React and D3 together. This is one of the places I feel React and D3 go together so, so well. And then what I do want to show you, so this is the part I was talking about about where to put the calculations, but I also want to show you the architecture really quickly.

[00:05:45]
So this is the chart component itself. It manages the data calculations. It manages the rendering. We don't have any interactions, so it doesn't manage that, but I also want to show you App.js. And all App.js does is it manages a object of temperatures. And this one, when it gets filled in, it's basically, I go and fetch all of my data.

[00:06:15]
So I just have my datasets in the public folder under sf.json and newyork.json. You can imagine right here in componentDidMount, you could probably do something else with any APIs that you might have. And then I set the data I get back, which are just in JSON format. I set that onto the temperature.

[00:06:40]
The temps attribute in the state. I also remember which city is being shown right now. So this,
>> Shirley Wu: This drop-down is being remembered here. And all that happens,
>> Shirley Wu: In the render is, first of all, I have a select for the drop-down, where I can choose either SF or New York as the city.

[00:07:17]
And then what I do is I say, well, the data that I want to be rendering in each of these charts is get the city that's selected, and then get the temperatures for the city that's selected. And then I pass that into the BarChart and the Chart. And then that gets calculated and in the Chart.js.

[00:07:46]
And that gets rendered in Chart.js. And that's,
>> Shirley Wu: That's how it's working, yeah. So quite straightforward.
>> Shirley Wu: And then depending on your needs, you might just build on top of these kinds of examples. But I think at the very basic, it's just as simple as that, having the root manage the data and the state, and then passing that data down into your chart components.