DESIGN THINKING FOR VISUALIZATION

Transcription

1 DESIGN THINKING FOR VISUALIZATION Steven Braun Informatics/Data Services Specialist University of Minnesota, Health Sciences Libraries DASHCamp 2014

2 OBJECTIVE Become more critical consumers and producers of data visualization (and maybe learn a tiny itty bit about D3.js)

3 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

4 WORKSHOP TOOLBOX

5 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?

6 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

7 ACTIVITY Design Thinking for Visualization

8 ACTIVITY Design Thinking for Visualization 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

9 Principles of visual perception Visualization helps make complex data accessible and understandable How? By mapping visual cognition resources to our spatial reasoning abilities

10 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

11 Principles of visual perception LAW OF SIMILARITY Visually similar objects form a group

12 Principles of visual perception COLOR

13 Principles of visual perception COLOR

14 Principles of visual perception VALUE

15 Principles of visual perception VALUE

16 Principles of visual perception TEXTURE

17 Principles of visual perception TEXTURE

18 Principles of visual perception SIZE

19 Principles of visual perception SIZE

20 Principles of visual perception LAW OF PROXIMITY Objects close in space form a group

21 Principles of visual perception PROXIMITY

22 Principles of visual perception LAW OF PRÄGNANZ Cognitive load is optimized by reduction to the simplest form

23 Principles of visual perception PRÄGNANZ

24 Principles of visual perception PRÄGNANZ

25 Principles of visual perception LAW OF ISOMORPHIC CORRESPONDENCE A viewer s interpretation of a visualization is dictated by past experience

26 Principles of visual perception ISOMORPHIC CORRESPONDENCE

27 Principles of visual perception We can leverage these principles of perceptual organization to optimize our three axioms intuitive, engaging, facilitating discovery

28 Principles of visual perception Careful design helps avoid inadvertent misconceptions (and lying)

29

30

31

32 D3 for visualization design The D3.js library can help us hone our design thinking for visualization D3 = data-driven documents = question-driven visualization

33

34

35

36

37

38 D3 for visualization design The D3 library can help us hone our design thinking for data

39 Data practices for visualization Data structured for visualization is minimalist and versatile CSV TSV JSON XML

40 Data practices for visualization All data is fundamentally structured in terms of arrays CSV TSV JSON XML

41 Data practices for visualization When we transform data from arrays into structured file formats, we lose typecasting information

42 GROUP WORKSHOP Visualization Sandbox

43 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

44 WRAPPING UP Design Thinking for My Data

45 WRAP- UP Design Thinking for My Data 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

46 CONTACT Steven Braun Informatics/Data Services Specialist University of Minnesota, Health Sciences Libraries