D3 Deconstructed

http://feltron.com/FAR13.html

November 14th, 201905-899A CMU, Pittsburgh (not quite freezing, 41℉)

https://jonathanjonathanjonathan.com/d3-deconstructed.pdf

Recap

Act 0

D3 is intentionally a lower-level library. During

the early design of D3, we even referred to it

as a “visualization kernel” rather than a

“toolkit” or “framework”.

https://vega.github.io/vega/about/vega-and-d3/

Use Cases

The Hierarchy of Technologies

<canvas> SVG WebGL

Javascript Python R Processing

D3.js matplotlib

C3.js Vega ggplot2

Excel

Tableau

In addition to custom design, D3 is intended as

a supporting layer for higher-level visualization tools. Vega is one such tool,

and Vega uses D3 heavily within its

implementation.

Use Cases

https://vega.github.io/vega/about/vega-and-d3/

Contrasting Cases

Act 1

Live coding:

https://glitch.com/@hopelessoptimism/data-viz

Live coding:

https://glitch.com/@hopelessoptimism/data-viz

HTML CSS

Javascript

Technologies

https://d3js.org/#introduction

Content Style

Dynamism

Technologies

https://d3js.org/#introduction

Selection Scales

Accessors

Technologies

https://d3js.org/#introduction

But much of D3 has little to do with graphics

and many of the parts that do aren’t necessary to learn to create effective data visualization.

Abuse Cases

https://medium.com/@Elijah_Meeks/d3-is-not-a-data-visualization-library-67ba549e8520

The viz parts Everything else…

Abuse Cases

https://medium.com/@Elijah_Meeks/d3-is-not-a-data-visualization-library-67ba549e8520

D3 ≈ Declarative data DOM

Flexible DynamicPortable+ +

Use Cases

Process

Explanatory

COMPUTER SCIENCE INFOVISAND HCIGRAPHIC DESIGNMATHEMATICS, STATISTICS,

AND DATA MINING

acquire parse filter mine represent refine interact

Source: Ben Fry -- “Computational Information Design”

Exploratory

Python/R/Tableau D3

COMPUTER SCIENCE INFOVISAND HCIGRAPHIC DESIGNMATHEMATICS, STATISTICS,

AND DATA MINING

acquire parse filter mine represent refine interact

Source: Ben Fry -- “Computational Information Design”

Process

Inputs OutputsD3

https://medium.com/@Elijah_Meeks/d3-is-not-a-data-visualization-library-67ba549e8520

Resources

D3…not as scary as it may seem

Easy (and Fun to Learn!)

bl.ocks.org blockbuilder.org

d3.orgblocksplorer.org

• Introduction to Info and Data Visualization (my USF course)

• Data Visualization (Jeff Heer’s UW course)

• Data Visualization and D3.js (my fairly outdated Udacity course)

Courses

• Intro to D3 Tutorial

• Dashing D3

• Learn JS Data

• D3.js Graph Gallery

• Web based coding environments/platforms

Tutorials

• Interactive Data Visualization for the Web (D3 book)

• D3.js in Action (D3 book)

• Visualization Analysis and Design (general book)

• Fundamentals of Data Visualization (general book)

• Data Visualization: A practical Introduction (general book)

Books

Thank You 🙏

http://feltron.com/FAR13.html

jdinu@cs.cmu.edu

https://jonathanjonathanjonathan.com/d3-deconstructed.pdf