Fullstack D3 Masterclass
The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.
What You Will Learn
How to build your first D3 chart
Importance of information design
How to integrate D3 with Angular
When to use D3 - and when not to
How to animate and add interactions
How to create any visualization you can imagine
Charts communicate ideas with simplicity, clarity, and detail.
Once you're comfortable with D3 you can quickly:
- understand key metrics at a glance
- catch anomalies (before they turn into problems)
- give key insights to your customers
- and impress your boss and co-workers
Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.
Course Content
Making Your First Chart
Making Your First Chart
We dig in right away, starting with a timeline of temperature over time. First, we need to get our bearings.
LESSON
1:43 minutes
Loading the weather dataset
First things first, we learn how to load our dataset and look at the structure.
LESSON
5:51 minutes
Setting up our line chart
We learn how to set up our chart - accessor functions are crucial for easy changes, documentation, and framing.
LESSON
8:35 minutes
Drawing our chart
To set up our chart environment, we learn why we need two containers: wrapper and bounds.
LESSON
5:15 minutes
Adding an SVG element
We learn how to create new elements inside of a d3 selection object.
LESSON
4:28 minutes
Creating our bounding box
We create our bounding box, and shift it to respect our margins.
LESSON
4:42 minutes
Creating our scales
We learn about scales and create our first ones: our y and x scales.
LESSON
10:06 minutes
Drawing the line
We learn about path SVG elements and how to construct a string for their d attribute.
LESSON
6:27 minutes
Week 1: Exercise
Let's consolidate what we just learned with an exercise to play with this week.
LESSON
APPENDIX
Making a Scatterplot
Making a Scatterplot
We dive into making a slightly more complex chart: a scatter plot. In this lesson, we talk about why you would create a scatter plot and its basic anatomy.
LESSON
1:28 minutes
Steps in drawing any chart
We solidify our foundation by splitting our chart-creating code into seven general steps.
LESSON
2:03 minutes
Step 2: Create chart dimensions
The second step: creating chart dimensions. This time, we learn how to create a square chart that fits within any browser window.
LESSON
7:24 minutes
Step 3: Draw canvas
The third step: drawing our canvas. We create our wrapper & bounds, then shift them to respect our margins.
LESSON
2:59 minutes
Step 4: Create scales
The fourth step: creating our scales. We talk about scales in more depth, and learn about d3.extent() & .nice().
LESSON
4:20 minutes
Step 5: Draw data
The fifth step: drawing our data. This is an important lesson! We talk about data joins, which are one of the trickiest parts of d3, and necessary for updating our charts & binding our visualization to data.
LESSON
15:27 minutes
Step 6: Draw peripherals
Our sixth step: drawing peripherals. We draw our axes, learn about the text SVG element, and how to add (and rotate) labels.
LESSON
11:29 minutes
Looking at our chart
Our hard work completed, we sit back and talk about what insights our chart can teach us.
LESSON
1:55 minutes
Extra credit: adding a color scale
We learn how to create a custom color scale, then we color our circles based on another metric: cloud cover.
LESSON
5:47 minutes
Week 2: Exercise
Let's consolidate what we just learned with an exercise to play with this week.
LESSON
Making a Bar Chart
Making a Bar Chart
Next, we embark on a mission to create a slightly more complex chart: a bar chart. We talk about what we can learn from a bar chart, and what a histogram is.
LESSON
3:31 minutes
Access data
Next, we grab our data and create our accessor function (only one this time!)
LESSON
2:03 minutes
Create scales
We create our scales, but first, we learn how to split our data into equally-sized bins.
LESSON
10:25 minutes
Draw data
We finally get to draw our bars! We draw them in groups, so we can position them as well as labels.
LESSON
8:35 minutes
Adding Labels
We draw a label over each bar, showing the number of points within that bin.
LESSON
7:11 minutes
Draw peripherals
We draw a line depicting the mean of our distribution, as well as our axes.
LESSON
14:28 minutes
Extra credit
We talk about how to generalize our code, and change it so that we draw multiple histograms for different metrics.
LESSON
8:58 minutes
Accessibility
This is a great lesson, and one that's hard to find good content on. We talk about the ways to make our charts accessible to screen readers, and walk through changing our histogram.
LESSON
13:13 minutes
Week 3: Exercise
Let's consolidate what we just learned with an exercise to play with this week.
LESSON
Animations and Transitions
Animations and Transitions
We talk about the different ways we can animate changes in our charts, and rule out SVG <animate>.
LESSON
3:00 minutes
CSS transitions
We learn about CSS transitions and the different CSS transition properties, then run through a concrete example and look at how to debug them.
LESSON
6:47 minutes
CSS transitions with a chart
We add CSS transitions to our histogram, animating changes as the bars change.
LESSON
8:14 minutes
d3.transition
We learn about d3.transition, and talk about when we would use it instead of CSS transitions. We then update our histogram to animate using d3.transition.
LESSON
22:12 minutes
Lines
We talk through a more complex example: animating our line chart when it gets new data. This is trickier than it might seem at first!
LESSON
11:41 minutes
Week 4: Exercise
Let's consolidate what we just learned with an exercise to play with this week.
LESSON
Interactions
d3 events
We learn how to add interaction event listeners using our d3 selection objects, then run through a concrete example.
LESSON
7:09 minutes
Destroying d3 event listeners
We can't let our event listeners hang around forever - we learn how to clean up after ourselves and cancel old ones.
LESSON
3:09 minutes
Bar chart
We add a tooltip to our histogram. This involves creating a tooltip, updating its contents to show information about the hovered bar, and moving above the hovered bar.
LESSON
18:51 minutes
Scatter plot
We add a tooltip to our scatter plot. Along the way, we learn about d3.timeFormat and learn a great trick for making our tooltips feel smoother, using voronoi.
LESSON
25:04 minutes
Line chart
Lastly, we add a tooltip to our timeline. We talk about how to add a listener rectangle, d3.leastIndex(), and how to add a dot to mark our place.
LESSON
24:19 minutes
Week 5: Exercise
Let's consolidate what we just learned with an exercise to play with this week.
LESSON
Data Visualization Basics
Data Visualization Basics
It's really important that we understand the fundamentals of data visualization design, and what kind of chart to create.
LESSON
4:17 minutes
Types of data
We talk about the different types of data: the main buckets of qualitative and quantitative metrics, and their sub-categorizations.
LESSON
4:52 minutes
Ways to visualize a metric
We talk about the different ways to visualize a single metric, and how to combine that with the different data types.
LESSON
4:49 minutes
Example redesign
We run through a full redesign of a chart, learning about the motivation and implementation of each change.
LESSON
7:43 minutes
Color scales
Choosing colors is one of the hardest parts of designing a data visualization! We talk about the three main types of color scales, and related functions that are built into d3.
LESSON
5:26 minutes
Custom color scales
We learn how to create our own custom color scales and specify their color space.
LESSON
4:48 minutes
Color spaces
We learn about three color spaces (rgb, hsl, and hcl) and the pros and cons of each.
LESSON
9:33 minutes
Color tips
We talk about a few tips & tricks for choosing effective, accessible colors for our data visualizations.
LESSON
4:36 minutes
Week 6: Exercise
Let's consolidate what we just learned with an exercise to play with this week.
LESSON
Advanced example
Radar Weather Chart
Let's dive into a complicated data visualization: a circular chart showing overall weather for the whole year
LESSON
2:23 minutes
Getting set up
We're going to breeze through the first four steps: accessing our data, creating our dimensions, drawing our canvas, and creating our scales.
LESSON
7:16 minutes
Adding gridlines
We're going to skip step 5 and use step 6 to get our feet wet with angular math. We'll draw angular grid lines for each month, circular grid lines for temperature, and label both axes.
LESSON
34:54 minutes
Adding freezing
To ease into our drawing data step, let's start by adding a circle that shows what temperatures are below freezing.
LESSON
2:17 minutes
Adding the temperature area
We create a radial area shape, bounded by the min and max temperatures for each day. Then we create a gradient and use it to color our area.
LESSON
12:55 minutes
Adding the UV index marks
We add marks to show which days are above a certain UV index threshold.
LESSON
8:26 minutes
Adding the cloud cover bubbles
Next, we'll add our ring of circles around the outside to represent the amount of cloud cover for each day. We'll also learn something really important about visualizing data using circles.
LESSON
7:38 minutes
Adding the precipitation bubbles
Next, we learn about ordinal scales and create the inner ring of circles to show the precipitation probability and type for each day.
LESSON
7:34 minutes
Adding annotations
We'll add annotations to our chart to tell our viewer what the different parts of the chart are showing. To do this, we'll create a generic function, since there are so many things to label.
LESSON
20:09 minutes
Adding the tooltip
Onto our last step: adding interactions! The tooltip we'll build will be unlike any you've seen before - it will follow the mouse all the way around our chart, highlight the relevant data elements, and describe the weather for that hovered date.
LESSON
30:51 minutes
Week 7: Exercise
Let's consolidate what we just learned with an exercise to play with this week.
LESSON
D3 + Javascript Frameworks
D3 + Javascript Frameworks
We'll talk about the best way to incorporate d3 when using a javascript framework like React, Svelte, or Angular.
LESSON
2:48 minutes
React.js
We are introduced to React.js and learn a basic principle for combining d3 + React.
LESSON
3:11 minutes
Digging in
We walk through the structure of our React application, then dive into the first step of our chart drawing checklist: accessing our data
LESSON
4:48 minutes
Creating dimensions in React
Creating dimensions in React can be really easy! We use a custom hook for watching the size of our wrapper and automatically calculating the dimensions of our bounds.
LESSON
4:03 minutes
Drawing our canvas in React
We create our wrapper and bounds within our Chart component to prevent from having to repeat ourselves for every chart we create.
LESSON
6:12 minutes
Creating our scales in React
Next, we need to create our scales. We also create scaled accessor functions to pass to the children of our Timeline, so they don't need to know about our scales.
LESSON
3:39 minutes
Drawing our data in React
Next, we fill out our Line component for a flexible way to draw our data.
LESSON
5:26 minutes
Drawing our peripherals in React
We take a naive approach to creating an Axis component
LESSON
7:34 minutes
Drawing our peripherals in React, take two
We learn an alternate, less hacky solution for creating an Axis component that lets React do all of the rendering.
LESSON
15:11 minutes
Setting up interactions in React, and wrapping up
We wrap up by talking about how to add interactions and look at the completed code for a Timeline, Scatter plot, and Histogram.
LESSON
4:27 minutes
Using d3 with Angular.js
We take a look at how to combine d3 + Angular, with a complete codebase.
LESSON
7:41 minutes
Using d3 with Svelte.js
We take a look at how to combine d3 + Svelte.js, with a complete codebase.
LESSON
7:30 minutes
Interviews
Interviews
Coming soon! Interviews with amazing experts in the data visualization field. You'll learn about how different people get into data visualization, what most excites them, and their tips & tricks.
LESSON
Shirley Wu
Shirley and I talk about her job title, how she got into data visualization, how working in industry is different than working as a freelancer, and her new book!
LESSON
16:01 minutes
Ian Johnson
Ian and I talk about his long history of building up the d3.js community, his day-to-day working at Observable, and the value of breaking projects down into small pieces.
LESSON
19:07 minutes
Russell Goldenberg
Russell Goldenberg talks to us about what it's like working at the Pudding, his journey from Comp Sci to creative computation, and drops some great tips for working on data viz projects.
LESSON
14:45 minutes
Will Chase
Will Chase talks us through how he got into data viz, the difference between work and freelance projects, and walks us through his most recent, wonderful visualization of hurricane names.
LESSON
28:42 minutes
Your Instructors
Frequently Asked Questions
Who is this course for?
If you know JavaScript and you need to build dashboards and you'd like to learn D3 as quickly and efficiently as possible.
What if I need help?
You can ask us questions anytime through the community Discord channel or by sending us a message.