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