Finally master dataviz:
Learn D3.js.
D3.js is the ultimate data visualization tool, but it's hard to learn. This course combines it with React and AI so you can build anything you can imagine.
Taught by Yan Holtz
So good. So painful.
D3.js is the gold standard for data visualization on the web. Unlike ggplot2, Matplotlib, or even Javascript charting libraries, D3 gives you complete control over every pixel.
But let's be honest: learning D3 is painful.
The API is vast. The documentation assumes you already know it. Tutorials are scattered, outdated, or riddled with anti-patterns. You end up copy-pasting code you don't understand, stitching together a fragile chart that breaks the moment you try to customize it.
Last but not least, most examples you’ll find online don’t use React, the standard library for building modern UIs that removes 99% of the friction.
Finally, make it click.
We're in an era where AI can scaffold 80% of your code. The barrier to entry has never been lower. So why settle for limited charting libraries when you can finally master the real thing?
This course gives you what scattered tutorials never could: a clear mental model of how interactive charts actually work. You'll learn the D3 + React combo from the ground up—the modern way.
You won't just build a scatterplot or a bar chart. You'll understand the underlying principles—so you can create any visualization you can imagine.
By the end, you'll have AI as your copilot and the skills to steer it. The only limit will be your creativity.
Welcome to the best way to learn data visualization on the web. It's called:
React leads UI. D3 leads dataviz.
Learn how they work together.
⚡️ Master D3.js, step by step
You'll start with the fundamentals of front-end development, then learn D3.js and React one concept at a time, until you can build virtually anything.
Web Foundation
What you need to know before jumping into d3.js
Main Course
11 modules to master D3.js and React
Foundation
No web development experience? No problem. These two modules cover everything you need to get started.
WebDev Foundation
Before diving into React and D3.js, you need a solid foundation in web development basics.
This module covers everything from HTML and CSS to JavaScript, version control, and essential developer tools.
React Foundation
React revolutionized how we build user interfaces by introducing reusable components.
This module teaches you React fundamentals from the ground up, along with the modern tools that make React development a breeze.
HTML
CSS
TypeScript
VS Code
React
ViteMain Course
Eleven modules with plenty of hands-on exercises and a real-world, data-driven project to ensure you can apply everything directly at work.
Introduction
What is D3.js? Why is it so powerful? And why do most tutorials make it harder than it needs to be?
This module cuts through the confusion and shows you the modern, simpler way to use D3 with React.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
You’ll build stunning charts
By the end of the course, you’ll have the skills to build virtually anything. Each module ends with a real project, and you can share your work in the #share-your-viz Discord channel.
Real life use-case
Reproduction of a data wrapper chart representing countries CO2 data
Boxplot to Violin plot
Interactive example showing the difference between a boxplot and a violin
Interactive Beeswarm
Interactive Beeswarm with hover effect, annotation and search bar.
Population Pyramid
A very customized version of a population pyramid
Population Pyramid
A very customized version of a population pyramid
Bin size slider
See the effect of bin size on a histogram with this interactive example
Radar chart, line chart an lollipop with animated transition
Three charts connected to same buttons, with smooth, synchronized animation when a button is clicked
Hover effect
Treemap with hover effect to highlight a group
Streamgraph application
Streamgraph with a slider to zoom on a time stamp and with interactive inline legends
Who is this for?
Anyone into dataviz would love this course. But you will especially love it if:
You need stunning, custom visuals
D3 is the only tool that lets you build anything. No limits, no compromises—just full creative control.
You've tried D3 and hit a wall
You've copy-pasted code you didn't understand, and your chart broke the moment you tried to customize it.
You've outgrown charting libraries
Shiny, Streamlit, Recharts, Chart.js, or Plotly got you started... but you want to reach the next level.
You want to level up your React skills
You know React, but adding D3 expertise will set you apart and open doors to specialized roles.
No HTML or JavaScript experience? No problem. The first two modules teach the foundations.
👋 Hi! I'm Yan Holtz.
Senior Software Engineer in ❤️ with educational content.
For the past 5 years, I’ve worked at Datadog, building interactive, production-grade charts full time—so I know what works in the real world.
I’ve also taught programming and data visualization to over 2,000 students through my other courses, sharing the patterns and mental models that make complex topics approachable.
You might know me from the R, Python, D3.js, and React Graph Galleries, or from my award-winning platforms Data-to-Viz.com and Dataviz-Inspiration.com.
This course is my step-by-step approach to mastering interactive, production-ready visualizations with D3.js and React, combining real-world patterns, mental models, and hands-on projects.
Join me, and in just a few hours, you’ll gain skills and confidence that will make building complex, dynamic charts feel natural 🔥.
What People Are Saying
Over 2,000 students are already learning with me through my 2 other best-seller courses, which have gathered hundreds of testimonials (1, 2). I also gave this course live. Here's what people are saying:
Yan delivered an exceptional talk on Data Visualization at our MIT research centre, and we gained a tremendous amount of insight from his expertise!
His tools, workshops, and training resources are invaluable for anyone looking to enhance their data visualization skills, and we highly recommend exploring them.
I attended both of other Yan's courses, productive-r-workflow and matplotlib-journey, and they were excellent.
Clear, well-structured, and highly insightful. I highly recommend them and can't wait to follow this one too!
Yan has done an exceptional job to create an efficient course that still manages to help you understand how to approach creating custom visualization with D3.js while also keeping it fun 😄
This course has been one of the most helpful resources I've found for learning D3 with React.
Even though I sometimes had to refer to the solutions, the process taught me a lot. The balance between theory and practice is great, and I especially appreciate how the exercises build intuition rather than just memorization.
I attended a 2-day training with Yan on D3 and React.
Thanks to his attentiveness, he suggested an approach that was well suited to my skill level and business needs. Combining theory with (a lot of!) practice, he explains complex topics with great clarity.
I now have a solid foundation to continue learning, and I leave with many tips and directions to make my future work easier.
The React Graph Gallery has been an invaluable resource in my journey of learning interactive web-based data visualization.
The course is clear, concise, and straight to the point. The chart templates are simple, elegant, visually appealing, and are incredibly useful for quickly getting started with a given visualization.
I highly recommend it to anyone looking to elevate their data visualization skills!
Join the waitlist!
The first cohort is full with 300 students currently learning! Join the waitlist to be notified when doors reopen for cohort 2.
349€
599€
First cohort price
Join the waitlist to get early access when doors reopen.
💸 Discounts
Why this will work
Most D3 tutorials throw complex examples at you and hope something sticks. This course is built on how people actually learn.
Learn by Doing
Tons of exercises with increasing complexity. Reading docs never made anyone good at D3. Building things does.
Back to the Basics
2 full modules on web fundamentals—SVG, JavaScript, React basics. No hand-waving. No "you should already know this."
Bite-Sized Lessons
Short, focused lessons you can squeeze into your day. 15 minutes here, 20 minutes there. No 2-hour marathons.
Progressive Complexity
Start simple. Build confidence. Then tackle the hard stuff. You won't drown in a sea of complex examples from day one.
I'm Sitting Next to You
Live Office Hours every Friday. Ask questions, get unstuck, and learn from what others are building.
The Modern Stack
React + D3, not ancient vanilla JS patterns. Write code you'd actually ship today, not copy-paste artifacts from 2015.
100+ Interactive Examples
Every concept comes with a CodeSandbox you can fork and break. From "hello world" to production-ready patterns.
A Real Community
A Discord where you share your work and get real feedback. Not a ghost town—an active group learning together.
Bonus: A ready-to-go template for data storytelling with all the right libraries pre-installed.
⏰ You Won't Fall Asleep!
This course is NOT a collection of long, dull, unrefined videos. You'll seamlessly switch between concise text, engaging videos, quizzes, and hands-on exercises using our interactive embedded sandboxes!
Check the code on the left.
Can you turn the bars red?