d3 deconstructed · svg webgl javascript python r processing ... d3.js matplotlib c3.js vega...
TRANSCRIPT
![Page 1: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/1.jpg)
D3 Deconstructed
http://feltron.com/FAR13.html
November 14th, 201905-899A CMU, Pittsburgh (not quite freezing, 41℉)
https://jonathanjonathanjonathan.com/d3-deconstructed.pdf
![Page 2: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/2.jpg)
Recap
Act 0
![Page 3: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/3.jpg)
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
![Page 4: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/4.jpg)
The Hierarchy of Technologies
<canvas> SVG WebGL
Javascript Python R Processing
D3.js matplotlib
C3.js Vega ggplot2
Excel
Tableau
![Page 5: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/5.jpg)
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/
![Page 6: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/6.jpg)
Contrasting Cases
Act 1
![Page 7: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/7.jpg)
Live coding:
https://glitch.com/@hopelessoptimism/data-viz
![Page 8: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/8.jpg)
Live coding:
https://glitch.com/@hopelessoptimism/data-viz
![Page 9: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/9.jpg)
HTML CSS
Javascript
Technologies
https://d3js.org/#introduction
![Page 10: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/10.jpg)
Content Style
Dynamism
Technologies
https://d3js.org/#introduction
![Page 11: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/11.jpg)
Selection Scales
Accessors
Technologies
https://d3js.org/#introduction
![Page 12: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/12.jpg)
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
![Page 13: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/13.jpg)
The viz parts Everything else…
Abuse Cases
https://medium.com/@Elijah_Meeks/d3-is-not-a-data-visualization-library-67ba549e8520
![Page 14: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/14.jpg)
D3 ≈ Declarative data DOM
![Page 15: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/15.jpg)
Flexible DynamicPortable+ +
Use Cases
![Page 16: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/16.jpg)
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
![Page 17: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/17.jpg)
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
![Page 18: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/18.jpg)
Inputs OutputsD3
https://medium.com/@Elijah_Meeks/d3-is-not-a-data-visualization-library-67ba549e8520
![Page 19: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/19.jpg)
Resources
![Page 20: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/20.jpg)
D3…not as scary as it may seem
![Page 21: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/21.jpg)
Easy (and Fun to Learn!)
![Page 22: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/22.jpg)
bl.ocks.org blockbuilder.org
d3.orgblocksplorer.org
![Page 23: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/23.jpg)
• 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
![Page 24: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/24.jpg)
• 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
![Page 25: D3 Deconstructed · SVG WebGL Javascript Python R Processing ... D3.js matplotlib C3.js Vega ggplot2 Excel Tableau. In addition to custom design, D3 is intended as](https://reader036.vdocuments.us/reader036/viewer/2022062507/5fcee8fa0c790e438258b266/html5/thumbnails/25.jpg)
Thank You 🙏
http://feltron.com/FAR13.html
https://jonathanjonathanjonathan.com/d3-deconstructed.pdf