cse512 :: 28 jan 2014 visualization...
TRANSCRIPT
![Page 1: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/1.jpg)
CSE512 :: 28 Jan 2014
Visualization Tools
Je!rey Heer University of Washington
1
![Page 2: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/2.jpg)
How do people create visualizations?
Chart TypologyPick from a stock of templatesEasy-to-use but limited expressivenessProhibits novel designs, new data types
Component ArchitecturePermits more combinatorial possibilitiesNovel views require new operators, which requires software engineering.
2
![Page 3: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/3.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
3
![Page 4: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/4.jpg)
http://processing.org
4
![Page 5: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/5.jpg)
US Air Tra!c, Aaron Koblin
5
![Page 6: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/6.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
6
![Page 7: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/7.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
7
![Page 8: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/8.jpg)
Raw Data Data Tables
Visual Structures Views
Data Visual Form
Data Transformations
Visual Encodings
View Transformations
Task
8
![Page 9: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/9.jpg)
Data State Model[Chi 98]
Filter
9
![Page 10: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/10.jpg)
10
![Page 11: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/11.jpg)
Prefuse & FlareOperator-based toolkits for visualization designVis = (Input Data Visual Objects) + Operators
Prefuse (http://prefuse.org) Flare (http://flare.prefuse.org)
11
![Page 12: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/12.jpg)
Panopoly of visualizations
12
![Page 13: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/13.jpg)
13
![Page 14: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/14.jpg)
?14
![Page 15: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/15.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
15
![Page 16: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/16.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
16
![Page 17: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/17.jpg)
Chart Typologies17
![Page 18: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/18.jpg)
18
![Page 19: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/19.jpg)
19
![Page 20: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/20.jpg)
20
![Page 21: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/21.jpg)
21
![Page 22: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/22.jpg)
[M]ost charting packages channel user requests into a rigid array of chart types. To atone for this lack of flexibility, they o!er a kit of post-creation editing tools to return the image to what the user originally envisioned. They give the user an impression of having explored data rather than the experience.
Leland Wilkinson, The Grammar of Graphics
22
![Page 23: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/23.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
23
![Page 24: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/24.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
24
![Page 25: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/25.jpg)
25
![Page 26: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/26.jpg)
PolarisResearch at Stanford by Stolte, Tang, and Hanrahan.
26
![Page 27: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/27.jpg)
Polaris / Tableau Approach
Insight: can simultaneously specify both database queries and visualization
Choose data, then visualization, not vice versa
Use smart defaults for visual encodings
More recently: automate visualization design
27
![Page 28: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/28.jpg)
Specifying Table Configurations
Operands are the database fields Each operand interpreted as a set {…} Quantitative and Ordinal fields treated di"erently
Three operators: concatenation (+) cross product (x) nest (/)
28
![Page 29: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/29.jpg)
Table Algebra: Operands
Ordinal fields: interpret domain as a set that partitions table into rows and columns.
Quarter = {(Qtr1),(Qtr2),(Qtr3),(Qtr4)}
Quantitative fields: treat domain as single element set and encode spatially as axes:
Profit = {(Profit[-410,650])}
29
![Page 30: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/30.jpg)
Concatenation (+) Operator
Ordered union of set interpretations
Quarter + Product Type = {(Qtr1),(Qtr2),(Qtr3),(Qtr4)} + {(Co"ee), (Espresso)} = {(Qtr1),(Qtr2),(Qtr3),(Qtr4),(Co"ee),(Espresso)}
Profit + Sales = {(Profit[-310,620]),(Sales[0,1000])}
30
![Page 31: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/31.jpg)
Cross (x) Operator
Cross-product of set interpretations
Quarter x Product Type = {(Qtr1,Co"ee), (Qtr1, Tea), (Qtr2, Co"ee), (Qtr2, Tea), (Qtr3,
Co"ee), (Qtr3, Tea), (Qtr4, Co"ee), (Qtr4,Tea)}
Product Type x Profit =
31
![Page 32: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/32.jpg)
Nest (/) Operator
Cross-product filtered by existing records
Quarter x Month creates twelve entries for each quarter. i.e.,
(Qtr1, December)
Quarter / Month creates three entries per quarter based on
tuples in database (not semantics)
32
![Page 33: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/33.jpg)
Table Algebra
The operators (+, x, /) and operands (O, Q) provide an algebra for tabular visualization.
Algebraic statements are then mapped to: Queries - selection, projection, group-by aggregation Visualizations - trellis plot partitions, visual encodings
In Tableau, users make statements via drag-and-drop Note that this specifies operands NOT operators! Operators are inferred by data type (O, Q)
33
![Page 34: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/34.jpg)
Querying the Database
34
![Page 35: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/35.jpg)
Ordinal - Ordinal
Ordinal - Ordinal
35
![Page 36: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/36.jpg)
Quantitative - Quantitative
36
![Page 37: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/37.jpg)
Ordinal - Quantitative
37
![Page 38: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/38.jpg)
38
![Page 39: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/39.jpg)
Grammar of Graphics [Wilkinson, Wickham]
DataOperatorsCoordinatesScalesGuidesMarks
Input data to visualizeGrouping, statistics, layoutCartesian & polar coordinatesMap data values to visual valuesAxes & legends visualize scalesGeometric primitives
39
![Page 40: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/40.jpg)
ggplot(diamonds, aes(x=price, fill=cut)) + geom_bar(position="dodge")
40
![Page 41: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/41.jpg)
41
![Page 42: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/42.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, Processing
42
![Page 43: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/43.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, ProcessingE"
cien
cy
43
![Page 44: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/44.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, ProcessingE"
cien
cyExpressiveness
44
![Page 45: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/45.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
?Component Model Architectures
Prefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, ProcessingE"
cien
cyExpressiveness
45
![Page 46: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/46.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
Visualization GrammarsProtovis, D3.js, Vega
Component Model ArchitecturesPrefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, ProcessingE"
cien
cyExpressiveness
46
![Page 47: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/47.jpg)
Protovis & D3
47
![Page 48: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/48.jpg)
Today's first task is not to invent wholly new [graphical] techniques, though these are needed. Rather we need most vitally to recognize and reorganize the essential of old techniques, to make easy their assembly in new ways, and to modify their external appearances to fit the new opportunities.
J. W. Tukey, The Future of Data Analysis, 1962.
48
![Page 49: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/49.jpg)
Protovis: A Language for Visualization
A graphic is a composition of data-representative marks.
with Mike Bostock & Vadim Ogievetsky
49
![Page 50: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/50.jpg)
Area Bar Dot Image
Line Label Rule Wedge
MARKS: Protovis graphical primitives
50
![Page 51: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/51.jpg)
data λvisible λleft λbottom λwidth λheight λfillStyle λstrokeStyle λlineWidth λ... λ
λ : D → RMARK
51
![Page 52: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/52.jpg)
datavisible tru eleft λ: index * 25bottom 0width 20height λ: datum * 80fillStyle bluestrokeStyle blacklineWidth 1.5... ...
λ : D → RBAR1 1.2 1.7 1.5 0.7
52
![Page 53: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/53.jpg)
1 1.2 1.7 1.5 0.7datavisible tru eleft 0 * 25bottom 0width 20height 1 * 80fillStyle bluestrokeStyle blacklineWidth 1.5... ...
λ : D → RBAR
53
![Page 54: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/54.jpg)
1 1.2 1.7 1.5 0.7datavisible tru eleft 1 * 25bottom 0width 20height 1.2 * 80fillStyle bluestrokeStyle blacklineWidth 1.5... ...
λ : D → RBAR
54
![Page 55: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/55.jpg)
1 1.2 1.7 1.5 0.7datavisible tru eleft 2 * 25bottom 0width 20height 1.7 * 80fillStyle bluestrokeStyle blacklineWidth 1.5... ...
λ : D → RBAR
55
![Page 56: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/56.jpg)
1 1.2 1.7 1.5 0.7datavisible tru eleft 3 * 25bottom 0width 20height 1.5 * 80fillStyle bluestrokeStyle blacklineWidth 1.5... ...
λ : D → RBAR
56
![Page 57: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/57.jpg)
1 1.2 1.7 1.5 0.7datavisible tru eleft 4 * 25bottom 0width 20height 0.7 * 80fillStyle bluestrokeStyle blacklineWidth 1.5... ...
λ : D → RBAR
57
![Page 58: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/58.jpg)
datavisible tru eleft λ: index * 25bottom 0width 20height λ: datum * 80fillStyle bluestrokeStyle blacklineWidth 1.5... ...
λ : D → RBAR1 1.2 1.7 1.5 0.7
58
![Page 59: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/59.jpg)
var vis = new pv.Panel();vis.add(pv.Bar) .data([1, 1.2, 1.7, 1.5, 0.7]) .visible(true) .left(function(d) this.index * 25); .bottom(0) .width(20) .height(function(d) d * 80) .fillStyle(“blue”) .strokeStyle(“black”) .lineWidth(1.5);vis.render();
59
![Page 60: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/60.jpg)
var data = [[3,4,5,3], [3,5,1,2]];
var vis = new pv.Panel() .data(data) .height(50);
vis.add(pv.Line) .left(function(d) this.index * 50) .bottom(function(d) d * 10) .strokeStyle("#3a68a4").add(pv.Dot);
vis.render();
60
![Page 61: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/61.jpg)
61
![Page 62: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/62.jpg)
RenderOpenGL, Java2D, … Event Handling
DOM -> Protovis.on(“mousemove", function(d,i) {...})
62
![Page 63: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/63.jpg)
Productivity - Faster Design Cycle, Less CodeComparison: 5x less code, 10x less dev time
Portability - Multiple ImplementationsJavaScript, Adobe Flash, Java/JVM
Performance - Optimization (in Protovis-Java)Just-in-time compilation; parallel executionHardware accelerated renderingUp to 20x scalability boost over prior toolkits
63
![Page 64: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/64.jpg)
vis.add(pv.Rule).data([0,-10,-20,-30]) .top(function(d) 300 - 2*d - 0.5).left(200).right(150) .lineWidth(1).strokeStyle("#ccc") .anchor("right").add(pv.Label) .font("italic 10px Georgia") .text(function(d) d+"°").textBaseline("center");
vis.add(pv.Line).data(napoleon.temp) .left(lon).top(tmp) .strokeStyle("#0") .add(pv.Label) .top(function(d) 5 + tmp(d)) .text(function(d) d.temp+"° "+d.date.substr(0,6)) .textBaseline("top").font("italic 10px Georgia");
var army = pv.nest(napoleon.army, "dir", "group“);var vis = new pv.Panel();
var lines = vis.add(pv.Panel).data(army);lines.add(pv.Line) .data(function() army[this.idx]) .left(lon).top(lat).size(function(d) d.size/8000) .strokeStyle(function() color[army[paneIndex]
[0].dir]);
vis.add(pv.Label).data(napoleon.cities) .left(lon).top(lat) .text(function(d) d.city).font("italic 10px Georgia") .textAlign("center").textBaseline("middle");
64
![Page 65: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/65.jpg)
d3.js Data-Driven Documents
with Mike Bostock & Vadim Ogievetsky
65
![Page 66: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/66.jpg)
ProtovisSpecialized mark types + Streamlined design - Limits expressiveness - More overhead (slower) - Harder to debug - Self-contained model
Specify a scene (nouns) + Quick for static vis - Delayed evaluation - Animation, interaction
are more cumbersome
66
![Page 67: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/67.jpg)
ProtovisSpecialized mark types + Streamlined design - Limits expressiveness - More overhead (slower) - Harder to debug - Self-contained model
Specify a scene (nouns) + Quick for static vis - Delayed evaluation - Animation, interaction
are more cumbersome
D3Bind data to DOM - Exposes SVG/CSS/… + Exposes SVG/CSS/… + Less overhead (faster) + Debug in browser + Use with other tools
Transform a scene (verbs)
- More complex model + Immediate evaluation + Dynamic data, animation,
and interaction natural
67
![Page 68: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/68.jpg)
Selection + Data Join
68
![Page 69: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/69.jpg)
Chart TypologiesExcel, Many Eyes, Google Charts
Visual Analysis LanguagesTableau VizQL, ggplot2
Visualization GrammarsProtovis, D3.js, Vega
Component Model ArchitecturesPrefuse, Flare, Improvise
Graphics APIs OpenGL, Java2D, GDI+, ProcessingE"
cien
cyExpressiveness
69
![Page 70: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/70.jpg)
Administrivia
70
![Page 71: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/71.jpg)
Assignment 2: Exploratory Data Analysis
Use visualization software to form & answer questionsFirst steps: Step 1: Pick domain & data Step 2: Pose questions Step 3: Profile the data Iterate as neededCreate visualizations Interact with data Refine your questionsMake wiki notebook Keep record of your analysis Prepare a final graphic and caption
Due by 5:00pmMonday, Jan 27DONE
71
![Page 72: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/72.jpg)
A3: Interactive Visualization
Create an interactive visualization application. Choose a data domain and select an appropriate visualization technique.
1. Choose a data set and storyboard your interface2. Implement the interface using tools of your choice3. Submit your application and produce a final write-up
You should work in groups of 2.Due by 5pm on Monday, February 10
72
![Page 73: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/73.jpg)
Assignment 3: Project Partners
For A3, you should work in groups of 2.
If you do not have a partner, you should1) Use the facilities on Piazza2) Stay after class to meet potential partners
73
![Page 74: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/74.jpg)
Assignment 3 Tips1) Start now. It will take longer than you think.2) Keep it simple. (Eschew the kitchen sink.)
Choose the minimal set of interactions that enables users to explore and generate interesting insights. Keep the design clean.
3) Promote engagement. How do your chosen interactions reveal interesting observations?
74
![Page 75: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/75.jpg)
Comparing Approaches
75
![Page 76: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/76.jpg)
No Humble Pie
76
![Page 77: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/77.jpg)
Pie Chart: Processingsize(150, 150); background(255);smooth(); noStroke();int diameter = 140;float[] data = {1, 1.2, 1.7, 1.5, .7};float lastAng = 0, sum = 0;for (int i = 0; i < data.length; i++) sum += data[i];for (int i = 0; i < data.length; i++) { fill(data[i] * 120); float ang = data[i] / sum * 2 * PI; arc(width / 2, height / 2, diameter, diameter, lastAng, lastAng + ang);
lastAng += ang;}
77
![Page 78: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/78.jpg)
Pie Chart: Flarevar data:Data = Data.fromArray( [{value:1}, {value:1.2}, {value:1.7}, ...]);var vis:Visualization = new Visualization(data);
vis.bounds = new Rectangle(0, 0, 150, 150);vis.operators.add(new PieLayout("data.value", 0.9));vis.operators.add(new ColorEncoder( "data.value", "nodes", "fillColor"));
vis.update();addChild(vis);
78
![Page 79: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/79.jpg)
Pie Chart: Protovisvar vis = new pv.Panel() .width(150) .height(150).add(pv.Wedge) .left(75) .bottom(75) .outerRadius(70) .angle(function(d) { return d * 2 * Math.PI; }) .data(pv.normalize([1, 1.2, 1.7, 1.5, .7]));
vis.render();
79
![Page 80: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/80.jpg)
Pie Chart: D3var data = [1, 1.2, 1.7, 1.5, .7];var color = d3.scale.category20();var svg = d3.select("body").append("svg") .attr("width", 150) .attr("height", 150);var g = svg.append("g") .attr("transform", "translate(75, 75)");var arcs = g.selectAll("path") .data(d3.layout.pie().sort(null)(data)) .enter().append("path") .style("fill", function(d,i) { return color(i); }) .attr("d", d3.svg.arc().innerRadius(0).outerRadius(70));
80
![Page 81: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/81.jpg)
Vega & Lyra
81
![Page 83: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/83.jpg)
Area Rect Symbol Image
Line Text Rule Arc
MARKS: Vega graphical primitives
83
![Page 84: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/84.jpg)
Vega Grammar
DataTransformsScalesGuidesMarks
Input data to visualizeGrouping, stats, projection, layoutMap data values to visual valuesAxes & legends visualize scalesData-representative graphics
Area Rect Symbol Image
Line Text Rule Arc
84
![Page 85: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/85.jpg)
{ "name": "pie", "width": 150, "height": 150, "data": [{ "name": "table", "values": [1, 1.2, 1.7, 1.5, 0.7], "transform": [{"type": "pie", "value": "data"}] }], "scales": [ {"name": "color", "type": "ordinal", "range": "category20"} ], "marks": [{ "type": "arc", "from": {"data": "table"}, "properties": { "enter": { "x": {"group": "width", "mult": 0.5}, "y": {"group": "height", "mult": 0.5}, "startAngle": {"field": "startAngle"}, "endAngle": {"field": "endAngle"}, "innerRadius": {"value": 0}, "outerRadius": {"value": 70}, "fill": {"scale": "color", "field": "index"} } } }]}
85
![Page 86: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/86.jpg)
Vega Design Goals
Balancing rapid + expressive designProtovis-style marks, data transforms & layouts
Reuse & sharing of visualization designsJSON format -> chart components or stand-alone vis
Support programmatic generationProvides an intermediate specification language
Performance & platform flexibilityBrowser or server-side; Canvas or SVG
86
![Page 87: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/87.jpg)
For the highest level graphics (elegant, custom, expensive), enter the crunched data or the graphical output into Adobe Illustrator. ...This program gives complete control over typography, line weight, color, grids, layout--just what we need for doing graphical work.
It is a serious, complex design program; you may want to work with real graphical designers who will surely know their way around Illustrator.
Tufte, E. Ask E.T.: Graphics Software, April 2001
87
![Page 88: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/88.jpg)
88
![Page 89: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/89.jpg)
89
![Page 90: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/90.jpg)
90
![Page 91: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/91.jpg)
91
![Page 92: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/92.jpg)
92
![Page 93: CSE512 :: 28 Jan 2014 Visualization Toolscourses.cs.washington.edu/courses/cse512/14wi/lectures/CSE512-Tools.pdf · Protovis, D3.js, Vega Component Model Architectures ... D → R](https://reader030.vdocument.in/reader030/viewer/2022041123/5d2e3b4088c99351148daa73/html5/thumbnails/93.jpg)
93