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

9 modules86 lessons10h 51m total

Making Your First Chart

12 lessons 55m total

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

Creating our workspace

We create our wrapper and learn about d3 selection objects.

LESSON

3:24 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

Drawing the axes

We learn how to create axes and transform them into position.

LESSON

5:08 minutes

Week 1: Exercise

Let's consolidate what we just learned with an exercise to play with this week.

LESSON

APPENDIX

Making a Scatterplot

11 lessons 54m total

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 1: Access data

We talk through our first step: accessing our data.

LESSON

1:57 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

11 lessons1h 13m total

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 dimensions

A hopefully familiar step by now: creating our chart dimensions.

LESSON

2:49 minutes

Draw canvas

Creating our wrapper and bounds elements.

LESSON

2:25 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

6 lessons 51m total

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

7 lessons1h 19m total

Interactions

Let's start talking about adding interactions to our charts!

LESSON

0:55 minutes

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

10 lessons 49m total

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

Chart design

We talk through a few tips & tricks that I use when designing charts.

LESSON

2:58 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

12 lessons2h 15m total

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

Wrapping up

A quick debrief! Congrats on making it through!

LESSON

0:52 minutes

Week 7: Exercise

Let's consolidate what we just learned with an exercise to play with this week.

LESSON

D3 + Javascript Frameworks

12 lessons1h 12m total

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