Data Visualization with D3.js Learning Path
Create Interactive Data Visualizations with D3.js

Leverage your web development skills and use D3.js to make your pages come to life with rich, interactive data visualizations!

Total time: 13 hours, 50 minutes

Core Coursework

Take these in order
Prerequisite: JavaScript: From First Steps to Professional or experience with JavaScript and familiarity using a terminal
Editor's Note
Start on your journey turning data into interactive visualizations! Anjana teaches the fundamentals so that you can smoothly transition into D3.js after this course.

Data Visualization First Steps

Anjana Vakil
Anjana Vakil
Software Engineer & Educator

Friendly, high-level intro to basic concepts of data visualization using Observable plot.

3 hours, 27 minutes CC

Data Visualization First Steps
Editor's Note
D3.js lets you use your JavaScript abilities and turn data into visualizations that tell a story. If you use React, you might want to start with the D3.js for React Developers course.

Introduction to D3.js

Shirley Wu
Shirley Wu
Data Sketches

Build custom charts with D3.js using data binding with the enter-update-exit pattern. Learn scales and animation between different D3 layouts.

5 hours, 59 minutes CC

Introduction to D3.js
Editor's Note
This custom data visualization course walks you through the entire process, from designing to developing a visualization from scratch.

Building Custom Data Visualizations

Shirley Wu
Shirley Wu
Data Sketches

Learn visualization principles and process for building custom advanced data visualizations with D3.js and SVG with Shirley Wu.

4 hours, 24 minutes CC

Building Custom Data Visualizations

Elective Coursework

Optional, take in any order

SVG Essentials & Animation, v2

Sarah Drasner
Sarah Drasner
Google

Learn how to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites!

4 hours, 12 minutes CC

SVG Essentials & Animation, v2

Creative Coding with Canvas & WebGL

Matt DesLauriers
Matt DesLauriers
Freelancer

You'll learn about generative art, interactive animations, 3D graphics with ThreeJS, and custom shaders in GLSL. Apply creative coding skills to real-world jobs.

4 hours, 45 minutes CC

Creative Coding with Canvas & WebGL

Advanced Creative Coding with WebGL & Shaders

Matt DesLauriers
Matt DesLauriers
Freelancer

Go deeper into creative coding and 3D graphics programming using WebGL, ThreeJS, and GLSL. In this course, you'll learn 3D vectors and shader effects.

4 hours, 17 minutes CC

Advanced Creative Coding with WebGL & Shaders

Web Audio Synthesis & Visualization

Matt DesLauriers
Matt DesLauriers
Freelancer

Learn to create sounds using nothing but code! Synthesize and visualize audio, and add fun effects with JavaScript. Use these skills to build audio into games, web applications, or even art projects in the browser.

2 hours, 58 minutes CC

Web Audio Synthesis & Visualization

Data Visualization for React Developers

Shirley Wu
Shirley Wu
Data Sketches

Learn the best practices on how to use D3.js and React to generate the data for these visualizations, and how to use React to render them.

3 hours, 21 minutes CC

Data Visualization for React Developers

A Tour of Web Capabilities

Maximiliano Firtman
Maximiliano Firtman
Independent Consultant

Explore what is possible with new Web APIs! Browsers can do so much now, including speech recognition, geolocation, OS integration, face detection, augmented reality, and reading from sensors, external hardware, and devices!

4 hours, 10 minutes CC

A Tour of Web Capabilities