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

Your svg area goes from 0 to 500px. Your data goes from 0 to 100. If the value of a data point is 30, where should you draw it?

You need a scale to find out.

Module 4

Responsiveness

Some people have big monitors when others will read your work on their phone. Let's see how to make your graph look good in any situation.

Module 6

Tooltip

Let's check how to add a tooltip. Give a tooltip definition. Give several tooltip component starters.

Module 8

Legend

Those little legends are often small, but as complicated to build as the main graph. This module provides a few ready to use legend components.

Module 10

Canvas

With thousands of shapes on your graph, using SVG will make your graph slow.

Canvas is an alternative way to draw on a screen. Much more performant, but harder to deal with.

Module 1

SVG

A graph is basically a compendium of shapes drawn on a screen.

The most common way to draw shapes in a browser is to use SVG. Let's learn the essential of what SVG is, step by step.

Module 3

Axes

Now that we know how to add shapes on the graph, it is time to add context to it. Let's see how to draw axes.

Module 5

Hover effect

You want something to happen when a graph element is hovered. This module dives into several strategies using CSS and Javascript. It provides a clear mental modal of the main use cases and how to deal with each of them.

Module 7

Reading data

Your data can be a json file or a tabular format. It can be hosted locally or available through an API. How can you read it?

Module 9

Animation

Let's dig into those smooth dataset transition that make the viz magical. It's challenging, but react-spring is of great help here.

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!