Course Content

• 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
• 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
• Basic Example
• D3.js Select Method
• D3.js Append Operator
• Adding an SVG element
• Basic Examples
• D3.js Legibility
• D3.js Style Operator
• D3.js Chain Syntax
• Selections as JavaScript Variables
• Binding 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
• Using Data Bound to DOM Elements
• Basic Example
• D3.js Text Operator Revisited
• JavaScript Functions in D3.js Operators
• Variables Available inside D3.js Operators
• Creating SVG Elements Based on Data
• 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
• 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
• JSON
• Array of JSON Objects
• Using JSON to Simplify Code
• Previous Example of Three Circles
• Bind JSON Objects to the __data__ Attribute
• Use Bound JSON Objects to Alter SVG Elements
• SVG Basic Shapes and D3.js
• Drawing an SVG Circle using D3.js
• Drawing an SVG Rectangle using D3.js
• Drawing an SVG Ellipse using D3.js
• Drawing an SVG Straight Line using D3.js
• Drawing Polyline & Polygon SVG Basic Shapes using D3.js
• SVG Paths and D3.js
• The Shape to Make All Shapes
• SVG Path Example
• SVG Path Mini-Language
• D3.js Path Data Generator Line Example
• D3.js Path Data Generators
• Dynamic SVG Coordinate Space
• Three SVG Rectangle Example
• Manually Adjusting SVG Container Space
• Dynamically Adjusting SVG Container Space
• The Finished Product
• D3.js Scales
• D3.js Scales
• A Numerical Example
• D3.js Scale Linear
• D3.max
• D3.min
• Other D3.js Scales
• SVG Group Element and D3.js
• SVG Group Element
• Grouping SVG Elements Together
• Transforming SVG Elements Together (Part 1)
• SVG Transform Attribute
• Transforming SVG Elements Together (Part 2)
• SVG Transform as a Coordinate Space Transformation
• Grouping SVG Elements with D3.js
• Transforming SVG Elements Together with D3.js
• SVG Text Element
• SVG Text Element
• Adding an SVG Text Element
• SVG Text Element and D3.js
• D3.js Axes
• D3.js Axis Component
• Why We Add Axes
• Horizontal Axis and Vertical Axis
• Scale of Axis
• Generating a D3.js Axis
• Calling the D3.js Axis Function