D3 v6 Tutorial Table of Contents

D3 v6 Tutorial Part 1: From Zero to Binding Data

Why Data Visualizations
  • A picture is worth 1000 words
  • A Famous Data Visualization
  • Data - now and in the future
  • Data is the new Oil
Why build Data Visualizations with D3.js
  • What is D3.js
  • Who develops D3.js
  • Why use D3.js
  • When you should use D3.js
  • Where is D3.js used
The Data Visualization Process
  • The Ben Fry Visualizing Data Process
  • Acquire
  • Parse
  • Filter
  • Mine
  • Represent
  • Refine
  • Interact
D3 Data Visualization Basic Building Blocks
  • Modern Browsers
  • HTML
  • CSS
  • JavaScript
  • Document Object Model (DOM)
  • Scalable Vector Graphics (SVG)
  • Web Inspector
D3.js First Steps
  • HTML Setup
  • D3.js Setup
  • Source File Setup Test
  • JavaScript Console Setup Test
Adding a DOM Element Using D3.js
  • Basic Example
  • D3.js Select Method
  • D3.js Append Operator
Adding an SVG Element Using D3.js
  • Basic Example
  • D3.js Legibility
  • D3.js Style Operator
  • D3.js Chain Syntax
  • Selections as JavaScript Variables
Use D3.js To Bind Data to DOM Elements
  • Basic Example
  • D3.js SelectAll Method
  • D3.js Data Operator
  • D3.js Virtual Selections (Thinking with Joins)
  • D3.js Enter Method
  • D3.js Append Operator Revisited
  • D3.js Text Operator
  • Where did the Data go?
  • D3.js Data Operator Revisited
  • Basic Example Revisited
Use Data Bound To DOM Elements With D3.js
  • Basic Example
  • D3.js Text Operator Revisited
  • JavaScript Functions in D3.js Operators
  • Variables Available inside D3.js Operators

D3 v6 Tutorial Part 2: Using Data to Create Data Visualizations

Use D3.js To Create SVG Elements Based on Data
  • The Goal
  • Create an SVG Element to Hold SVG Elements
  • SVG Circle Elements
  • Bind Data to SVG Circles
  • Use Bound Data to Alter SVG Circles
  • Styling SVG Elements Based on Data
Using the SVG Coordinate Space With D3.js
  • Mathematical / Graph Coordinate Space
  • SVG Coordinate Space
  • .append('svg') as a Coordinate Space
  • Position SVG Elements in the SVG Coordinate Space
  • Create an SVG Element to Hold SVG Elements
  • Bind Data to SVG Circles
  • Use Bound Data to Alter SVG Circle Coordinates
  • Styling SVG Elements Based on Data Revisited
Data Structures D3.js Accepts
  • What we have seen thus far
  • D3.js Selections are Arrays
  • Loading External Data Resources
D3 JSON Data
  • JSON
  • Array of JSON Objects
  • D3 JSON Data
  • Previous Example of Three Circles
  • Bind JSON Objects to the __data__ Attribute
  • Use Bound JSON Objects to Alter SVG Elements
  1. SVG Basic Shapes and D3.js
  2. The Goal
  3. Drawing an SVG Circle using D3.js
  4. Drawing an SVG Rectangle using D3.js
  5. Drawing an SVG Ellipse using D3.js
  6. Drawing an SVG Straight Line using D3.js
  7. Drawing Polyline & Polygon SVG Basic Shapes using D3.js
  8. SVG Paths and D3.js
  9. The Goal
  10. The Shape to Make All Shapes
  11. SVG Path Example
  12. SVG Path Mini-Language
  13. D3.js Path Data Generator Line Example
  14. D3.js Path Data Generators
  15. Dynamic SVG Coordinate Space
  16. The Goal
  17. Three SVG Rectangle Example
  18. Manually Adjusting SVG Container Space
  19. Dynamically Adjusting SVG Container Space
  20. The Finished Product
  21. D3.js Scales
  22. The Goal
  23. D3.js Scales
  24. A Numerical Example
  25. D3.js Scale Linear
  26. D3.max
  27. D3.min
  28. Other D3.js Scales
  29. SVG Group Element and D3.js
  30. The Goal
  31. SVG Group Element
  32. Grouping SVG Elements Together
  33. Transforming SVG Elements Together (Part 1)
  34. SVG Transform Attribute
  35. Transforming SVG Elements Together (Part 2)
  36. SVG Transform as a Coordinate Space Transformation
  37. Grouping SVG Elements with D3.js
  38. Transforming SVG Elements Together with D3.js
  39. SVG Text Element
  40. The Goal
  41. SVG Text Element
  42. Adding an SVG Text Element
  43. SVG Text Element and D3.js
  44. D3.js Axes
  45. The Goal
  46. D3.js Axis Component
  47. Why We Add Axes
  48. Horizontal Axis and Vertical Axis
  49. Scale of Axis
  50. Generating a D3.js Axis
  51. Calling the D3.js Axis Function