D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega...
Transcript of D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega...
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
https://jonathanjonathanjonathan.com/d3-deconstructed.pdf