Data Visualizations That Expand Your Visual Literacy
-
Upload
uxpa-boston -
Category
Design
-
view
237 -
download
1
Transcript of Data Visualizations That Expand Your Visual Literacy
![Page 1: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/1.jpg)
Julie Rodriguez
Expanding Our Visual Literacy
@juliargentinaG
![Page 2: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/2.jpg)
ExternalCommunications
Explain Visually
IndividualDisplays
InternalPresentations
CollectedInformation
![Page 3: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/3.jpg)
![Page 4: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/4.jpg)
![Page 5: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/5.jpg)
4. Show then tell
3. Easy to navigate
1. Relevant
2. Scan & scrutinize
Desperately Seeking
![Page 6: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/6.jpg)
![Page 7: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/7.jpg)
![Page 8: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/8.jpg)
![Page 9: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/9.jpg)
![Page 10: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/10.jpg)
![Page 11: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/11.jpg)
![Page 12: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/12.jpg)
![Page 13: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/13.jpg)
![Page 14: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/14.jpg)
Graphical perception Relative ranking
Figure 1. Elementary perceptual tasks, William S. Cleveland; Robert McGillJournal of the American Statistical Association, September 1984
Relative accuracy of various graphical forms that convey quantitative information
POSITIONCOMMON SCALE
10
5
0
POSITIONNON-ALIGNED SCALES
10
0
10
0
LENGTH DIRECTION ANGLE AREA CURVATURE SHADING COLOR SATURATION
VOLUME
1 2 3 4 5 6 7 8 9 10
![Page 15: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/15.jpg)
Alignment & sort order
Why Is This Method Effective
Accuracy & Perception
DesignElements
Foreground/background
Color pallet w/ associations
POSITIONCOMMON SCALE
105
0
POSITIONNON-ALIGNED SCALES
10
0
10
0
LENGTH DIRECTION ANGLE AREA CURVATURE SHADING COLOR SATURATION
VOLUME
1 2 3 4 5 6 7 8 9 10
Figure 1. Elementary perceptual tasks, William S. Cleveland; Robert McGillJournal of the American Statistical Association, September 1984
![Page 16: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/16.jpg)
![Page 17: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/17.jpg)
![Page 18: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/18.jpg)
![Page 19: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/19.jpg)
![Page 20: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/20.jpg)
Why Is This Method Effective
Accuracy & Perception
DesignElements
Foreground/background
Color pallet w/ associations
POSITIONCOMMON SCALE
105
0
POSITIONNON-ALIGNED SCALES
10
0
10
0
LENGTH DIRECTION ANGLE AREA CURVATURE SHADING COLOR SATURATION
VOLUME
1 2 3 4 5 6 7 8 9 10
Figure 1. Elementary perceptual tasks, William S. Cleveland; Robert McGillJournal of the American Statistical Association, September 1984
![Page 21: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/21.jpg)
Embed context into your data displays
![Page 22: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/22.jpg)
![Page 23: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/23.jpg)
![Page 24: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/24.jpg)
![Page 25: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/25.jpg)
![Page 26: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/26.jpg)
![Page 27: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/27.jpg)
![Page 28: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/28.jpg)
![Page 29: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/29.jpg)
![Page 30: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/30.jpg)
![Page 31: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/31.jpg)
![Page 32: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/32.jpg)
![Page 33: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/33.jpg)
![Page 34: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/34.jpg)
![Page 35: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/35.jpg)
Why Is This Method Effective
Accuracy & Perception
DesignElements
Color pallet w/ associations
POSITIONCOMMON SCALE
105
0
POSITIONNON-ALIGNED SCALES
10
0
10
0
LENGTH DIRECTION ANGLE AREA CURVATURE SHADING COLOR SATURATION
VOLUME
1 2 3 4 5 6 7 8 9 10
Figure 1. Elementary perceptual tasks, William S. Cleveland; Robert McGillJournal of the American Statistical Association, September 1984
Alignment & sort order
Proximity/comparison
Details on demand
Grouping Foreground/background
![Page 36: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/36.jpg)
Aggregation enables better data navigation
![Page 37: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/37.jpg)
Statements of Cash Flows
![Page 38: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/38.jpg)
![Page 39: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/39.jpg)
![Page 40: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/40.jpg)
![Page 41: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/41.jpg)
![Page 42: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/42.jpg)
![Page 43: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/43.jpg)
![Page 44: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/44.jpg)
![Page 45: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/45.jpg)
![Page 46: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/46.jpg)
![Page 47: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/47.jpg)
![Page 48: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/48.jpg)
![Page 49: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/49.jpg)
![Page 50: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/50.jpg)
Why Is This Method Effective
DesignElements
Limited color pallet w/ associations
Connectedness Grouping Foreground/background
Accuracy & Perception
POSITIONCOMMON SCALE
105
0
POSITIONNON-ALIGNED SCALES
10
0
10
0
LENGTH DIRECTION ANGLE AREA CURVATURE SHADING COLOR SATURATION
VOLUME
1 2 3 4 5 6 7 8 9 10
Figure 1. Elementary perceptual tasks, William S. Cleveland; Robert McGillJournal of the American Statistical Association, September 1984
![Page 51: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/51.jpg)
Lead with visuals, thenlayer in the text
![Page 52: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/52.jpg)
Easy to navigate
Scan & scrutinize
Relevant
Show then tell
2.
1.
3.
4.
SUMMARY
![Page 53: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/53.jpg)
![Page 54: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/54.jpg)
Structured/Unstructured,Time, Coordinates, String, Numbers,
Nominal, Ordinal, Interval
DATAStructured/Unstructured,
Time, Coordinates, String, Numbers, Nominal, Ordinal, Interval
DATAStructured/Unstructured,
Time, Coordinates, String, Numbers, Nominal, Ordinal, Interval
IndustryClientsFirm
DATA
DRIVERS
Structured/Unstructured,Time, Coordinates, String, Numbers,
Nominal, Ordinal, Interval
IndustryClientsFirm
DATA
DRIVERS
Structured/Unstructured,Time, Coordinates, String, Numbers,
Nominal, Ordinal, Interval
IndustryClientsFirm
User Centered Approach
Information DesignMulti-channel
Experience
DATA
DRIVERSDELIVERY
![Page 55: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/55.jpg)
40+ use cases100+ new visualization methods250+ illustrations450 pages
![Page 56: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/56.jpg)
Explore... Expand...
![Page 57: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/57.jpg)
Questions?
![Page 58: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/58.jpg)
Thank You…
![Page 59: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/59.jpg)
Visualization Tools (spectrum)
CUSTOM SOLUTIONSPREBUILT SOLUTIONS
RAWSpreadsheet to vector graphics built on D3.JS
PlotlyJavaScripting graphing library
SandDanceCollaborative app for visualizing data
IBM Watson AnalyticsDiscovery delivered on the cloud
Online Web Apps Tableau
BI software
QlikViewBI software
Tibco SpotfireData viz and analytics software
SAS Visual AnalyticsBI, Data exploration & analytics
TrifactaExplore and transform data sources
Generalized Software
HighchartsJavaScript library
D3Opensource JavaScript library
Google ChartsReady to use chart types
RSoftware for statistical computing and graphics
Processing IDE for visual communication
Open Source Programing Languages
Charting Packages
MATLABMulti-paradigm numerical computing environment
MathematicaA computation platform
Technical Computing
GephiExploration for graphs and networks
ArcGISMapping software
QGISMapping software
Excel/ Adobe/HTML5Separate tools for data, visualizations, and interactivity
Mix of Tools
Specialized Skillset: Domain Expertise, Data Science, Stats, Programming, Visual DesignNo Specialized Skillset Required
Specialized Software
![Page 60: Data Visualizations That Expand Your Visual Literacy](https://reader031.fdocuments.in/reader031/viewer/2022030318/5a65f8be7f8b9a3d248b4ddd/html5/thumbnails/60.jpg)
Graphical perception (relative ranking)
Journal of the American Statistical Association, September 1984
William S. Cleveland; Robert McGill
Relative accuracy of various graphical forms that convey quantitative information