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.
Overview
Syllabus
- 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
Taught by
Ben Clinkinbeard
