DESIGN THINKING FOR VISUALIZATION

(1)

DESIGN

THINKING

FOR

VISUALIZATION

Steven Braun

Informatics/Data Services Specialist

University of Minnesota, Health Sciences Libraries

(2)

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)

http://z.umn.edu/vizworkshop

(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

1

2

3

Data visualization is

intuitive

Data visualization engages and invites the viewer

to ask more

questions

Data visualization facilitates

discovery

THREE

AXIOMS

(7)

A C T I V I T Y

Design Thinking for Visualization

(8)

A C T I V I T Y

Design Thinking for Visualization

1

2

3

Explore the visualization galleries at 1 or 2 of these websites:

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)

§  visualizing.org

§  visual.ly

§  vizualize.tumblr.com

1 0 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)

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)

LAW

OF

SIMILARITY

Visually similar objects form a group

(12)

C O L O R

(13)

C O L O R

(14)

VA L U E

(15)

VA L U E

(16)

T E X T U R E

(17)

T E X T U R E

(18)

Principles of visual perception

S I Z E

(19)

S I Z E

(20)

LAW

OF

PROXIMITY

Objects close in space form a group

(21)

P ROX I M I T Y

(22)

LAW

OF

PRÄGNANZ

Cognitive load is optimized by

reduction to the simplest form

(23)

P R Ä G N A N Z

(24)

Principles of visual perception

P R Ä G N A N Z

(25)

LAW

OF

ISOMORPHIC

CORRESPONDENCE

A viewer’s interpretation of a

visualization is dictated by past

experience

(26)

I S O M O R P H I C

C O R R E S P O N D E N C E

(27)

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)

http://bl.ocks.org/mbostock/3885304

(34)

http://bl.ocks.org/mbostock/3887118

(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

C S V

T S V

J S O N

X M L

(40)

All data is fundamentally structured

in terms of arrays

C S V

T S V

J S O N

X M L

(41)

When we transform data from arrays into

structured file formats,

we lose typecasting information

(42)

G R O U P

W O R K S H O P

Visualization Sandbox

(43)

G R O U P

W O R K S H O P

Visualization Sandbox

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

OPTIONS

(44)

W R A P P I N G

U P

Design Thinking for My Data

(45)

W R A P

-

U P

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

(46)

C O N TA C T

Steven Braun

Informatics/Data Services Specialist

University of Minnesota, Health Sciences Libraries

[email protected]

www.lib.umn.edu/about/staff/steven-braun