Introduction

[00:00:02]
>> Shirley Wu: Today I'm going to be doing a workshop called Data Visualization for React Developers. I'm quite excited about this topic. I think it's like a few years in the making for me. But before we start I want to introduce myself a little bit. My name is Shirley. This is a working title, I'm basically a freelancer but I've been told that freelancer has a bad connotation.

[00:00:25]
So, I'm trying to call myself an independent creator of data visualizations. [LAUGH] Let me know how that sounds. I'm also a co-organizer of the D3 user group. As well as a annual d3 unconference, which we hopefully will be getting to October or November of this year. And, like Mark said, I've previously been an instructor at Frontend Masters, so it's good to be back.

[00:00:57]
And actually, so I want this to be relatively casual, and interrupt me with questions any time during the class. I'm pretty all right with getting back on track. [LAUGH] So ask me questions any time. The whole point of this is that you can get an understanding, a good grasp of D3, Dataviz, React.

[00:01:22]
So the goal of this workshop is to use D3 to calculate the data and for React to render the visualizations. And the reason for this is because I've been told over and over again at conferences, like web conferences, React conferences, that there's a learning curve to D3. And that it's a little bit intimidating and they don't know where to start.

[00:01:46]
And I think a lot of it is because of what is at the core of, well, we all think that as the core of D3, which is data binding and enter-update-exit. And it's this kind of pattern that helps you figure out, based on your data, what elements, what DOM elements to create?

[00:02:07]
What DOM elements to update? And what DOM elements to enter, I mean sorry, exit or remove? And that's a little bit intimidating, but the secret to it is actually that enter-update-exit is basically doing what the React virtual DOM is doing underneath the hood. So basically, if we use React to do all the rendering to the DOM it means we're letting React do all of the hard work.

[00:02:40]
Whereas in D3, we have to do it all ourselves. And so that's why I think that's kind of like,
>> Shirley Wu: The really big thing about this workshop. Which is I knew we're going to talk a little bit how to use React and D3 together. But I'm not here to tell you, this is the one way that you must use React in D3.

[00:03:06]
Or this is the one way that's the correct way. The goal of this workshop for me is kind of teach you how easy it is to get into data visualization and get into D3. If we just kind of strip away the enter-update-exit part of D3, and replace it with React, and that's the first goal.

[00:03:23]
And the second goal is, I want to teach you enough about the D3 API and library, and how to go around it. Or how to use it, so that when you know when to use D3 and when to use React in your applications when you're building data visualizations.

[00:03:41]
So yeah, that's my goal for today.