Use D3 (v3) to Build Interactive Charts with JavaScript

77 minutes

This course covers D3 v3. If you'd like to learn about v4 of D3 (the latest version) click here for the course on that.

This series will gently guide you through the first steps in getting to know D3. The curve can be steep, but with a few simple tools, you'll be charting your buns off in no time flat.

pro-course-rss-logo

PRO RSS Feed

Get Started With D3

Basics of SVG

P

Scaling Basics

P

d3.max

P

rangeBands

Color Scales

P

Quantitative Scales

P

Margins

Scatter Plot

P

Debugging with Dev Tools

Basic D3 chart interactivity

P

Basic Transitions with D3

P

Creating Axes with D3

P

Cleaner D3 code with selection.call()

P

Line and Area Charts with D3

P

Responsive D3 charts with the viewBox attribute

P

Get Started With D3

2:44 d3

This is the first video in a series on D3 from Ben Clinkinbeard. D3 can be... dense, but Ben breaks down the bare essentials and will guide you to D3 mastery.

Basics of SVG

6:03 d3 PRO

In this lesson, Ben guides you through converting your D3 bar chart from HTML elements into SVG.

Scaling Basics

4:21 d3 PRO

In this lesson Ben shows you the basics of dynamically scaling your charts in D3. Scaling is a deep concept, so this is the first video in a series that will cover this topic.

d3.max

3:11 d3 PRO

In this lesson Ben shows you how to use d3.max to normalize your dataset visually within the specific bounds of a variable domain.

rangeBands

5:30 d3

Expanding on the concepts of dynamic scaling in D3, in this lesson Ben discusses the use of rangeBands to horizontally scale your D3 charts.

Color Scales

3:39 d3 PRO

In this addition to Ben's series of lessons on D3, you'll explore the use of color scales in your D3 charts.

Quantitative Scales

3:59 d3 PRO

In D3 quantitative scales allow you do easily divide aspects of your chart evenly based on the dataset. In this lesson, Ben will continue to show you the variety of scaling options available in D3.

Margins

1:39 d3

This lesson will show you how to add margins to your D3 charts to give them the elbow room they deserve.

Scatter Plot

2:39 d3 PRO

Up until now we've just looked at bar charts. A handy chart, no doubt, but D3 offers a variety of charts you can work with. In this lesson we'll convert the bar chart into a basic scatter (or bubble) chart.

d3 tutorial about Debugging with Dev Tools

Debugging with Dev Tools

1:59 d3

D3 debugging is fully supported within Chrome Dev Tools. This is extremely useful!

d3 tutorial about Basic D3 chart interactivity

Basic D3 chart interactivity

4:21 d3 PRO

D3 has tools to make basic chart interactivity relatively simple.

d3 tutorial about Basic Transitions with D3

Basic Transitions with D3

5:20 d3 PRO

D3 has some great tools that make animating your charts relatively simple. We will take a look at create smooth animated transitions with lots of options.

d3 tutorial about Creating Axes with D3

Creating Axes with D3

7:32 d3 PRO

Learn the ins and outs of creating chart axes in D3, as well as some options for customizing them.

d3 tutorial about Cleaner D3 code with selection.call()

Cleaner D3 code with selection.call()

6:56 d3 PRO

selection.call() method in D3 can aid in code organization and flexibility by eliminating the need to use chained method calls for every operation.

d3 tutorial about Line and Area Charts with D3

Line and Area Charts with D3

6:37 d3 PRO

Create a line chart, then easily convert it to an area chart

d3 tutorial about Responsive D3 charts with the viewBox attribute

Responsive D3 charts with the viewBox attribute

11:15 d3 PRO

Ensuring your charts are responsive is essential if you want them to work regardless of the user's device and screen size. In this lesson we'll learn how the viewBox attribute of SVG elements works, and apply that knowledge to make a future-proof D3 chart.

Presented by:

Ben Clinkinbeard

Ben Clinkinbeard is fully immersed in the JavaScript ecosystem with a particular focus on Node, React, Redux, D3, and ES6+.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?