D3 Tutorial

This tutorial is an introduction to D3.js, built for ACS 4310 Data Visualization with JavaScript.

How to use this repo: Work through the Core Path in order — these are short and cover the core concepts you need. After that, you don't need to do the rest in order. Find a dataset, pick an idea for a visualization, then jump into whichever Build a Visualization tutorial matches what you want to make. Come back for another topic whenever you start your next visualization.

Core Path

Start here, in order. These are all short.

• 01 Intro to D3
• 02 Working with SVG
• 03 Loading Data
• 04 Scales
• 05 Groups
• 06 Challenges
• 07 Paths
• 08 Axis
• 09 Bars

Build a Visualization: Choose Your Path

Once you have an idea and a dataset, pick the tutorial that matches the kind of chart you want to build.

Charts & Graphs

• 10 Scatterplots and color scales
• 11 Areas
• 13 Pie Charts
• 20 Stacked Bars

Maps

• 17 D3 Maps
• 18 D3 Maps Part 2

Hierarchy & Flow

• 14 Pack
• 15 Hierarchy
• 21 Sankey Chart

Interaction & Polish

• 12 Interaction
• 22 Custom Shapes

Advanced / Framework Integration

• 16 D3 React
• 19 D3 Join API

Bonus

Optional detours from the main path — not required for the three-visualization project, but worth exploring if the topic interests you.

• 23 Make a Website with D3 — pushes D3's data-binding beyond charts, into ordinary page structure.
• Audio Visualizer — a different angle on data viz: sound, analyzed and drawn in real time instead of loaded from a file.