D3.js Ecosystem & Resources

[00:00:00]
>> To create these flowers, we have these kind of seven different actions and then, and within those some key takeaways that will help us cover SVG and D3. So the first is to just draw a flower petal onto the screen. And for that we'll use SVG paths, and so about one we'll be able to learn about SVG coordinate system and SVG paths.

[00:00:30]
And in particular the D or define attribute on SVG paths. Then we're going to use D3 to select that existing petal, and bind the movie data. And for that we'll be able to learn about D3 selections, data binding, and setting attributes and CSS styles. Then we'll create a petal for each movie.

[00:00:57]
And, when we do that, we'll learn about D3's enter append pattern, and we'll also learn a little bit more SVG, we'll learn about SVG transforms, and in particular the translate command. And once we have a petal drawn for each movie, what we're going to do is then we're going to render it based on all of the data.

[00:01:25]
So we'll use D3 scales to translate our data to what we need to draw onto the screen. And so we'll use D3 min, max, extend, D3 scales, and also the scale function for SVG transforms. Once we have all of the data mapped to our individual petals, we'll learn about nesting with D3 selection, so turn each of those petals into flowers of their own.

[00:01:54]
And we'll also use SVG rotate or transforms rotate to do that. And then towards the end, we will learn about how D3 does their update and exit pattern. And what this is, or oftentimes what you'll probably have is, data sets that change. So, if you have one state of data and then maybe something happens, maybe this is like a real time updating data set.

[00:02:27]
And so you'll have like a next state that you're trying to go to, and then when that happens with D3, there's something called the Enter update exit pattern. And that's how you update the DOM, the browser DOM, to update it from what was rendered for that first data state to the next data state.

[00:02:56]
And that's when we'll also learn about D3 transitions. And that's kind of D3's version of animations or not version, but it's D3's implementation of kind of animations. So we'll animate from that first state data state to the next data state. And finally we're going to learn a little bit about D3's, many, many variety of ways to kind of lay out the data.

[00:03:27]
So we'll have like a very brief overview of D3's shapes and hierarchies. And then we'll use the D3 force layout to position our film flowers by the genres. So this will hopefully be like a good kinda high level overview of the D3 library, so that by the end you'll feel pretty comfortable digging around in different parts and most importantly, there's a lot a lot of examples in the D3 community.

[00:04:00]
So, you'll hopefully feel very comfortable digging into each of these examples, reading the code and understanding exactly what is going on. And, So a little bit of resources, and kind of data visualization ecosystem. So here is the D3 API reference. As [LAUGH] I mentioned earlier, so these are all the different modules that you're seeing on the screen right now.

[00:04:32]
And then if you like, scroll through, I personally find it a little bit overwhelming, but we'll kind of cover how to go through this API together. So there's, it just has a lot of really great functionality but, I'm just showing this to you don't get yeah. But this is kind of how the doc is structured, and I think it'd be really helpful to kind of take a look at this later, to figure out what is going on.

[00:05:16]
And the next really great resource is, as I mentioned earlier, with D3 ecosystem, there's a lot of examples that have been built a lot of like little bite sized examples that have been built. And when D3 first started in 2011, a lot of these examples were hosted on this website called blocks bldocs.org.

[00:05:42]
And you can see these are some of the popular ones, and I think there's something like 40 or 50,000 of these examples, so if you want to take a look, It used to look something like this, where you'll have kind of a preview of the code. And, Gosh, so you'll have a preview of the code.

[00:06:15]
And then here, you'll have the index HTML. And so basically this is what's being rendered up here in the preview. So this is how we used to kind of like look at D3 examples for a good number of years. So this is the D3 code, and then we will kind of like look at this and play around with it to figure out what's going on.

[00:06:48]
And then I think two years ago or so, Observable was launched, and let's see if I can give you the home view, Let me show you the home view. So yeah, so Observable is well they describe themselves I think as a magic notebook for data and visualization I think is how they describe themselves.

[00:07:29]
Explore and visualize data, discover and be inspired. Yeah, so this is kind of a lot of where the D3 examples are hosted now. If you look at the docs and For kind of a lot of the D3 functions if you see an examples link right next to that function, it will usually lead to an Observable notebook.

[00:07:53]
And I think of Observable notebooks a little bit like, if Jupyter Notebooks were on the web, and built for instead of writing in Python you write in JavaScript, and built for visualization. So, that's what we're using today. And, I think another note I should mention about Observable is that I think the key difference is that whereas, my understanding of other notebooks is that each cell is evaluated in a like top down order.

[00:08:35]
So, whatever cell comes first is evaluated first, Observable notebook is, I believe, evaluated I think they call it reactively. So, there's a dependency chain of cells and whatever is at the top root of that dependency chain is, evaluated first and then going down. So actually I've gotten questions where people were a little bit confused about where the like requires where or the imports where.

[00:09:09]
So, I have a lot of those down here. And that's just because the cells can be in any order that I want. So, I like to just order my notebook with all of the information up top, and kind of all of the utility functions at the bottom. So if you ever get lost in any of these notebooks and you're wondering where something is happening, oftentimes a might be at the bottom, so I just wanted to give that now.

[00:09:42]
And for observable, I wanted to give a small disclaimer that as of right now for like the next few months, I have a partnership with Observable to create a certain number of notebooks. But, I also want to say that I've been using the Observable for the last two and a half years and I will have created this workshop with observable anyways.

[00:10:05]
So just a small disclaimer but also that I would have just used it anyways. And the last two are more kind of like community resources. So, there is a D3 slack and where you can kind of ask questions about D3. And then there is a wider data visualization society, and they aren't D3 specific.

[00:10:33]
But I think there's a lot of people knowledgeable of D3 in their slack also. So I think both would be great resources for, if you're really stuck on D3 and you want some help, I think those places would be great places to ask, so yeah.