Stop copy pasting D3 examples,
create data visualizations of your own

Learn how to build scalable dataviz components your whole team can understand with React for Data Visualization.

So you want to build a beautiful data viz. You've got data burning a hole through your pocket, an idea for a juicy story, and your boss or client are waiting for results.

You want something that looks great, works in the browser, performs on mobile, lets users interact with their data, syncs across an entire dashboard, and works as building blocks for future projects.

Cool ... now what?

I remember building my first data visualization back in 2012. Visualized my coding habits from GitHub data.

I was so proud! Only took me a week. šŸ’Ŗ

"I've tried D3 in the past, found it powerful but a bit confusing to use"

Dynamic data visualization for the web is a pain in the ass you see. Harder than it looks.

Yeah sure anyone can build a chart in google docs but that's not what you're after is it? You can't build a product on top of google sheets. You definitely can't feed in dynamic data from an API, personalized to the user, and let them navigate and explore.

You've heard people build these amazing things with D3. The New York Times uses it, The Guardian does, so do Netflix, Uber, 23andMe, Visa, Walmart, and many others. I know because they've been to my workshops ;)

You hunt the web for examples and omaigod what is this!? How the hell is D3 doing that? šŸ˜³

That's a bar chart by the way. You'd never guess just looking at the code. I've been doing this for years and I still have to simulate D3 examples in my mind to figure out how they work.

You decide that's too much and look for a library. Something easy you can use to finish real quick.

You find a bunch of libraries built on top of D3. Some even combine React and D3. Perfect for any modern web project!

You cobble something together and call it a day. Job well done.

Libraries are hard to customize

Your boss takes one look and says "Ok but can you make it follow our style guide?"

Errr ...

Okay okay, some CSS, a little trickery, tweak the arguments and you got dis. Crisis averted!

"I don't like how this animation looks"

"Can we tweak that margin?"

"Make those bars taller"

"Add a line chart and I want tooltips to show up on all 5 charts when I mouse over the same data point"

Now you're in trouble buster.

You used a library and those always break down when you start customizing stuff. At some point you spend more time fighting the library than building your data visualization.

Time to learn D3.

"There are way too many shitty resources on D3 floating around on the interwebs, and frankly, the D3 docs are shit too because they're WAY TOO COMPLICATED AND VERBOSE for someone that just wants to understand how it works and get shit done."

You can do what everyone else does: Copy paste some examples that look like what you're building, make some tweaks, and hope for the best.

You're not proud of your code and you're not quite sure how it works, but it works and that's what matters. Right?

Yep that works until you have to change something. Or explain how it works to another engineer on your team so they can fix a bug.

God forbid you come back 6 months later looking to fix a thing or add a feature. Time to re-study all of that code and figure out how it works.

ugh

94+ Full HD videos

Watching code appear before your eyes makes it easier to understand.

"without it I'm stuck using stack overflow in a disjointed, incorrect mess"

You can avoid all that and learn how to build scalable and reusable dataviz components your whole team and future you can understand with React for Data Visualization.

Get the confidence you need to excel and build anything you can imagine. šŸ’Ŗ

React is the biggest revolution in JavaScript programming since jQuery hit the scene 10 years ago, and D3 is unlike anything you've seen before.

The problem comes from how most of us first learn to code. "It's like a cooking recipe", teachers will say.

Take a bell pepper and cut it up. Then sprinkle some salt and pepper, add olive oil, and voila: you have a refreshing salad. A very simple salad with a single ingredient, but a salad nonetheless. You can follow along and eventually you will understand what the code does.

That's imperative programming. It reads as a series of steps. How to do something.

React and D3 are declarative. You don't write How you want your code to work, you write What you want to achieve. Your bell pepper salad recipe looks more like this:


  <Salad>
    <Oil />
    <BellPepper cut salted />
  </Salad>
  

You look at that and you know it's a salad. It involves oil and bell peppers. You don't have to read the steps to know the result. The recipe declares what it's making.

Declarative code makes your project cleaner and easier to maintain. Means more time creating value for your users and clients.

But learning how to think declaratively is hard. It starts like voodoo magic. We've all been there. It still hurts my brain sometimes.

That's why React for Data Visualization starts with small building blocks then builds up to entire dashboards. Learn the basics in about an hour, then dive as deep as you want

Why use React and D3 for
data visualization

I believe React combined with D3 is the best thing that's ever happened to data visualization on the web.

React's approach to components makes your code more reusable, its advanced algorithms make it fast, and D3 has the best tools for dataviz. Together they represent two of the most popular JavaScript libraries on the web.

Watch some of my conference talks for a sneak peek šŸ‘‡

The talk shows a proof of concept approach to making fancy animations with React and d3js - a Space Invaders game. I explain the basic approach, where I got the idea, and show off some code.

This talk is more hands on. I show how the animated alphabet, particle generator, and talk about the benefits of componentization when it comes to building modern data visualization.

You don't have to watch the whole talk, it's all in React for Data Visualization.

React for Data Visualization is designed for busy people like you

React for Data Visualization gives you a quick overview of the basics to get you started, followed by a deep dive that solidifies your knowledge through varied projects and examples. Build working code that you can show off to your friends, boss, and coworkers.

Learn the basics with interactive examples right in your browser ā€” no need to install anything. Forget about Npm and Webpack and Babel and Node. Just React and D3.

Dive into complex projects that teach you how it all fits together. Build interactive visualizations, create animations, and build fast performance with canvas. Learn everything there is to know about building beautiful apps with React and D3.

From the very basics of React and D3, to state handling with Redux and MobX, React alternatives like Preact and Inferno.

And the best part?

It's all cut into bite sized pieces. Whether you've got 5 minutes or an hour, you can get through this course. That's a promise.

Start with the building blocks

1.) Start with the basics. Right in your browser.

2.) Learn about blackbox rendering with a reusable axis component. Teaches you all about giving up control, using higher order componnents, and more. You can use this approach to render *anything* inside your React app. Even Vue.

3.) Learn full integration rendering with a scatterplot. Use the axis from before, add a bunch of data, then go as far as usinng render props to make your scatterplot shine.

4.) Both times youre learning how to make your components reusable. Plug-and-play buildign blocks for your team.

5.) Jump into animation with game loops where you learn about havign full control, how to think in frames andn movement. Youll be suprrised how powerful this can be.

6.) When full animation is too much, youll need transitiosn. Learn about keyframes and easing functions and makign your animation look antural and smooth.

React for Data Visualization builds on practical examples

An interactive choropleth map

shows you how to work with topographical data, draw maps, and census regions. We implement zooming and map exploration.

An interactive histogram

teaches you some of D3's statistical functions, and the basics of drawing charts. Drawing shapes, adding axes, parsing data ...

Interactive dashboard

Together they form an interactive dashboard where multiple charts share data, react to common controls, and act together to give users a full picture.

A swipe transition

A swipe transition teaches you about building transition-based animation. Flip a boolean, see complex animation.

An animated alphabet

An animated alphabet teaches you about creating enter/update/exit transitions. Animate elements coming in and out of your data visualization.

A particle generator

A particle generator teaches you the basics of using Redux for state management, pushing your browser to the limits, and animating tens of thousands of elements.

An interactive billiards game

An interactive billiards game teaches you about rendering graphical React components onto HTML5 canvas, making them interactive, and using MobX for state handling.

A dancing pythagorean tree fractal

A dancing pythagorean tree fractal teaches you about component recursion. We use it to compare differences between React, Preact, and Inferno.

TABLE OF CONTENTS HERE
$49
Basics course
A quick intro to D3
How React makes D3 easier
Quick React+D3 integration
Scalable dataviz components with full integration
Downloadable PDF/epub/mobi
3 extra projects you can use as a cookbook

Money-back guarantee
Yours forever
$249

FULL COURSE

+ consultation

30min consultation where we discuss your usecase
A quick intro to D3
How React makes D3 easier
Quick React+D3 integration
Scalable dataviz components with full integration
Detailed walkthrough of a large dataviz dashboard project
Game loop animation
Animating with transitions
Enter/update/exit animation
Redux and MobX basics
Rendering to Canvas
Refactoring to React Hooks
Downloadable PDF/epub/mobi
14 extra projects you can use as a cookbook

Money-back guarantee
Yours forever
$149
FULL COURSE
A quick intro to D3
How React makes D3 easier
Quick React+D3 integration
Scalable dataviz components with full integration
Detailed walkthrough of a large dataviz dashboard project
Game loop animation
Animating with transitions
Enter/update/exit animation
Redux and MobX basics
Rendering to Canvas
Refactoring to React Hooks
Downloadable PDF/epub/mobi
14 extra projects you can use as a cookbook

Money-back guarantee
Yours forever

Try a free chapter

See what React for Data Visualization is like and learn some basics.

Free Chapter šŸ‘¾ and Email Crash Course šŸ’Œ

Leave your email
get a free sample of React for Data Visualization and an email crash course.

    No spam. Unsubscribe any time.

    Powered By ConvertKit

    About the Author

    Hi, Iā€™m Swizec Teller. I help coders become software engineers.

    Over the years I've helped over 10,000 engineers hone their craft. People from Uber, Oracle, Apple and many others have used my books, articles, and talks to improve their technical skills, get promotions, change jobs, and ship their products faster.

    Story time šŸ‘‡

    React+D3 started as a bet in April 2015. A friend wanted to learn React and challenged me to publish a book. A month later React+D3 launched with 79 pages of hard earned knowledge.

    In April 2016 it became React+D3 ES6. 117 pages and growing beyond a single big project it was a huge success. I kept going, started live streaming, and publishing videos on YouTube.

    It's 2017 now and after 10 months of work, React+D3v4 is the best bookI've ever written. 249 pages, many examples, much code to play with. It's designed like a step-by-step course so you can follow along without breaking a sweat.

    I based React+D3v4 on 20 years of experience with learning how to code on my own, reading blogs and articles, listening to professors, and working with mentors. Yes, that means I wrote my first program when I was 9. I've been doing this all my life and that's why I know every learning techniqueinside and out.

    Some of my work has been featured in šŸ‘‡

    94+ Full HD videos

    Watching code appear before your eyes makes it easier to understand.

    $49
    Basics course
    A quick intro to D3
    How React makes D3 easier
    Quick React+D3 integration
    Scalable dataviz components with full integration
    Downloadable PDF/epub/mobi
    3 extra projects you can use as a cookbook

    Money-back guarantee
    Yours forever
    $249

    FULL COURSE

    + consultation

    30min consultation where we discuss your usecase
    A quick intro to D3
    How React makes D3 easier
    Quick React+D3 integration
    Scalable dataviz components with full integration
    Detailed walkthrough of a large dataviz dashboard project
    Game loop animation
    Animating with transitions
    Enter/update/exit animation
    Redux and MobX basics
    Rendering to Canvas
    Refactoring to React Hooks
    Downloadable PDF/epub/mobi
    14 extra projects you can use as a cookbook

    Money-back guarantee
    Yours forever
    $149
    FULL COURSE
    A quick intro to D3
    How React makes D3 easier
    Quick React+D3 integration
    Scalable dataviz components with full integration
    Detailed walkthrough of a large dataviz dashboard project
    Game loop animation
    Animating with transitions
    Enter/update/exit animation
    Redux and MobX basics
    Rendering to Canvas
    Refactoring to React Hooks
    Downloadable PDF/epub/mobi
    14 extra projects you can use as a cookbook

    Money-back guarantee
    Yours forever

    FAQ

    IS REACT FOR DATA VISUALIZATION FOR ME?
    WHICH PACKAGE SHOULD I CHOOSE?
    coming soon
    I DON'T LIKE REACT. IS REACT FOR DATA VISUALIZATION STILL USEFUL?

    Yes! You can apply the core ideas behind React for Data Visualization to any modern framework. Angular, Vue, or anything else that aims to separate business and rendering logic with a declarative approach.

    WHAT IF I HATE YOUR COURSE?

    Send me an email and I'll click the magic refund button. You even get to keep the downloadable resources.

    How does this compare to React + D3v4?

    A lot of the underlying principles are still the same. I've updated a lot of the code itself so it fits modern React and D3 versions. There's a whole new chapter on React Hooks. Also a chapter on existing React+D3 libraries to help you decide if you'd prefer using a library instead of rolling your own.

    I also discovered a new hybrid approach to transitions/animation that I'm adding a chapter for this week. And I plan to add a chapter on React Native and WebGL. There's also a new section with 14 cookbook-like projects you can explore.

    Oh and most everything comes with video now. About 9 hours of video content for the core content and another 10 or so for the cookbook projects.