Skip to content
Student Login

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 - updated for 2020

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.

scatterplot finished

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? 😳😳

spaghettiImg

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.

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

    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.

    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.

    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

    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.

    A Learn with Jason episode where in just an hour we built an animated scatterplot from scratch and proved React-based D3 visualization works great with Gatsby. The dataviz rendered statically at build time.

    pshot3

    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.

    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 transitions. Learn about keyframes and easing functions and makign your animation look antural and smooth.

    A piechart transitions to a barchart

    Shows you how to use hybrid animation for data-driven effects. Even transitioning between different visualization types.

    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

    ▶ Introduction (14:22)

    Hello new friend 👋 (6:08)
    What you need to know (2:16)
    How to approach React for Dataviz (3:16)
    Why React and D3
    Buzzword soup explainedr
    JSX
    What you'll build (2:30)

    ▶ A quick intro to D3 (17:15)

    3 key insights to learn D3 from scratch (2:23)
    Data vs.DOM manipulation (6:07)
    Scales (4: 12)
    D3 layouts (1:41)
    Recap (1:49)

    ▶ How React makes D3 easier (11:46)

    React + D3 = ❤️ (4:53)
    What about existing libraries? (2:13)
    Victory.js (1:04)
    Recharts (0:54)
    Nivo (1:11)
    VX (1:07)
    When you shouldn't use a library (1:14)

    ▶ Quickly integrate any D3 code in your React project with Blackbox Components (17:29)

    The idea behind blackbox components (0:57)
    A quick blackbox example - a D3 axis (3:36)
    A React + D3 axis (5:19)
    A D3 blackbox higher order component - HOC (2:26)
    D3blackbox magic trick - render anything in 30 seconds (5:11)

    ▶ Build scalable dataviz components with full integration (24:02)

    The approach (1:52)
    When props don't change - a scatterplot (9:26)
    A scatterplot When props do change (6:36)
    Making your components more flexible with render props (6:08)

    ▶ You're awesome

    💪

    ▶ A note about state and app structure (2:59)

    Handling state in your React app (0:48)
    Basic architecture we'll use (2:11)
    What about React Context? Redux? MobX?
    How to structure your app
    Congratz!

    ▶ Set up a local environment with create-react-app (1:53)

    Local environment setup
    Start with create-react-app (1:10)
    What you get
    Install extra dependencies (0:43)

    ▶ 176,113 tech salaries visualized – a dataviz dashboard (2:54)

    176,113 tech salaries visualized (2:54)

    ▶ Show a Preloader (6:47)

    Show a Preloader (1:11)
    Step 1: get image (0:43)
    Step 2: make component (2:01)
    Step 3: Update App (1:20)
    Step 4: Load styles (1:32)

    ▶ Load and parse your data (8:26)

    Asynchronously load data
    Step 1: Get data
    Step 2: Prep App.js (2:13)
    Step 3: Prep data parsing functions (1:46)
    Step 4: Load the datasets (2:02)
    Step 5: Tie datasets together (1:11)
    Render a choropleth map of the US (0:11)

    ▶ Render a choropleth map of the US (20:14)

    Step 1: Prep App.js (3:54)
    Step 2: CountyMap index.js (0:44)
    Step 3: CountyMap CountyMap.js (11:56)
    Step 4: CountyMap County.js (2:03)
    A map appears 🗺 (1:26)

    ▶ Render a Histogram of salaries (22:57)

    Render a Histogram of salaries
    Step 1: Prep App.js (2:24)
    Step 2: CSS changes (0:27)
    Step 3: Histogram component (11:39)
    Step 4: HistogramBar (sub)component (4:00)
    Step 5: Add an axis (4:04)

    ▶ Make it understandable with meta info (20:47)

    Add meta info
    Dynamic title (9:25)
    Dynamic description (2:58)
    Overlay a median household line (7:47)

    ▶ Add user controls for exploration (18:46)

    Add user controls for data slicing and dicing (1:10)
    Step 1: Update App.js (3:49)
    Step 2: Build Controls component (4:26)
    Step 3: Build ControlRow component (3:30)
    Step 4: Build Toggle component (2:39)
    Step 5: Add US state and Job Title filters (3:12)

    ▶ Make it work in the real world (4:56)

    Add rudimentary routing (1:51)
    Prep your app for launch
    Twitter and Facebook cards and SEO
    Use full dataset (3:05)
    Launch! 🚀

    ▶ Animation (2:06)

    Intro (0:51)
    Using a game loop for rich animation (1:15)

    ▶ A bouncy ball game loop animation example (6:46)

    Step 1: stub out App and Ball
    Step 2: Stub out BouncingBall (1:11)
    Step 3: Rendering
    Step 4: The Game Loop (3:09)
    Step 5: Correcting for time and frame drops (1:18)
    Game loop recap

    ▶ Use transitions for simple animation (0:27)

    Transition basics

    ▶ Build a swipe transition component (7:58)

    A swipe transition component (0:47)
    App.js
    Ball.js
    Ball.js state transition (6:31)

    ▶ Enter-update-exit animation

    Build a declarative animated alphabet
    Project setup
    The Alphabet component
    Declarative render for enter-exit transitions
    TransitionGroup
    The Letter component
    onEnter
    onExit
    componentDidUpdate
    render
    That's it 👍🏼
    Key transition takeaways

    ▶ Animating with React, Redux, and D3

    Redux animation intro
    Here's how it works
    Some basic terminology
    3 presentation components
    6 Redux Actions
    1 Container component
    2 Redux Reducers
    What we learned

    ▶ Speed optimizations

    Speed intro

    ▶ Using canvas

    Intro
    Why canvas
    Isn't canvas too hard?
    The trouble with Canvas
    Declarative Canvas with Konva and react-konva

    ▶ Smooth animation with 20,000+ elements

    A particle generator pushed to the max
    Prepare canvas layer
    Use sprites for max redraw speed
    But why so many elements?

    ▶ Build a small interactive canvas game

    Simulating billiards with MobX, Canvas, and Konva
    Decorators
    Part 1: Some setup
    A quick MobX primer
    Part 2: Rendering our marbles
    Part 3: Building the physics
    Collision detection

    ▶ Speedy React Alternatives

    Using a React alternative like Preact or Inferno
    Stress test your framework with a recursive fractal
    Stress testing Preact and Inferno

    ▶ Refactor your components with React Hooks (35:42)

    An intro to hooks (2:10)
    useState, useEffect, and useContext (1:51)
    useMemo is your new best friend (0:58)
    my useD3 hook (0:34)
    Refactoring our big example to hooks (30:09)

    ▶ Powerful animation with transitions and game loops combined (20:56)

    Merging transitions and game loops (2:53)
    Understanding custom tweens (2:38)
    Custom tweens in practice (8:42)
    Use tweens to drive state
    hybrid animation (6:42)

    ▶ You finished! 🚀

    You're the best

    ▶ Cookbook: Various visualizations and how to build them

    Intro to cookbook area
    Christmas trees sold in USA - an emoji barchart
    Money spent on Christmas - a line chart
    Christmas movies at the box office - horizontal bar chart
    What Americans want for Christmas - horizontal stack chart
    Christmas carols and their words - a word cloud
    Will you buy a christmas tree? - a pie chart
    What goes in Chrstmas stockings - a piechart with tooltips
    When Americans buy Christmas presents - a curved line chart
    When people buy candy - animated barchart with easing
    A responsive stack chart of smartphone market share
    A Sankey diagram
    Try Uber's WebGL dataviz library
    Real-time WebGL map of all airplanes in the world
    A compound arc chart
    Which emails sparked joy – an animated timeline
    A barchart race visualizing Moore's Law
    Building a Piet Mondrian art generator with treemaps
    $
    Basics course
    D3 the good parts
    How React makes D3 easier
    Quick React+D3 integration
    Scalable dataviz components with full integration
    3 extra projects you can use as a cookbook
    ​Monthly livestream of a real dataviz project

    Money-back guarantee
    Yours forever
    $

    FULL COURSE

    + 1on1 call

    30min 1on1 call where we discuss your usecase

    D3 the good parts
    How React makes D3 easier
    Quick React+D3 integration
    Scalable dataviz components with full integration
    React, D3, and hooks
    Detailed walkthrough of a large dataviz dashboard project
    Game loop animation
    Animating with transitions
    Hybrid animation for complex interactions
    Enter/update/exit animation
    Redux and MobX basics
    Rendering to Canvas
    Refactoring to React Hooks
    All extra projects you can use as a cookbook
    ​Monthly livestream of a real dataviz project

    Money-back guarantee
    Yours forever
    $
    FULL COURSE

    D3 the good parts
    How React makes D3 easier
    Quick React+D3 integration
    Scalable dataviz components with full integration
    React, D3, and hooks
    Detailed walkthrough of a large dataviz dashboard project
    Game loop animation
    Animating with transitions
    Hybrid animation for complex interactions
    Enter/update/exit animation
    Redux and MobX basics
    Rendering to Canvas
    Refactoring to React Hooks
    14 extra projects you can use as a cookbook
    ​Monthly livestream of a real dataviz project

    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

      Hi, I’m Swizec Teller. I help coders become software engineers.

      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.

      In 2017, after 10 months of work, React + D3v4 became the best book I'd ever written. At 249 pages, many examples, and code to play with it was designed like a step-by-step course. But I felt something was missing.

      So in late 2018 I rebuilt the entire thing as React for Data Visualization — a proper video course. Designed for busy people with real lives like you. Over 8 hours of video material, split into chunks no longer than 5 minutes, a bunch of new chapters, and techniques I discovered along the way.

      React for Data Visualization is the best way to learn how to build scalable dataviz components your whole team can understand.

      Some of my work has been featured in 👇

      94+ Full HD videos

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

      $
      Basics course
      D3 the good parts
      How React makes D3 easier
      Quick React+D3 integration
      Scalable dataviz components with full integration
      3 extra projects you can use as a cookbook
      ​Monthly livestream of a real dataviz project

      Money-back guarantee
      Yours forever
      $

      FULL COURSE

      + 1on1 call

      30min 1on1 call where we discuss your usecase

      D3 the good parts
      How React makes D3 easier
      Quick React+D3 integration
      Scalable dataviz components with full integration
      React, D3, and hooks
      Detailed walkthrough of a large dataviz dashboard project
      Game loop animation
      Animating with transitions
      Hybrid animation for complex interactions
      Enter/update/exit animation
      Redux and MobX basics
      Rendering to Canvas
      Refactoring to React Hooks
      All extra projects you can use as a cookbook
      ​Monthly livestream of a real dataviz project

      Money-back guarantee
      Yours forever
      $
      FULL COURSE

      D3 the good parts
      How React makes D3 easier
      Quick React+D3 integration
      Scalable dataviz components with full integration
      React, D3, and hooks
      Detailed walkthrough of a large dataviz dashboard project
      Game loop animation
      Animating with transitions
      Hybrid animation for complex interactions
      Enter/update/exit animation
      Redux and MobX basics
      Rendering to Canvas
      Refactoring to React Hooks
      14 extra projects you can use as a cookbook
      ​Monthly livestream of a real dataviz project

      Money-back guarantee
      Yours forever

      React, for dataviz, really? What about Vue? Svelte?

      Yes, really. React is a fantastic tool for anything on the web. The ability to get in there and get your hands dirty, treat chunks of HTML as pure data, and have direct control over rendering is unprecedented.

      And nothing better's come around since. I've tried Vue, Svelte, (old) Angular, and a bunch of other frameworks. React still sparks the most joy.

      Your best bet to build reusable components your whole team can understand.

      Can't I just use a library?

      Yes! Libraries are fantastic.

      I used Victory.js the other day (based on React and D3) and it was lovely. Made a basic chart in 5 minutes. 😍

      Then I couldn't figure out how to resize the damn thing so it wouldn't fill the whole screen. An hour I wasted on that. AN HOUR. Never figured it out.

      So now I have a chart that fills the whole screen and looks weird on desktop.

      That's the problem with libraries. Easy to get started, crazy hard to customize. God help you, if you want to step off the beaten path.

      React for Dataviz walks you through the basics of some popular libraries and their tradeoffs, if that fits your needs. Main goal is to teach you how to go custom 🤘

      Do I need to be a React expert? JavaScript expert? D3 expert?

      React for Dataviz is designed for React beginners. It was originally a head-fake to learn React in a more interesting way :)

      You'll need to know JavaScript. RDV doesn't teach you that.

      You'll learn everything you need about D3. And we avoid the confusing parts you don't need when you're using React.

      What if I hate React or don't use it at work?

      No worries. The core ideas in RDV work with any framework. You can use the same approach with Vue, Angular, or Svelte. Only difference is the syntax for rendering.

      Like where in React you'd write some JSX, with Vue you'd write template stuff. Where React has hooks, Vue has getters.

      Maybe I'll throw in a bonus video or two 🤔

      I'm not from USA and your course is expensive as heck. Can I get a discount?

      React for Dataviz uses location-based pricing. Adjusted for every country on the BigMac Index based on your IP.

      If you don't see a regional discount and think you should, send me an email.

      What if I don't care about dataviz?

      Well that's a tough one. Do you care about having fun? About doing something creative with React? Want to stretch your mind, see what React can do that you never thought of before?

      Try React for Dataviz. I think you'll like it.

      I bought some version of React+D3 in the past 5 years. Do I get access automatically?

      That depends.

      React+D3 went through several major rewrites. When it became a course in late 2018 / early 2019 was the last major change.

      The update for 2020 and changing focus to React Hooks is a significant update, but it's not a rewrite. If you accessed your current material through Teachable, you'll get access to the new stuff automatically. I'll be in touch.

      You have to purchase again to access the special workshop on Jun 25th ✌️

      I can't make it to the workshop on June 25th, should I still purchase ReactForDataviz or can I wait?

      The workshop is special. Only for folks who buy now.

      You'll get the full recording after. It will not become part of the course itself.

      What if I hate your course?

      30 day guarantee. Send an email, get a refund.

      Refund first, ask questions later. I like to know what bugged you and I don't make your answer a condition for refunding.

      Can't I just figure this out myself? Am I too advanced?

      You definitely can! I did.

      My time tracker says I've spent 834 hours of my life on this material. Writing, researching, some marketing.

      How much is 834 hours worth to you? Even if you make just $10/hour like I did at my first web agency coding job, that's still $8,340.

      😉

      © 2020, Built by Swizec with ❤️