Build Interactive JavaScript Charts with D3 v4

157 minutes

In this course we will learn and demonstrate the fundamental concepts and APIs of D3, on our way to building several common chart types. We’ll start with the building blocks upon which all D3 visualizations are built; things like scales, interpolators, and selections. We’ll see how to load data with D3, and how to put its full name, Data Driven Documents, into action. We’ll build column and bar charts, scatter plots, and area charts. Most importantly, we’ll gain an understanding of the conventions and patterns that underlie all D3 projects and examples, enabling you to dissect, understand, and build virtually any D3 visualization on the internet.

pro-course-rss-logo

PRO RSS Feed

Install and Configure D3 v4

Convert Input Data to Output Values with Linear Scales in D3 v4

P

Convert Dates to Numeric Values with Time Scales in D3 v4

P

Create Labels from Numeric Data with Quantize Scales in D3 v4

P

Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

P

Load and Inspect Data with D3 v4

P

Select DOM Elements with D3 v4

P

Modify DOM Elements with D3 v4

P

Create DOM Elements with D3 v4

P

Start Visualizing Data Driven Documents with D3 v4

Output SVG Elements with D3 v4

P

SVG Graphics Containers and Text Elements in D3 v4

P

Basic Interactivity with D3 v4

P

Better Code Organization with selection.call() with D3 v4

P

Margin Convention with D3 v4

P

Create Chart Axes with D3 v4

P

Make D3 v4 Charts Responsive with the viewBox attribute

P

Build a Column Chart with D3 v4

P

Build a Scatter Plot with D3 v4

Build a Line Chart with D3 v4

P

Build an Area Chart with D3 v4

P

Debug D3 v4 with Dev Tools

P

Animate Transitions in D3 v4

P

Reuse Transitions in D3 v4

P

Animate with the General Update Pattern in D3 v4

P

Animate Chart Axis Transitions in D3 v4

d3 tutorial about Install and Configure D3 v4

Install and Configure D3 v4

3:26 d3

As of version 4, D3 is a completely modular tool, composed of many small libraries. You can use them independently or as a whole, and even create custom builds that include only the parts you need. This lesson will review the options available for installing and using D3, and will set up a local environment for rapid experimentation.

d3 tutorial about Convert Input Data to Output Values with Linear Scales in D3 v4

Convert Input Data to Output Values with Linear Scales in D3 v4

3:35 d3 PRO

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. Turning a test score into a column height, or a percentage into an opacity requires translating from one set of possible values to another, and linear scales perform a direct, proportional conversion of inputs to outputs. In this lesson we’ll learn the basic API of D3 scales and how to use them.

d3 tutorial about Convert Dates to Numeric Values with Time Scales in D3 v4

Convert Dates to Numeric Values with Time Scales in D3 v4

2:43 d3 PRO

Mapping abstract values to visual representations is what data visualization is all about, and that’s exactly what D3 scales do. This is usually done using pretty straightforward algorithms, but nothing is straightforward when you’re working with Date objects in JavaScript. If you’re plotting temporal data, you need to use a time scale.

d3 tutorial about Create Labels from Numeric Data with Quantize Scales in D3 v4

Create Labels from Numeric Data with Quantize Scales in D3 v4

3:28 d3 PRO

Sometimes data needs to be converted from a continuous range, like test scores, to a discrete set of output values, like letter grades. In this lesson we’ll see how to use d3.scaleQuantize() to do exactly that.

d3 tutorial about Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

Create Labels from Non-numeric Data with Ordinal Scales in D3 v4

1:40 d3 PRO

When your data contains discrete, non-numeric property values that you need to format or convert before displaying, d3.scaleOrdinal() is the API you need. Maybe you need to convert a “pass”/”fail” field to “green”/”red” for coloring your bubble chart? This lesson shows you exactly what to do.

d3 tutorial about Load and Inspect Data with D3 v4

Load and Inspect Data with D3 v4

4:19 d3 PRO

You probably use a framework or standalone library to load data into your apps, but what if that’s overkill for your needs? What if you’re just putting together a quick demo? This lesson demonstrates D3’s APIs for loading data on its own, as well as some helpful methods for inspecting your data and preparing it for use with D3.

d3 tutorial about Select DOM Elements with D3 v4

Select DOM Elements with D3 v4

5:21 d3 PRO

Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This lesson will show you the ins and outs of accessing existing DOM elements with D3.

d3 tutorial about Modify DOM Elements with D3 v4

Modify DOM Elements with D3 v4

3:51 d3 PRO

Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing colors, labels, or even link destinations, this lesson demonstrates the process and patterns for updating the DOM using D3’s powerful APIs.

d3 tutorial about Create DOM Elements with D3 v4

Create DOM Elements with D3 v4

4:56 d3 PRO

Change is good, but creating from scratch is even better. This lesson shows you how to create DOM elements from D3 and insert them into your document as needed. You’ll officially be on your way to creating data visualizations!

d3 tutorial about Start Visualizing Data Driven Documents with D3 v4

Start Visualizing Data Driven Documents with D3 v4

8:45 d3

It’s time to live up to D3’s true name and potential by integrating some real data into your visualization. This lesson introduces the fundamental concepts of enter, update, and exit selections, topics essential for being successful with D3.

d3 tutorial about  Output SVG Elements with D3 v4

Output SVG Elements with D3 v4

5:13 d3 PRO

D3 is capable of creating regular DOM elements like divs and buttons, and can even render to canvas, but by far the most common type of output is SVG. In this lesson we’ll convert from DOM elements to SVG elements, and make the updates necessary for maintaining a consistent appearance between the two.

d3 tutorial about SVG Graphics Containers and Text Elements in D3 v4

SVG Graphics Containers and Text Elements in D3 v4

4:07 d3 PRO

SVG is a great output format for data visualizations because of its scalability, but it comes with some idiosyncrasies and unique challenges. In this lesson we’ll learn how to use graphics containers, the SVG equivalent of a div, as well as text elements for displaying, you guessed it, text.

d3 tutorial about Basic Interactivity with D3 v4

Basic Interactivity with D3 v4

8:44 d3 PRO

Data visualizations are a lot more interesting when they’re interactive. Whether it’s clicks, roll overs, or drags, it makes things more compelling, and D3 is up to the task. This lesson demonstrates how to implement basic interactions and shows how D3 can do things vanilla CSS can’t.

d3 tutorial about Better Code Organization with selection.call() with D3 v4

Better Code Organization with selection.call() with D3 v4

4:22 d3 PRO

Most of D3’s native selection APIs also return the selection (or a new selection), to enable multiple method calls to be chained together. Since the code you write isn’t on the selection prototype, chaining your methods would take some extra work. selection.call() will call any function reference you give it, providing the selection as the first parameter, and then it returns the selection for you to ensure chaining is supported.

d3 tutorial about Margin Convention with D3 v4

Margin Convention with D3 v4

4:41 d3 PRO

You can’t add axes to a chart if you don’t make room for them. To that end, the D3 community has adopted a simple convention for defining margin sizes that shields most of your code from having to know or care about them. This lesson demonstrates the margin convention and the simple flexibility it adds to your D3 projects.

d3 tutorial about Create Chart Axes with D3 v4

Create Chart Axes with D3 v4

9:20 d3 PRO

Most charts aren’t complete without axes to provide context and labeling for the graphical elements being displayed. This lesson introduces D3’s APIs for creating, customizing, and displaying axes while building on topics from previous lessons.

d3 tutorial about Make D3 v4 Charts Responsive with the viewBox attribute

Make D3 v4 Charts Responsive with the viewBox attribute

9:51 d3 PRO

Making SVGs responsive is unfortunately not as simple as adding some media queries. This lesson introduces the viewBox attribute, which is used to control how SVGs scale. We’ll also examine a reusable function that can be used to make nearly any visualization responsive.

d3 tutorial about Build a Column Chart with D3 v4

Build a Column Chart with D3 v4

8:09 d3 PRO

Column and bar charts are staples of every visualization library. They also make a great project for combining the essential pieces of D3 like selections, scales, axes, and SVG elements. This lesson walks you through the process of creating an essential chart type with all the required components.

d3 tutorial about Build a Scatter Plot with D3 v4

Build a Scatter Plot with D3 v4

8:41 d3

Scatter plots, sometimes also known as bubble charts, are another common type of visualization. They’re extremely versatile thanks to their ability to display multiple dimensions of data simultaneously using x and y position, opacity, color, and even shape. This lesson introduces the SVG circle element as part of building a robust scatter plot.

d3 tutorial about Build a Line Chart with D3 v4

Build a Line Chart with D3 v4

9:44 d3 PRO

Line charts are often used to plot temporal data, like a stock price over time. In this lesson we’ll see how to use D3 APIs to create our own simplified version of the charts seen on Google Finance.

d3 tutorial about Build an Area Chart with D3 v4

Build an Area Chart with D3 v4

10:13 d3 PRO

Similar to line charts, area charts are great for displaying temporal data. Whether you’re displaying a single set of data or multiple sets using an overlapping or stacked layout, D3 provides APIs to make the process straightforward. This lesson walks you through creating multiple layouts easily.

d3 tutorial about Debug D3 v4 with Dev Tools

Debug D3 v4 with Dev Tools

2:44 d3 PRO

Since D3 outputs standard markup, you can use familiar dev tools and inspectors to debug your visualizations. In this lesson we’ll look at how to use Chrome Dev Tools to examine the data associated with your generated markup and experiment with styles to speed up the development process.

d3 tutorial about Animate Transitions in D3 v4

Animate Transitions in D3 v4

5:56 d3 PRO

D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in new items or tweening existing shapes to display new values, adding transitions is easy. This lesson shows you how to add animations while building on your existing knowledge of D3 selections.

d3 tutorial about Reuse Transitions in D3 v4

Reuse Transitions in D3 v4

5:30 d3 PRO

D3 transitions start executing as soon as they’re created, and they’re destroyed once they end. This can present some challenges when attempting to create reusable transitions. This lesson demonstrates how to overcome those challenges using various approaches to reusable transitions.

d3 tutorial about Animate with the General Update Pattern in D3 v4

Animate with the General Update Pattern in D3 v4

13:51 d3 PRO

In D3, the General Update Pattern is the name given to what happens when a data join is followed by operations on the enter, update, and exit selections. When a chart's data changes over time and each update can both create new elements and destroy existing ones, the General Update pattern can help convey meaning to users. This lesson demonstrates the pattern using animated transitions on a column chart.

d3 tutorial about Animate Chart Axis Transitions in D3 v4

Animate Chart Axis Transitions in D3 v4

4:08 d3

When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstrates how to animate and synchronize axis transitions on a column 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?