API Overview

[00:00:00]
>> So let's go on to our next lesson, and so this is where we'll start on D3, and our next one is that we want to select the existing petal that we just created, and we want to be able to bind our movie data to it. And so like we talked about earlier this morning, the D3 API is like extremely comprehensive and supports a lot of the ways that we might go about building data visualization.

[00:00:30]
And that's really great, but that can also feel really overwhelming. So in my attempt at organizing all of these modules, and their submodules and functions, I've put them into the steps in the data visualization creation process, that I might use them. And I guess I should actually give context to mean in the data visualization coding process that I might use them.

[00:01:00]
So, these are all of the I think, pretty up to date. Yeah, so these are most or if not all of the modules in D3. And and so I've kind of broken them down by the modules that I might use for data preparation, and so those are things like the array modules in which they will help me to figure out the minimum and maximum value.

[00:01:31]
And then the array or collections which will help me like group my JSON objects. So it's kind of the what we have our raw data, and then preparing it to put into our layout calculation. And the second step is that layout calculation, where it might be that we want to draw a pie chart, let's not go with pie chart.

[00:02:03]
And let's say that we want to draw a tree, and so we might use D3 to calculate the path, the define attribute for the path to draw kind of like that little, link between different tree nodes. We might use D3 to calculate the positions of each of those tree nodes, and so this is the layout calculation section.

[00:02:33]
So there's a lot of different layouts that D3 will help us calculate, and get us all the positions and attributes we need to draw in the DOM. And the third section is DOM manipulation, so that's kind of making sure that the correct DOM elements are created or removed, based on the data that we have.

[00:03:00]
And then, we have some finishing touches, so, that might be D3 making it really easy for us if we have a chart to draw the axis for us. It has some support for animation, it has some support for interactions, and so that might be being able to drag different shapes in the visualization or, that might be being able to brush interacts with a brush to filter the visualization.

[00:03:32]
And so those are kind of the broad categories that I tend to think of these modules in. And today, we're going to cover these sections. So we're going to first cover this DOM manipulation part. And this DOM manipulation part is kind of the core foundation of D3, and how it works, and we're also going to talk about D3 scales, and we're going to cover a little bit of transitions for animation.

[00:04:04]
And then we're going to finish with the force layout for positioning, our flowers. And this might look like it's just such a tiny subset of the library, but actually, it really is this third one, this DOM manipulation part really is so core. That just understanding this part will make a lot of the examples that feature the other parts, all the different layout calculations or interactions, just having a good grasp of this DOM manipulation part, will make the rest of the library make a lot of sense.

[00:04:46]
And I'm not saying that like the rest of this will make sense right away. You'll still need like a little bit of patience to read through the docs for the different modules and a little bit of patience to sift through the different examples. But, you'll be able to read those example code and be able to identify what's happening and be able to figure out how to apply it, instead of kind of just copy and pasting the example code over.

[00:05:13]
So yeah, so this little bit that we'll cover really is very powerful, and will hopefully make you feel really comfortable with D3 after this workshop.