This course has been updated! We now recommend you take the Introduction to D3.js course.
Transcript from the "d3.js Introduction" Lesson
[00:00:00]
>> Shirley Wu: To start with, the D3 ecosystem, so how many of you guys have looked at the D3 website?
>> Shirley Wu: Yes. It's got a lot of sections, it's got examples, and a whole page of tutorials, and that's really awesome, but I find it really extremely overwhelming. So hopefully today will give you the tutorials part of how to dive into it, and then hopefully from now on you'll be just coming to this page all the time, which is the D3 [COUGH] API Reference page, and then also notice all the different modules that exist, [LAUGH] for D3 and I always find that extremely like, do you guys find that overwhelming, cuz I'm like, where do I even start?
[00:00:49] When I started, I was like my, when I started, this library was a lot smaller, and even then I was like, this is overwhelming. I started in like 2012. So I've listed what I think are some of the core, at least like the modules that I use all the time, in my slide.
[00:01:08] So, I think, yeah like selections I use all the time, scales & axes, and all of these, and then if nothing else, I think the selections API is really worth reading all the way through after, so this one. After this workshop, I think it's really worth reading through the whole thing, because it goes into a lot, a lot, a lot of detail about how things are working, and how you can use them, and all of the different options.
[00:01:43] So, yeah.
>> Speaker 2: So I just asked the chat, what was their skill level between one and ten, and and there was a lot of one to threes, and just a few fives, and only one above five.
>> Shirley Wu: Okay.
>> Speaker 2: So we're definitely on the beginner skill level in terms of in the chat room, and so yeah.
[00:02:12]
>> Shirley Wu: Cool. That's perfect, because-
>> Speaker 2: Even negative ones, and negative twos-
>> Shirley Wu: [LAUGH]
>> Speaker 2: And zeros.
>> Shirley Wu: How does negative one work? [LAUGH]
>> Speaker 2: I don't know.
>> Shirley Wu: Like you're unlearning things as you-
>> Speaker 2: [LAUGH] Yeah.
>> Shirley Wu: Read through the [LAUGH], you just get confused more and more as you read through the documentation.
[00:02:29] The documentation is extremely overwhelming, because it literally gives you every single thing you need to know about every single function. But I am glad one through three. I think my slides can cater to that. Yeah, so on top of that what I want to show you is, how many people have heard of this site?
[00:02:55] Actually, I'm gonna do this. Okay, so this site is called blocks.org, bl.ocks.org, and it's kind of like, I've noticed that each different little community has their own online editor. CSS community has COPEN, and there's JSFIDDLE. So with D3 we have this thing called blocks where this is where we host, like where we do our visualizations, and then we put them up, and this is a lot of where the community goes to look at different examples with D3.
[00:03:35] And it's started by Mike Bostock, one of the creators of D3, and he has a lot of amazing examples here. I think he's like 3,000 examples or something on this website. So how it works is [COUGH] you see the visualization and then it actually gives you the code used for that visualization, usually in this index.html.
[00:04:01] So I know a lot of people use D3 by going through blocks, and finding kind of like, the visualization that they think they might need for their dataset. And then, because blocks are essentially underlying GitHub gist, so they'll fork that, and then plug in their own data, and then play around with that, and a lot of people learn that way.
[00:04:27] So blocks is definitely, especially Mike's blocks, are an amazing, amazing resource for kind of even just looking at everything that you could do [LAUGH] with D3. So yeah, keep blocks in mind, and then today, what we will be using is this thing called block builder. So this is block builder built by Ian Angelot, rapper name, who was the previous D3 instructor, and he had this idea of, since blogs are essentially just GitHub gist, why not make an online editor that's really easy to fork other people's blogs, and just edit, and you don't have to do any setups for git, or download anything, and this is what we're going to be using today.
[00:05:28] So, if you haven't done this already, make sure to sign in. Log in here, you can just log in here, and then, it's essentially, you just essentially log in with your GitHub username.
>> Shirley Wu: And then, I guess I would do that right now.
>> Shirley Wu: And this is what the editor looks like.
[00:06:00]
>> Shirley Wu: And then, the idea is, I like doing side by side mode, and then the idea is you can just,
>> Shirley Wu: And edit right in there and see the changes, and then when you press save, it will be added to kind of your own profile, [COUGH] sorry, of blocks.
[00:06:34]
>> Shirley Wu: And then the reason why I absolutely love block builder is because Ian and a few of our friends built the search function. So if you go to blockbuilder.org/search, this is essentially all 21,000 blocks said they have indexed, made searchable super quickly, with elastic search. So you can be like, I want to see all the blocks that I made with D3 version four, and today, I want to learn how to use D3 scale, and I want to only see things from Ian.
[00:07:17] Apparently he doesn't have that, okay. I only wanna see things [COUGH] from Mike. Interesting. D3 scale, so I'm gonna use this.
>> Speaker 3: Maybe it.
>> Shirley Wu: Maybe I should be doing functions, let me try that. Let me do scale linear, and then I wanna see everything that Ian has ever made with scale linear, and then you can just find one, and then look at his code and be like that makes sense, or that doesn't make sense, and then if you want to just play with it right there you can, and see what happens, and then, you can fork it, and save it.
[00:08:15] So yeah. So this is what we'll be using for all of our exercises today, and all of my code are linked to block builder, so you can play with any of the code samples I have.