Hello friend 👋

Today you're in for a treat. You're going to build a data visualization and learn about the correlation between dog size, intelligence, and weight. Very important data science!.

While you do that, you'll learn enough D3 to understand any example out there, a few tricks to quickly meet your deadlines, a scalable approach to dataviz components your whole team can understand, and a bunch of animation stuff. Because animation is cool and gets you likes on Twitter.

You can access this page forever. It's yours to keep and use as a reference when you work. I make tweaks every time I give a new workshop.

To get the most out of today's workshop, you should be familiar with 👇

React

ideas behind componentization

stateful/declarative rendering

JSX

modern ES6+ syntax

component lifecycles

But fear not!

I am here to guide you. We'll go through everything together.

Your day is structured as a codealong.

You'll hear some theory, then we'll walk through some code, you'll do an exercise, then we solve it together. Everything builds towards the final dashboard 👉 a set of scatterplots that work together.

We're gonna keep it simple. React, D3, and Chroma. No Redux or 3rd party visualization libraries. Our goal is to really understand how things work, not to talk about a thousand libraries you'll forget by tomorrow.

Question for you ❓

What do engineering salaries, an 1854 cholera outbreak, and T. Rex have in common?

Our goal today

Think of this as our setlist 🤘

Our goal today is to get you comfortable with modern React, understand D3, and have the wisdom to choose the right approach to solve your specific challenges.

❓ why dataviz? why react? why d3?

📕 when you should or shouldn't use an existing library

🆕 overview of React dataviz libraries good for a quick start

🎓 learn to understand any D3 example out there

🏎 quickly integrate any D3 code in your React project

🔧 integrate D3 and React in a scaleable maintainable way

🎣 refactoring to React Hooks

⚒ build simple animations with transitions

⚒ build complex animations with a game loop

🎨 hybrid animations combining transitions and game loops

💽 connect multiple charts to the same data

Here are some cool things I've built with React & D3

These demo well, but aren't practical. Little experiments to see how far we can push this stuff :)