Shape

[00:00:00]
>> Let's move on to our final lesson. And that is that we want to position the film flowers that we created by all the genres that they share. So, so far we've kinda talked about how to create DOM elements with D3, how to update the DOM and we dabbled a little bit into positioning things with D3 scales.

[00:00:27]
And that's really nice when all we need to do is translate from our raw data directly into like an XY position, but sometimes we want to visualize something a little bit more complicated and that's when D3 has a lot more modules to help us with that. So I'm going to highlight a few of my favorites and this is definitely not everything.

[00:00:52]
If you remember that I showed that whole big chart of different modules, and you can reference that to see what else helps with the layout calculation. A few of my favorites is d3 shape. And so d3 shape functions what it does is it helps us calculate the path strings that we might need to draw line charts, area charts, pie charts, etc.

[00:01:22]
Because now that we've learned how to create shapes with SVG, and now that we've learned the paths, strings work, we knew like how cumbersome it might be to, let's say, like figure out the path to like code the path string For this line of like all these like jagged little up and downs.

[00:01:48]
And we could probably imagine the work that it's going to take to draw all those like curves and arcs in a pie chart or if this is an area chart or like if any of these lines are actually a little bit more curvy, that's going to take a lot of work too.

[00:02:07]
And so d3 has all of these different shape functions to help us with that. So here, just scrolling through the reference for all of the kind of different shapes that you could create, and the part that I really wanted to point out is that for each of these, often times they will provide an example.

[00:02:41]
Sorry for all the scrolling but let me try and get to one. Actually, let me look at d3 lines and you will actually have a link to examples. And so if you're like confused as to how to use that module, watch out for this in the reference and then it will kind of explain in this observable notebook and how to use d3 line, all of the different examples.

[00:03:19]
And, Yeah, so there's all these kind of different applications of different shapes that you can use. And I also want to make a note that a lot of the d3 examples like this one has moved to observable. And so if you actually go to the d3 account on the observables so it's like /@d3.

[00:03:42]
It has apparently 400 something notebooks of examples. And the really nice thing is that they've actually kind of grouped all of these examples by the module. So, the module that we were just in is this d3 shape. So you can go in and you can take a look at all of these different examples and you can like click in and you can look at the cell with all the code.

[00:04:08]
And now that you're more familiar with observable you can probably dig in and like look out what's happening with the data and then you can hopefully put together so they are doing the scales. They're creating the scales in different cells. You can hopefully go through the observable notebook and figure out how they're using that particular d3 example.

[00:04:35]
So again, I am for d3 shapes, you might have let's say, an array like this. This is the raw data array for Apple's daily closing price and it just has the date and the venue. And then in this example, we're passing that data array into d3 line and we're getting back this path string and we're putting that path string.

[00:05:00]
I am on this kind of path element, and we're adding some axes and that's how we get the line chart below.