The image cannot be displayed.

Your computer may not have enough memory to open the image, or the image may have been corrupted. Restart your computer, and then open the file again. If the red x still appears, you may have to delete the image and then insert it again.

Principles of Data Visualization

Visualization in D3
 What is D3
! D3 = Data Driven Documents
! Created by Mike Bostock & Jeff Heer
! Dynamic visualization instructions
! Leverage existing web technologies
! New York Times Visualization Lab

2
 Data Driven Documents
! Web pages driven by data sets
! Binding data to graphical SVG elements

CSV File Drives HTML Pages

3
 Data Represented by the DOM
! CSV or JSON file updated in the browser DOM
! DOM becomes the data driver

CSV File DOM

4
 Document Object Model
! Hierarchical structure created during page loading
! Provides access for the Javascipt API
! Functions as a specification to use the data

5
 DOM Drives into SVG Objects
! DOM drives representation of the graphical SVG objects
! Bind objects(data) to the definition of an SVG Object

DOM SVG Graphical Objects

6
 DOM Driving SVG Graphic Objects
! DOM drives the representation of the graphical SVG objects

DOM

rect

7
 Using the D3 Library
! Provides the DOM instructions on how to bind the data
! Data in DOM binds to SVG Objects
! Using D3 instructions

D3 Library InstrucAons

8
 Creating Paragraphs
! Create a paragraph with p
! Select and append paragraph p

D3 Script D3 VisualizaAon

9
 Creating Shapes with D3
! Create a canvas
! Draw shapes on the canvas

D3 Script D3 VisualizaAon

10
 Binding with DOM Objects
! Bind data from an array with DOM Objects
! Append shapes if additional data exists in the array
D3 Script
D3 VisualizaAon

11
 Data Driving Visualization Page
! Values in the array are driving the size of the bars
! Values in the array are driving the location of the bars

D3 Script D3 VisualizaAon

12
 Data Driving Visualization Page
! Added a 4th value to the array (and nothing else)
! The 4th data value drove the 4th bar
D3 Script D3 VisualizaAon

13
 Assigned Scales
! Data drives the sizing of the bars
! Width and color of the bars are assigned
D3 Script D3 VisualizaAon

14
 Data Driven Scaling
! Width and color are defined by scaling from data in the array
D3 Script D3 VisualizaAon

15
 Using D3 Statements
! Statements bring forward requested values

D3 Script D3 VisualizaAon

16
 D3 Animated Transitions
! Animation can be added to objects with transitions

D3 Script D3 VisualizaAon

17
 Bootstrapping with D3
! Find examples of D3 to serve as a model
! Review the Visualization
! Analyze the code and data files
! Recreate visualization as designed
! Change data files for visualization
! Adjust code for functionality

18
Find D3 Examples

19
 Find D3 Examples
! Search the web for D3 Examples

20
Open GitHub Gallery

21
View the Selected Visualization
! Examples may contain the
following code sections
! index.html
! Filename.json
! Filename.css
! Filename.csv
! Filename.js
! Many others

22
Review Code and Data Files

23
Replicate Visualization Code

Copy & Paste

Lines of Code

Save New File

24
 Identify Data Files
! Create searches in the .html or .js code using Find
! Search for .csv
! Search for .json
! Search for .css
! Replicate existing visualization in development environment

25
 Change Data Files
! Compare existing data files with new data files
! Adjust new data file structures as appropriate
! Save the new data files
! Update new data file names in the code

26
Update New Data Files in Code
Index.html

27
Test the Visualization

28
 Adjust Code for Functionality

IteraAve Code
Adjustments

29
 In Class Assignment
! Search for a D3 example that matches a previous visualization
! Recreate that visualization
! Update the visualization with your data files
! Previous project
! New project
! Fun data you carry around in your pocket

30