Dataviz & the web: welcome!

Welcome to the course! Before we dive in, let's make sure you have the prerequisites covered: HTML, CSS, JavaScript, React, Git, GitHub, and Vite.

This lesson recaps the essentials from modules A and B, shows you what you'll build throughout this course, and makes sure you're ready to hit the ground running.

Members only

4 minutes read

Welcome!

Welcome to the core of the course — and to the wonderful world of data visualization on the web!

I come from the data analysis world, where I spent years working with R and Python. When I discovered what's possible with D3.js and React about 10 years ago, it completely blew my mind.

But I won't lie: it took me forever to learn everything. The ecosystem was overwhelming, tutorials were scattered, and I made every mistake in the book.

Today, I'm hoping to make your journey much smoother. You have this course, the tools are better than ever, and AI is here to help you move faster.

By the end of this course, you'll build charts like these:

Real life example of a scatterplot made with react and d3 — **Real life use-case**
Reproduction of a data wrapper chart representing countries CO2 data

GIF showing a mirror transition between a boxplot and a violin plot — **Boxplot to Violin plot**
Interactive example showing the difference between a boxplot and a violin

GIF of a custom population pyramid made with d3 and react — **Population Pyramid**
A very customized version of a population pyramid

Gif of an histogram with a slider that controls the bin size instantly. — **Bin size slider**
See the effect of bin size on a histogram with this interactive example

GIF of a radar chart, a line chart and a lollipop that animate between dataset — **Radar chart, line chart an lollipop with animated transition**
Three charts connected to same buttons, with smooth, synchronized animation when a button is clicked

Picture of a simple treemap — **Hover effect**
Treemap with hover effect to highlight a group

GIF of a streamgraph with multiple interactive features — **Streamgraph application**
Streamgraph with a slider to zoom on a time stamp and with interactive inline legends

Prerequisites

This course is about building data visualizations using React and D3.js. It assumes you already have a solid foundation in web development.

If you completed Module A and Module B, you're all set! If not, here's what you should be comfortable with:

HTML — structure a webpage with semantic elements
CSS — style elements, use classes, understand the box model
JavaScript — variables, functions, arrays, objects, .map()
React — components, props, useState, JSX
Git & GitHub — commit, push, and manage a repository
Vite — scaffold and run a React project locally

Not there yet? No worries! Go through Module A and Module B first — they cover everything listed above from scratch.

Quick check

You should be able to understand what's happening in this sandbox. Take a moment to read the code, tweak it, and make sure nothing feels foreign:

Loading sandbox...

If that looks clear, you're ready. Even seasoned developers will find valuable insights here: creating visualizations with React and D3 involves specialized knowledge that differs significantly from typical UI development.

You don't need prior experience with D3 to get started! We'll introduce it step by step and provide thorough explanations along the way.

Oh no! 😱

This lesson isn’t available just yet.

Take a look at the status badges next to each lesson in the sidebar to see when it’s coming out.

Thanks for your patience! 🙏

← Previous

Project

Chart libraries: don't