Build Interactive JavaScript Charts with D3 v4

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.

Course Content

Install and Configure D3 v4

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

Convert Dates to Numeric Values with Time Scales in D3 v4

Create Labels from Numeric Data with Quantize Scales in D3 v4

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

Load and Inspect Data with D3 v4

Select DOM Elements with D3 v4

Modify DOM Elements with D3 v4

Create DOM Elements with D3 v4

Start Visualizing Data Driven Documents with D3 v4

Output SVG Elements with D3 v4

SVG Graphics Containers and Text Elements in D3 v4

Basic Interactivity with D3 v4

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

Margin Convention with D3 v4

Create Chart Axes with D3 v4

Make D3 v4 Charts Responsive with the viewBox attribute

Build a Column Chart with D3 v4

Build a Scatter Plot with D3 v4

Build a Line Chart with D3 v4

Build an Area Chart with D3 v4

Debug D3 v4 with Dev Tools

Animate Transitions in D3 v4

Reuse Transitions in D3 v4

Animate with the General Update Pattern in D3 v4

Animate Chart Axis Transitions in D3 v4