Dataviz with React fundamentals

Mastering chart creation with React and D3 involves understanding a multitude of concepts. It took me 5 years to get them.

The gallery offers hundreds of examples and several ready-to-use components to help you get started.

However, to truly grasp the big picture, guidance is essential. It took me thousands of hours to achieve this understanding, and I'm here to guide you!

Module 0

Introduction

While you're likely familiar with React, you might not know that D3 is the essential JavaScript library for data visualization.

This module provides a quick overview of the tools needed to create great charts in a browser.

Module 2

Scales

Building a chart means converting data values into pixels, colors, and sizes.

Scales handle this transformation. They are a core concept in d3.js.

By the end of this module, you’ll master all d3 scales and recreate a chart from The Economist.

Module 4

Responsiveness

Modern charts must work across desktops, tablets, and mobile screens.

You’ll learn proven patterns to make any d3 chart automatically adapt to its container.

By the end of this module, you’ll have a ready-to-use template and best practices you can reuse in every project.

Module 6

Tooltip

Tooltips add context without cluttering the chart.

In this module, you’ll learn how to design and implement effective tooltips using d3 and React.

You’ll cover positioning, formatting, and interaction patterns, and leave with a reusable tooltip component.

Module 8

Legend

Legends help users understand what each color, shape, or symbol represents.

In this module, you’ll learn how to build clear and flexible legends for your charts.

You’ll also make them interactive to reveal more insights and improve exploration.

You’ll leave with a collection of ready-to-use legend templates for your projects.

Module 10

Canvas

When charts grow large, performance becomes critical.

In this module, you’ll learn how to render charts with canvas to dramatically improve performance.

You’ll understand when to use canvas instead of SVG and how to integrate it cleanly with d3 and React.

Module 1

SVG

A chart is essentially a collection of shapes rendered on the screen.

In the browser, the most common way to draw those shapes is with SVG.

By the end of this module, you’ll understand what SVG is, how to draw anything with it, and how d3.js can dramatically simplify the process.

Module 3

Axes

Most charts rely on axes to give meaning to marker positions.

In this module, you’ll learn how to efficiently translate scales into axes using React.

You’ll also walk away with reusable, production-ready components for your next project.

Module 5

Hover effect

Let’s bring your charts to life.

This module shows how to create hover interactions using CSS and JavaScript.

You’ll build a clear mental model of the main use cases and learn how to implement each one cleanly.

Module 7

Reading data

Every chart starts with data.

In this module, you’ll learn how to load data from local files like CSV and JSON, and how to fetch it from a remote endpoint when needed.

You’ll also learn how to handle loading states cleanly, using a loader when data is still being fetched.

Module 9

Animation

Smooth animations make data updates easier to perceive and understand.

You’ll learn how to use react-motion to build spring animations for chart transitions.

You’ll implement clean patterns to animate position, size, and color changes across updates.

Contact

👋 Hey, I'm Yan and I'm currently working on this project!

Feedback is welcome ❤️. You can fill an issue on Github, drop me a message on Twitter, or even send me an email pasting yan.holtz.data with gmail.com. You can also subscribe to the newsletter to know when I publish more content!