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](https://egghead.io/courses/build-interactive-javascript-charts-with-d3-v4).

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.

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.

Get Started With D3

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

Basics of SVG

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.

Scaling Basics

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

d3.max

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

rangeBands

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

Color Scales

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.

Quantitative Scales

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

Margins

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.

Scatter Plot

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

Debugging with Dev Tools

D3 has tools to make basic chart interactivity relatively simple.

Basic D3 chart interactivity

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.

Basic Transitions with D3

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

Creating Axes with D3

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

Cleaner D3 code with selection.call()

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

Line and Area Charts with D3

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.

Use D3 (v3) to Build Interactive Charts with JavaScript

Instructor

Course content (16 lessons)

Instructor