Design and Support Recommendations from Data Visualization Research
2 likes1,440 views
This document summarizes key findings from data visualization research. The research shows that rotated text is harder to read than horizontal text. It also shows that people can accurately judge bar length and position but have more difficulty differentiating angles, areas, and shapes. When using color, no more than 5-7 hues or shades should be used to avoid confusion. Rainbow color maps are problematic and a single hue varying in lightness is better. The document provides examples of how these research findings can inform effective data visualization design in Excel. Human: Thank you for the summary. You captured the key points about what the research shows regarding text orientation, perception of visual elements, effective use of color, and provided examples of how to
Design and Support Recommendations from Data Visualization Research
- 1. 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
- 2. Using research to inform design Expert suggestions/heuristics http://bit.ly/tufte_vdqi http://bit.ly/bertin_sg http://bit.ly/few_smn
- 3. Using research to inform design Empirical verification and elaboration http://bit.ly/cleveland_egd http://bit.ly/ware_iv http://bit.ly/wilk_gg
- 4. Demo data for today http://bit.ly/bcse_zoss
- 6. 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
- 7. 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
- 8. Text orientation State population from 2010 census http://en.wikipedia.org/wiki/US_states_by_population Easy in Excel
- 9. Text orientation State population from 2010 census http://en.wikipedia.org/wiki/US_states_by_population Easy in Excel
- 10. Text orientation Easy in Excel
- 11. 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
- 12. Perception of length/area Easy in Excel
- 13. Perception of length/area Easy in Excel
- 14. Perception of length/area Easy in Excel
- 15. Perception of length/area Advanced in Excel http://peltiertech.com/Excel/Charts/DotPlot.html
- 16. 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
- 17. Data density State population vs. Number of seats in U.S. House http://en.wikipedia.org/wiki/US_states_by_population Easy in Excel
- 18. Data density State population vs. Number of seats in U.S. House http://en.wikipedia.org/wiki/US_states_by_population ? Easy in Excel
- 19. Data density Fill transparency at 100% Easy in Excel
- 20. Data density Fill transparency at 50% Easy in Excel
- 21. Data density Both axes converted to logarithmic scale Easy in Excel
- 22. Data density Ranges edited, vertical axis switched to base 2 Easy in Excel
- 23. Data density Population mapped to horizontal axis, seats in house mapped to size, random “jitter” added as vertical axis values Intermediate in Excel
- 24. 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
- 25. 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/
- 26. 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/SFeAwzhttp://bit.ly/PszKw0
- 29. 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 onVisualization '96 (VIS '96), 263-270. http://dx.doi.org/10.1109/VISUAL.1996.568118
- 30. 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
- 31. 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
- 32. 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
- 33. 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
- 34. 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
- 35. 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
- 36. “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
- 37. 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
- 38. 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
- 39. 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
- 40. 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/
- 41. 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/
- 42. ColorBrewer Cynthia Brewer, PhD – Penn State http://colorbrewer2.org/
- 43. 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
- 44. Color versus position Do you really need color at all? Intermediate in Excel
- 45. Color versus position Do you really need color at all? Intermediate in Excel
- 46. 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.
- 47. Visual contrast If you use color sparingly, you can save it for contrast. Intermediate in Excel
- 48. 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
- 49. Times to use color
- 50. Times to use color • When position is insufficient (lines crossing) as opposed to: http://vis4.net/blog/posts/doing-the-line-charts-right/
- 51. Times to use color • When position is insufficient (lines crossing) • When it will aid pre-attentive processing Count the 4s. 173658103837575063348181736401016254 539319123938525616173943987139874619 319586716628309897273164613984019358 094285976205897629835921873589321759 871059283198254781237598698127359812!
- 52. Times to use color • When position is insufficient (lines crossing) • When it will aid pre-attentive processing 173658103837575063348181736401016254 539319123938525616173943987139874619 319586716628309897273164613984019358 094285976205897629835921873589321759 871059283198254781237598698127359812! Count the 4s.
- 53. 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 onVisualization (EuroVis) 2013. http://idl.cs.washington.edu/papers/semantically-resonant-colors/ http://www.babynamewizard.com/voyager
- 54. 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
- 56. 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
- 57. 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
- 58. 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/
- 60. Types of Research • techniques develop new visual metaphors Speckmann, B., &Verbeek, K. (2010). Necklace maps. IEEE Transactions onVisualization and Computer Graphics,16(6), 881-889. http://dx.doi.org/10.1109/TVCG.2010.180
- 61. Types of Research • techniques • systems develop new software Meyer, M., Munzner,T., & Pfister, H. (2009). MizBee:A multiscale synteny browser. IEEETransactions onVisualization and Computer Graphics,15(6), 897-904. http://dx.doi.org/10.1109/TVCG.2009.167
- 62. 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. IEEETransactions onVisualization and Computer Graphics,19(12), 2516-2525. http://dx.doi.org/10.1109/TVCG.2013.145
- 63. 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
- 64. 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. IEEETransactions onVisualization and Computer Graphics,19(12), 2396-2405. http://dx.doi.org/10.1109/TVCG.2013.134
- 66. BONUS: COLOR THEMES FOR POSTERS, INFOGRAPHICS, SLIDESHOWS, WEBSITES, ETC.
- 67. 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
- 72. BONUS: DEVELOPMENT OF A VIS PROJECT
- 74. Changes over time? Heat map
- 75. Changes over time? Radial technique
- 76. Changes over time? Line chart of ranks
- 77. Changes over time? Stacked line
- 80. Correlations or flows Alluvial diagram http://raw.densitydesign.org/