Check out a free preview of the full Building Custom Data Visualizations course:
The "Code Solution, Part 2" Lesson is part of the full, Building Custom Data Visualizations course featured in this preview video. Here's what you'd learn in this lesson:

Continuing with the previous coding solution, Shirley refines her chart by adding curves and a color scheme.

Get Unlimited Access Now

Transcript from the "Code Solution, Part 2" Lesson

[00:00:00]
>> Shirley Wu: But spikes aren't as much my thing. So [LAUGH] I like things a little bit smoother. So what I wanna show you right now is a D3 area. In fact, a lot of these shapes have this thing called curves where you can specify. So each of these are the points and then we'll draw the line between them, but how much of a curve do you want?

[00:00:26] And I think the one that I tend to like is this one. I'll be honest, I don't really know what each of these curves mean. They have very interesting names that I think are probably really meaningful, but I don't really know why they're meaningful. But I'm going to use curved catmull ROM, cuz I find that they make nice curves for me.

[00:00:49] And so go back to that area generator where we specify the x, y1, y0 and then pass in this curve. D3.curveCatmullRom and then you'll see that it makes really nice non-spiky curves, and that's it. That's all it took to draw the curves and you'll notice we're missing one last thing, which is the right colors.

[00:01:21]
>> Shirley Wu: So that would be the fill. And for each of them, we're going to view using the color scale and passing in the genre. And then you might have guessed by now that if you do that, there's going to be a lot of overlap and you might not be able to tell the difference between some of the movies that overlap.

[00:01:37] So for now, I'm just gonna give it a white stroke, so that we can tell them apart and there we go. We got the curves and is it fair to say that it was actually pretty easy to get the curves for each of the months? I'm glad. And so this is another example of the area generator wasn't, the examples that the documentation give you for the area generator definitely doesn't look like this.

[00:02:09] And it took a little bit more munging of the data, like it took a little bit of massaging of the data to create a little bit of fake data to get to this. But I want to show you, this is another way that you can kinda take what's given and be creative with it.

[00:02:29] So yeah, so this is the curves. The one for the each movie.