Introduction

[00:00:00]
>> Shirley Wu: So this workshop is called Building Custom Data Visualizations. My name is Shirley, and I'm an independent creator of data visualizations. And I'm a co-organizer of barrier d3 user group and the annual d3.unconference, which is usually in the fall, and please check it out if you're interested. And I'm also an instructor on Frontend Masters.

[00:00:30]
So I have a few different workshops on Frontend Masters, and I want to go through this with you today. So yesterday, I did the workshop called Data Visualization for React Developers. And so that one, the goal for is for people that are coming from a very strong Frontend React background, but don't yet have any database D3 background.

[00:00:57]
And I wanted a slow, sort of gentle introduction into D3, into Data Visualization, without getting caught up in the details of what a lot of people are intimidated by in D3, which is kind of the data binding, enter, update, exit patterns. And then once they get through that they can check out the introduction to D3 workshop.

[00:01:25]
And in that one I cover what we consider the core parts of D3, which is that data binding, interrupt data exit, and all of that, and then hopefully teach people how to look into D3 [LAUGH] API. How to read through the API, how to read code samples. And I'm so excited about today, because originally I was considering doing something that was like advanced D3.

[00:01:56]
But then as I thought a lot more about what an advanced D3 workshop would be, it felt like it would be kind of an enumerating and going through the D3 API. And maybe we'll build forest layouts in these different ways, we'll build trees in different ways or something.

[00:02:14]
And I felt like that just wasn't as much of a productive use of our time, cuz I feel like that sort of thing just comes with practice. The intuition of how to use different parts of the library and how to read the library documentation, etc, just comes with practice.

[00:02:30]
And so instead I really thought about, what do I want people to be able to get out of this workshop? If not advanced D3, what is it that I want to teach people? And then I realized one of the hardest things I had in these few years of building data visualization is, I come from a computer science background.

[00:02:55]
I come back from a Frontend engineering background, and I got into data visualization with D3. And so I understand the code part of building data visualizations, but what I didn't realize until maybe a few years in, is how important all of the other parts of building data visualizations are.

[00:03:14]
So where to get data sets, how to explore that data set, and explore that for some sort of a message, or insight, or something you're trying to communicate. How to design around that, and then how to turn that design into the code, which is the part that, as Frontend developers on Frontend Masters, we're probably really good at.

[00:03:38]
I feel like the code part is probably quite trivial as soon as you get a good design to translate into the code. So today I want to concentrate a lot on, or give equal parts to the data, the design, and the code. And so that is the goal for today.

[00:03:59]
And if you've been here in the other workshops or if you've gone through my other workshops you might realize there is some overlap between all three of these workshops. So I want these workshops to be able to stand on their own, but there is going to be some overlap, so please be patient with that.

[00:04:21]
And then if you're coming, not from React but from elsewhere, my recommendation is to go from Intro to D3 to this workshop. And then, actually it might be good to look at kind of the tail-end of the React Developers workshop. Because in that part, I covered very briefly how to do interactions between different visualizations, what we call linked visualizations, and it's kind of harder to do that with just Vanilla JavaScript and D3.

[00:04:51]
But with React or with these sorts of frameworks, they make it really easy to be able to do interactive visualizations. So that's my recommendations for the workshops I have on Frontend Masters.