Design and Support Recommendations from Data Visualization Research

July 17, 2014 Science Boot Camp Southeast Raleigh, NC #BootCampSE14

Angela Zoss, @duke_vis Data Visualization Coordinator Duke University Libraries

Using research to inform design

Expert suggestions/heuristics

http://bit.ly/tufte_vdqi http://bit.ly/bertin_sg http://bit.ly/few_smn

Using research to inform design

Empirical verification and elaboration

http://bit.ly/cleveland_egd http://bit.ly/ware_iv http://bit.ly/wilk_gg

Demo data for today

http://bit.ly/bcse_zoss

POSITION IS EVERYTHING. @moritz_stefaner

The research shows…

•  Rotated text is harder to read

Byrne, M. D. (2002). Reading vertical text: Rotated vs. marquee. In Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting; Santa Monica, CA. Human Factors and Ergonomics Society: 1633–1635. http://dx.doi.org/10.1177/154193120204601722

The research shows…

•  Rotated text is harder to read

Byrne, M. D. (2002). Reading vertical text: Rotated vs. marquee. In Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting; Santa Monica, CA. Human Factors and Ergonomics Society: 1633–1635. http://dx.doi.org/10.1177/154193120204601722

Text orientation

State population from 2010 census http://en.wikipedia.org/wiki/US_states_by_population

Easy in Excel

Text orientation

State population from 2010 census http://en.wikipedia.org/wiki/US_states_by_population

Easy in Excel

Text orientation

Easy in Excel

The research shows…

•  Rotated text is harder to read •  People are very good at reading bar length,

x/y position

Vernier acuity: The ability to see if two line segments are collinear. Accurate to about 10 seconds of arc or 1/10 of a pixel.

Ware, C. (2013). Information visualization: perception for design, third edition. Waltham, MA: Morgan Kaufmann Publishers. http://www.sciencedirect.com/science/book/9780123814647

Perception of length/area

Easy in Excel

Perception of length/area

Easy in Excel

Perception of length/area

Easy in Excel

Perception of length/area

Advanced in Excel

http://peltiertech.com/Excel/Charts/DotPlot.html

The research shows…

•  Rotated text is harder to read •  People are very good at reading bar length,

x/y position •  But even our positional acuity is no match for

high data density

Data density

State population vs. Number of seats in U.S. House http://en.wikipedia.org/wiki/US_states_by_population

Easy in Excel

Data density

State population vs. Number of seats in U.S. House http://en.wikipedia.org/wiki/US_states_by_population

?

Easy in Excel

Data density

Fill transparency at 100%

Easy in Excel

Data density

Fill transparency at 50%

Easy in Excel

Data density

Both axes converted to logarithmic scale

Easy in Excel

Data density

Ranges edited, vertical axis switched to base 2

Easy in Excel

Data density

Population mapped to horizontal axis, seats in house mapped to size, random “jitter” added as vertical axis values

Intermediate in Excel

The research shows…

•  Rotated text is harder to read •  People are very good at

reading bar length, x/y position

•  But even our positional acuity is no match for high data density

•  People are not as good at differentiating angles, areas

Cleveland, W. S., & McGill, R. (1985). Graphical perception and graphical methods for analyzing scientific data. Science, 299(4716), 828-833. http://dx.doi.org/10.1126/science.229.4716.828

Angles, wedges, circles People are bad at comparing areas of shapes or judging certain relationships. If precision is important or data values are very similar, use bars or scatter plots.

http://de.slideshare.net/vis4/making-data-visualizations-a-survival-guide/25

http://de.slideshare.net/vis4/making-data-visualizations-a-survival-guide/162

http://www.leancrew.com/all-this/2011/11/i-hate-stacked-area-charts/

Visual math http://eagereyes.org/criticism/visual-math-wrong If the chart makes it hard to understand an important relationship between variables, do the extra calculation and visualize that as well.

http://bit.ly/SFeAwz http://bit.ly/PszKw0

Avoid special effects

http://bit.ly/3dpiebad

COLOR IS DIFFICULT. @moritz_stefaner

The research shows…

•  People have trouble differentiating between more than 5-7 hues

?

?

http://colorbrewer2.org/

Healey, C. G. (1996). Choosing effective colours for data visualization. In R. Yagel and G. M. Nielson (Eds.), Proceedings of the 7th conference on Visualization '96 (VIS '96), 263-270. http://dx.doi.org/10.1109/VISUAL.1996.568118

Qualitative color classes

With categorical/qualitative variables (e.g, states, genders, political parties), use at most 5-7 hues.

States by population and house seats, colored by region Requires 4 separate data series

Intermediate in Excel

The research shows…

•  People have trouble differentiating between more than 5-7 hues

•  People have trouble differentiating between more than 5-7 shades

http://colorbrewer2.org/

Gilmartin, P. and E. Shelton. (1990). Choropleth maps on high resolution CRTs: The effects of number of classes and hue on communication. Cartographica, 26(2), 40-52. http://dx.doi.org/10.3138/W836-5K13-1432-4480

Ordered color classes

With classed/graduated variables (e.g., rating scores, age groups, any number that has been split into groups), use at most 5-7 shades.

States by population and house seats, colored in 4 x-axis value groups Requires 4 separate data series

Intermediate in Excel

Continuous color

With continuous variables (e.g., population, rainfall, timestamp), the only option in Excel is conditional formatting of cells.

https://www.census.gov/hhes/migration/data/acs/state-to-state.html

Migrations between states, colored continuously Easy in Excel

Continuous color

Depending on your data, a continues gradient might group too many elements into a small range of lightness. You can also transform the data (e.g., log) or create discrete classes for more control.

Migrations between states, colored in 4 classes Requires conditional formatting “classic” rules for value ranges

Intermediate in Excel

The research shows…

•  People have trouble differentiating between more than 5-7 hues

•  People have trouble differentiating between more than 5-7 shades

•  Rainbow color gradients are very problematic

“Rainbow Color Map (Still) Considered Harmful”

Borland, D., & Taylor, R.M. (2007). Rainbow color map (still) considered harmful. IEEE Computer Graphics and Applications, 27(2), 14-17. http://dx.doi.org/10.1109/MCG.2007.323435

Perceptual ordering. (a) We can easily place the gray paint chips in order based on perception, (b) but cannot do this with the colored chips.

Borland & Taylor (2007)

Confusing

Spatial contrast sensitivity function.

We can see detail at much lower contrast in the (a) luminance-varying gray-scale image than with the (b) rainbow color map.

Borland & Taylor (2007)

Obscuring

Four data sets visualized with

(a) rainbow, (b) gray-scale, (c) black-body radiation

Apparent sharp gradients in the data in (a) are revealed as rainbow color map artifacts...

The sharp gradient found at the center of the second data set... is not found in the corresponding image with the rainbow color map.

Borland & Taylor (2007)

Actively misleading

Related: Salience Rainbows also cause salience problems; some colors in the inner part of the rainbow “pop out” more than colors at the extremes.

http://dx.doi.org/10.1038/nmeth.1762 http://mycarta.wordpress.com/2012/12/21/comparing-color-palettes/

Instead of rainbows…

Solution: Use a single hue, varying luminance If you want color to show a numerical value, use a range that goes from white to a highly saturated color in one of the universal color categories.

http://shar.es/CfbSd

http://www.flickr.com/photos/sadrzy/4154089647/

ColorBrewer Cynthia Brewer, PhD – Penn State

http://colorbrewer2.org/

The research shows…

•  People have trouble differentiating between more than 5-7 hues

•  People have trouble differentiating between more than 5-7 shades

•  Rainbow color gradients are very problematic •  For highest contrast, limit colors and vary luminance

Color versus position

Do you really need color at all?

Intermediate in Excel

Color versus position

Do you really need color at all?

Intermediate in Excel

Color versus position

Do you really need color at all?

Easy* in Excel

*Creating charts with manually-selected y values is easy and very useful. Adding labels, though, can be harder. Sometimes it’s easiest to add them manually.

Visual contrast

If you use color sparingly, you can save it for contrast.

Intermediate in Excel

Visual contrast

Contrast is important to direct attention and improve clarity. It can also shield against projection/printing issues or color interference effects.

http://shar.es/CWktB

Times to use color

Times to use color

•  When position is insufficient (lines crossing)

as opposed to:

http://vis4.net/blog/posts/doing-the-line-charts-right/

Times to use color

•  When position is insufficient (lines crossing) •  When it will aid pre-attentive processing

Count the 4s.

173658103837575063348181736401016254539319123938525616173943987139874619319586716628309897273164613984019358094285976205897629835921873589321759871059283198254781237598698127359812!

Times to use color

•  When position is insufficient (lines crossing) •  When it will aid pre-attentive processing

173658103837575063348181736401016254539319123938525616173943987139874619319586716628309897273164613984019358094285976205897629835921873589321759871059283198254781237598698127359812!

Count the 4s.

Times to use color

•  When position is insufficient (lines crossing) •  When it will aid pre-attentive processing •  When it reinforces semantic content

Lin, S., Fortuna, J., et al. (2013). Selecting semantically-resonant colors for data visualization. In B. Preim, P. Rheingans, & H. Theisel, Proceeedings of Eurographics Conference on Visualization (EuroVis) 2013. http://idl.cs.washington.edu/papers/semantically-resonant-colors/

http://www.babynamewizard.com/voyager

Times to use color

•  When position is insufficient (lines crossing) •  When it will aid pre-attentive processing •  When it reinforces semantic content •  When you want to encourage comparisons over

multiple figures

http://vallandingham.me/small_multiples_with_details.html

MORE ABOUT CHARTS

Data Visualization LibGuides

•  Data visualization: http://guides.library.duke.edu/datavis

•  Visualization types: http://guides.library.duke.edu/vis_types

•  Top 10 dos and don’ts for charts and graphs: http://guides.library.duke.edu/topten

•  Visual communication: http://guides.library.duke.edu/visualcomm

Good Chart Makeover Examples The Why Axis chart remakes http://thewhyaxis.info/remakes/

Storytelling With Data visual makeovers: http://www.storytellingwithdata.com/search/label/Visual%20Makeover

On the web

•  Bad examples: WTF Viz, http://wtfviz.net/

•  Good examples: Thumbs Up Viz, http://thumbsupviz.com/

•  Ask for help: Help Me Viz, http://helpmeviz.com/

CONDUCTING VISUALIZATION RESEARCH

Types of Research

•  techniques develop new visual metaphors

Speckmann, B., & Verbeek, K. (2010). Necklace maps. IEEE Transactions on Visualization and Computer Graphics, 16(6), 881-889. http://dx.doi.org/10.1109/TVCG.2010.180

Types of Research

•  techniques •  systems

develop new software

Meyer, M., Munzner, T., & Pfister, H. (2009). MizBee: A multiscale synteny browser. IEEE Transactions on Visualization and Computer Graphics, 15(6), 897-904. http://dx.doi.org/10.1109/TVCG.2009.167

Types of Research

•  techniques •  systems •  design studies

study how a specific group or field uses visualization Goodwin, S., Dykes, J., et al. (2013). Creative user-

centered visualization design for energy analysts and modelers. IEEE Transactions on Visualization and Computer Graphics, 19(12), 2516-2525. http://dx.doi.org/10.1109/TVCG.2013.145

Types of Research

•  techniques •  systems •  design studies •  evaluations

study how humans generally interact with visualizations

Ziemkiewicz, C., & Kosara, R. (2010). Laws of attraction: From perceived forces to conceptual similarity. IEEE Transactions on Visualization and Computer Graphics, 16(6), 1009-1016. http://dx.doi.org/10.1109/TVCG.2010.174

Types of Research

•  techniques •  systems •  design studies •  evaluations •  theories/models

develop a new theory of visualization

Jansen, Y., & Dragicevic, P. (2013). An interaction model for visualizations beyond the desktop. IEEE Transactions on Visualization and Computer Graphics, 19(12), 2396-2405. http://dx.doi.org/10.1109/TVCG.2013.134

QUESTIONS? SUGGESTIONS? angela.zoss@duke.edu twitter.com/duke_vis

BONUS: COLOR THEMES FOR POSTERS, INFOGRAPHICS, SLIDESHOWS, WEBSITES, ETC.

Theme

•  Pick two or three main colors that complement each other to add visual interest

•  Maintain high visual contrast throughout •  Do not use a background image

http://visual.ly/10-commandments-color-theory

BONUS: DEVELOPMENT OF A VIS PROJECT

http://bit.ly/pubmedvis

Changes over time?

Heat map

Changes over time?

Radial technique

Changes over time?

Line chart of ranks

Changes over time?

Stacked line

Changes over time?

Streamgraph http://raw.densitydesign.org/

Correlations or flows

Alluvial diagram http://raw.densitydesign.org/

Correlations or flows