Here it is.

d3-in-motion

Code examples and references for the course "D3.js in Motion". (WORK IN PROGRESS)

Uses the example-viewer package.

D3 Overview

• D3 Paper (PDF)
• Most Popular GitHub Repositories
• d3js.org
• D3 Wiki Home
• D3 Gallery
• bl.ocks.org/mbostock
• D3 index.js
• D3 API Documentation
• D3 4.0 Migration Guide
• D3 Mailing List
• D3 StackOverflow
• blockbuilder.org
• blockbuilder.org/search
• Bar Chart Example

Some Examples to Inspire

• bl.ocks.org/curran
• Horizontal Bar Chart
• Religions Bar Chart
• Colored Bar Chart
• Splitting a Rectangle
• Grouped Bars
• Stacked Bars
• Religions of Largest 20 Countries
• Circle Area Chart
• Scatter Plot
• World City Explorer
• Colored Circle Area Chart
• Religions Pie Chart
• Religions Donut Chart
• Polar Area Diagram
• Polar Area Small Multiples
• Pie Chart Small Multiples
• Donut Chart Small Multiples
• Sized Pie Charts
• Sized Donut Charts
• World Population Line Chart
• Standalone Line Chart
• Multi-Line Chart of Largest Countries
• Stacked Area Chart
• Mortality
• Map & Globe
• Cross Country Trip
• Linked Scatter Plot and Bar Chart
• World Countries Hierarchy
• Global Migration in 2015
• Crossfilter & Chiasm
• Moon
• Moon Calendar
• Interactive Scatter Plot
• Density-based Ticks
• Periodex
• Tree Fractal with SVG

Getting Started with Bl.ocks.org and Blockbuilder

• bl.ocks.org
• Force-Directed Graph
• Force-Directed Graph Gist
• live-server
• Mike Bostock’s Blocks
• Elijah Meeks’s Blocks
• Ian Johnson’s Blocks
• About Blockbuilder
• fresh block
• Blockbuilder Bookmarklet
• HTML Starter (Block)
• HTML Starter in Blockbuilder
• Hello D3 (Block)
• Hello D3 in Blockbuilder
• Hello D3 Gist

Building a Basic Bar Chart

• Countries and dependencies by population (Wikipedia)
• Horizontal Bar Chart
• d3-selection
  • d3.select(selector)
  • selection.append(type)
  • selection.text([value])
  • selection.attr(name[, value])
  • selection.style(name[, value[, priority]])
  • d3.selectAll(selector)
  • selection.data([data[, key]])
  • selection.enter()
  • selection.merge(other)
• Hello D3 with Data (Block)

The Vocabulary of D3

This first unit covers the terms, technologies and tools that we'll need as our foundataion for working with D3.

Throughout the course, we'll use Blockbuilder.org to edit code examples and publish them to bl.ocks.org.

We highly recommend using the Blockbuilder Bookmarklet.

HTML Starter

SVG Graphics

Reference links:

• Scalable Vector Graphics - Wikipedia
• SVG Element Reference - MDN
• SVG Paths Tutorial - MDN

Code examples:

SVG Basics

D3 Selections

The Margin Convention

Working with Data

Loading and Parsing Data

Scales

Axes