Elaine Li's presentation from the UXPA Boston 2018 Conference

1. © 2018 Autodesk, Inc.
UXPA Boston 2018
Art of Information:
A Guide to Data Visualization
Elaine (Yiran) Li
Experience Designer, Autodesk | @elaineyiranli

2. Elaine (Yiran) Li
§ Human being with lots of:
Curiosity + Patience + Empathy
§ Experience Designer
§ Infrastructure Design, Autodesk
Make Anything

3. Brief introduction about data
visualization’s purpose,
common data relationship
and visualization style.
Our design process to
visualize data and make civil
engineers’ work easier and
more efficient.
What How

4. Art of Information:
A Guide to Data Visualization

5. Data Visualization
Data Information
[‘Subject’,
‘count’], [‘Physics’,
22], [‘Math’, 10],
[‘Chemistry’, 12] [‘Art’,
24], [‘History’,
15], [‘Geography’, 21] ,
Raw Unorganized Processed Structured

6. Human exploration of
Data Visualization
started way before today’s information age
1137 1786 1815 1856 20141973 Today1490
Information Age

7. Cartography
Map of the Tracks of Yu, carved into stone,
1137
A Geological Map of England and Wales
and Part of Scotland
-William Smith, 1815
Map of Boston
-National Geographic, Esri, Garmin et al.,
2018
1137 20181815

8. Statistic
Chart Showing the Value of Quarter of Wheat in Shilling & in
Days Wages of a Good Mechanic from 1565 to 1821
-William Playfair, 1786 Diagram of the Causes of Mortality in the Army in the East
-Florence Nightingale, 1856
1786 1856

9. Purpose

10. Elicit a Strong Emotional Response

11. Induce an Exact/Analytical Response
How the Recession Reshaped the Economy
-Jeremy Ashkenas and Alicia Parlapiano, 2014

12. Visualize Data Relationships

13. SpatialTemporal
Hierarchical Networked

14. Temporal Data
Data that represents a state in time
AnimationArea Chart
What Happens Over Time

15. Temporal Data
Data that represents a state in time
Gantt Chart
Schedule

16. Spatial Data
Data that relates to the physical world
Choropleth Map Dot Map Contour Map 3D Model
Planar Volumetric

17. Hierarchical Data
Data that relates to positions in a defined hierarchy
Tree MapTree Diagram

18. Networked Data
Data that connects to each other
Network Diagram Chord Diagram

19. Our Story

20. Stages of Data Visualization Design
Purpose Relation Visualize Enhance Validate

21. Flood Simulation
Visualize Coastal or Inland Flood Risk
Purpose Relation Visualize Enhance Validate
• Analyze flood risk based on
historical rainfall data in the area
• Make infrastructure design
decision to avoid flood

22. Temporal Data + Spatial Data
1. Inflow Data
2. Area for Analysis
3. Location of inflow
4. Location of outflow
Input
Purpose Relation Visualize Enhance Validate
Output
Example of inflow data
(usually comes from database e.g. USGS)

23. Purpose Relation Visualize Enhance Validate
Visualize
Input Output

24. Purpose Relation Visualize Enhance Validate
Use Visual Properties to Define Different Levels of Data

25. Water VelocityDepthWater Surface Elevation
Purpose Relation Visualize Enhance Validate
Layering and Separation

26. Purpose Relation Visualize Enhance Validate
Progressive Disclosure

27. Road Edit
Visualize and Edit Road Profile
Purpose Relation Visualize Enhance Validate
• As the result of flood simulation,
some roads needs to be raised to
avoid flood

28. Designer’s Vision
Edit the spatial data for road elevation within 3D Model
Purpose Relation Visualize Enhance Validate
Existing Road Proposed Road

29. What Civil Engineer Do
2D Profile view
Purpose Relation Visualize Enhance Validate
Fill Cut

30. Enhancement Based on 2D Profile View
Fill Cut
Purpose Relationship Visualize Enhance Validate

31. Revised Design
Indicate 2D data in 3D canvas
Purpose Relation Visualize Enhance Validate

32. Learn from our
predecessors for
basic visualization
style, express
interactivity and
creativity with
technology and form
factor.
Purpose is the
foundation of your
project.
Even you are capable
of creating great
visualization, always
be humble in front of
your audience.
Define Validate
Purpose Relation Visualize Enhance Validate
Inspire

33. Resources
§ The Data Visualization Catalogue https://datavizcatalogue.com/
§ Envisioning Information, Edward Tufte
§ The Truthful Art: Data, Charts, and Maps for Communication, Alberto Cairo

34. Thank You!