React for Data Visualization (with D3) - workshop by Swizec

Hello friend šŸ‘‹

Welcome to Swizec's React for Data Visualization (with D3) workshop.

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 :)

No, these projects are not practical, but they demo well :)

Swizec Teller

Hi, Iā€™m Swizec Teller, a geek with a hat. I help programmers become software engineers. Through this workshop I'm going to teach you all I know about building data visualization with React & D3.

You can find out stuff about me, if you ask Google. But generally speaking I have:

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

You understand them better with datavisualization!

Salary visualization shows who and where makes the most

John Snow's cholera map shows link between disease and drinking water

Datasaurus show summary statistics aren't the whole story.

Let's get down to business

This is an interactive workshop. If you have a question, ask. If something doesn't make sense, ask. If something is confusing, ask. If I'm not making sense, ask. If your code doesn't work, ask.

You will write code today. Some code will live on your computer, some in the browser.

We will take breaks.

But first ask yourself this: Why are you here?

Answering that question will help you get the most out of today. You can call your answer out to the group, or just think about it.

Code you'll write today works with React 16 and uses modern ES6+. We'll assume a development environment created with create-react-app. This gives us some special powers. I will point them out.

Here's our setlist for today šŸ‘‡


šŸŽŠ Fin

Before you leave please take a minute to answer this feedback form. It helps me improve.

I'll give you free access to in return. :)


~ Swizec