DESIGN THINKING FOR VISUALIZATION Steven Braun Informatics/Data Services Specialist University of Minnesota, Health Sciences Libraries DASHCamp 2014
OBJECTIVE Become more critical consumers and producers of data visualization (and maybe learn a tiny itty bit about D3.js)
Overview I. Introduction II. Activity III. Design thinking IV. D3, in brief V. Workshop time Our world is visual What makes a good visualization? Principles of visual perception Design thinking for visualization, in D3.js Visualization sandbox
WORKSHOP TOOLBOX
Our world is visual In what way(s) do you encounter data visualization each day? How do you use data visualization in your work? What data visualization platforms have you used?
Our world is visual THREE AXIOMS 1 Data visualization is intuitive 2 Data visualization engages and invites the viewer to ask more questions 3 Data visualization facilitates discovery
ACTIVITY Design Thinking for Visualization
ACTIVITY Design Thinking for Visualization 1 2 3 Explore the visualization galleries at 1 or 2 of these websites: visualizing.org visual.ly vizualize.tumblr.com Find 1-2 examples of good and 1-2 examples of not so good visualization techniques and write down how you rationalized your judgment In small groups, create a list of features or elements that you believe are critical to good design thinking in visualization. What makes a good visualization? (intuitive, engaging, facilitating) 10 M I N U T E S
Principles of visual perception Visualization helps make complex data accessible and understandable How? By mapping visual cognition resources to our spatial reasoning abilities
Principles of visual perception Gestalt laws of perceptual organization dominate in fast visual cognition We can leverage these principles to optimize our three axioms intuitive, engaging, facilitating discovery
Principles of visual perception LAW OF SIMILARITY Visually similar objects form a group
Principles of visual perception COLOR
Principles of visual perception COLOR
Principles of visual perception VALUE
Principles of visual perception VALUE
Principles of visual perception TEXTURE
Principles of visual perception TEXTURE
Principles of visual perception SIZE
Principles of visual perception SIZE
Principles of visual perception LAW OF PROXIMITY Objects close in space form a group
Principles of visual perception PROXIMITY
Principles of visual perception LAW OF PRÄGNANZ Cognitive load is optimized by reduction to the simplest form
Principles of visual perception PRÄGNANZ
Principles of visual perception PRÄGNANZ
Principles of visual perception LAW OF ISOMORPHIC CORRESPONDENCE A viewer s interpretation of a visualization is dictated by past experience
Principles of visual perception ISOMORPHIC CORRESPONDENCE
Principles of visual perception We can leverage these principles of perceptual organization to optimize our three axioms intuitive, engaging, facilitating discovery
Principles of visual perception Careful design helps avoid inadvertent misconceptions (and lying)
https://visualisingadvocacy.org/blog/disinformation-visualization-how-lie-datavis
https://visualisingadvocacy.org/blog/disinformation-visualization-how-lie-datavis
https://visualisingadvocacy.org/blog/disinformation-visualization-how-lie-datavis
D3 for visualization design The D3.js library can help us hone our design thinking for visualization D3 = data-driven documents = question-driven visualization
http://bl.ocks.org/mbostock/3885304 http://bl.ocks.org/mbostock/3884955
http://bl.ocks.org/mbostock/3887118 http://bl.ocks.org/mbostock/3887235
http://bl.ocks.org/mbostock/4060606
http://bl.ocks.org/mbostock/4062045
http://bl.ocks.org/mbostock/7586334
D3 for visualization design The D3 library can help us hone our design thinking for data
Data practices for visualization Data structured for visualization is minimalist and versatile CSV TSV JSON XML
Data practices for visualization All data is fundamentally structured in terms of arrays CSV TSV JSON XML
Data practices for visualization When we transform data from arrays into structured file formats, we lose typecasting information
GROUP WORKSHOP Visualization Sandbox
GROUP WORKSHOP Visualization Sandbox OPTIONS Together, we can take one participant s data set and format it for visualization with D3; using this data, we can walk through how to create a simple scatterplot We can spend our time working individually and/or in small groups on participants visualization projects, offering a space to share ideas and troubleshoot problems in improving those visualizations
WRAPPING UP Design Thinking for My Data
WRAP- UP Design Thinking for My Data 1 2 3 Think about and identify a data visualization you have recently created or a set of data you want to visualize Write down an action plan for improving that visualization or for creating a new visualization that utilizes design principles discussed today. Do you have a data set you are unsure about how to visualize? In small groups, share your action plans to exchange feedback and ideas on any new or previous projects
CONTACT Steven Braun Informatics/Data Services Specialist University of Minnesota, Health Sciences Libraries sbraun@umn.edu www.lib.umn.edu/about/staff/steven-braun