Week 3: Tamara on travel Thu Sep 30 - Mon Oct 3 major sources of - PowerPoint PPT Presentation

Whereabouts News • Caitlin on travel this week and next week • Assign 1 marks sent out by email – don’t expect email answers until she returns; email Tamara instead! –max 97, min 73, avg 86 Week 3: 
 • Tamara on travel Thu Sep 30 - Mon Oct 3 –major sources of analysis problems: Color, Spatial Data • absolute vs relative data: February has fewer days –at Stanford Fri/Sat to give keynote at the Computation & Journalism symposium 
 • missing data: final month (Aug) was incomplete http://journalism.stanford.edu/cj2016/ Last Time • Assign 2 updated Sat Sep 24 –will still be answering email Tamara Munzner –no office hours in Sing Tao this week –email went out in three rounds - did everybody receive it? Department of Computer Science • by appointment with Tamara in ICICS/CS bldg Room X661 –thanks to Curtis and Emi for reporting bug to us! University of British Columbia – email tmm@cs.ubc.ca to arrange (late afternoon today or Wed are only possible times) • Today’s format • Tamara on travel Thu Oct 6 - Mon Oct 10 JRNL 520H, Special Topics in Contemporary Journalism: Data Visualization –interleave foundations & demos Week 3: 27 September 2016 –in Portland Fri/Sat to give another keynote, will still be answering email • Tamara will walk through Tableau demos –short office hours in Sing Tao next week: 12:30-1:30pm • you follow along step by step on your own laptop http://www.cs.ubc.ca/~tmm/courses/journ16 • Tamara will take breaks to rove the room to help out folks who get stuck 2 3 4 Arrange space: Visual encoding for tables Demo 1: Back to the Future Demo 2: Arrests Premiere League Demo 3: Market Share Encode • Tableau Lessons • work through this on your own if you want practice! • Tableau Lessons –simple analytics: totals –visual encoding practice –we didn’t have time to do together in class Arrange –more disaggregation practice –more filters practice –straw poll: how many of you did this already? Express Separate –Show Me –dual axes • Tableau Lessons • Big Ideas –more practice with changing visual encodings Order Align • Big Ideas –outlier removal for subsequent data analysis –highlighting individual items –beyond simple bars –challenges of missing data • Life Lessons • Big Ideas –different patterns result in different insights –don’t be a jerk at sporting events! 5 6 7 8 Idiom design choices: Encode Categorical vs ordered color Color: Luminance, saturation, hue Encode • 3 channels Luminance values –identity for categorical Arrange Map from categorical and ordered Saturation Express Separate • hue attributes –magnitude for ordered Hue Color What? • luminance Hue Saturation Luminance Color Order Align • saturation Why? • RGB: poor for encoding Size, Angle, Curvature, ... How? • HSL: better, but beware Corners of the RGB Use color cube Shape –lightness ≠ luminance L from HLS All the same Motion Direction, Rate, Frequency, ... [Seriously Colorful: Advanced Color Principles & Practices. Luminance values Stone.Tableau Customer Conference 2014.] 9 10 11 12 Spectral sensitivity Opponent color and color deficiency Designing for color deficiency: Check with simulator Designing for color deficiency: Avoid encoding by hue alone & three cone types • 3 cones processed before optic nerve • redundantly encode –one achromatic luminance channel L – vary luminance Small but important separation –edge detection through luminance contrast – change shape –two chroma channels, R-G and Y-B axis • “color blind” if one axis has degraded acuity –8% of men are red/green color deficient Lightness information Color information Normal Deuteranope Protanope Tritanope –blue/yellow is rare Deuteranope simulation vision http://rehue.net Change the shape Wavelength (nm) IR UV Vary luminance [Seriously Colorful: Advanced Color Principles & Practices. [Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] Stone.Tableau Customer Conference 2014.] Visible Spectrum 13 14 15 [Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 16

Color deficiency: Reduces color to 2 dimensions Designing for color deficiency: Blue-Orange is safe Color/Lightness constancy: Illumination conditions Color/Lightness constancy: Illumination conditions Normal Protanope Deuteranope Tritanope Image courtesy of John McCann Image courtesy of John McCann [Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] [Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 17 18 19 20 Bezold Effect: Outlines matter Colormaps Colormaps Colormaps Categorical Categorical Categorical Binary Categorical Binary Categorical Binary Categorical • color constancy: simultaneous contrast effect Categorical Categorical Categorical Categorical Categorical Categorical Ordered Ordered Ordered Sequential Diverging Sequential Diverging Sequential Diverging Bivariate Bivariate Bivariate Diverging Sequential Diverging Sequential use with care! Diverging Sequential after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html] http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html] http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html] [Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 21 22 23 24 Colormaps ColorBrewer Categorical color: Discriminability constraints Ordered color: Rainbow is poor default Categorical Binary Categorical • http://www.colorbrewer2.org • noncontiguous small regions of color: only 6-12 bins • problems Categorical –perceptually unordered • saturation and area example: size affects salience! Categorical Ordered –perceptually nonlinear Sequential Diverging • benefits –fine-grained structure visible Bivariate and nameable Diverging Sequential [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] • color channel interactions –size heavily affects salience • small regions need high saturation • large need low saturation after [Color Use Guidelines for Mapping and Visualization. Brewer, 1994. –saturation & luminance: 3-4 bins max http://www.personal.psu.edu/faculty/c/a/cab38/ColorSch/Schemes.html] • also not separable from transparency [Cinteny: flexible analysis and visualization of synteny and genome rearrangements in multiple organisms. Sinha and Meller. BMC Bioinformatics, 8:82, 2007.] [Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] 25 26 27 28 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] Ordered color: Rainbow is poor default Ordered color: Rainbow is poor default Viridis Ordered color: Rainbow is poor default • colorful, perceptually uniform, • problems • problems • problems colorblind-safe, monotonically –perceptually unordered –perceptually unordered –perceptually unordered increasing luminance –perceptually nonlinear –perceptually nonlinear –perceptually nonlinear • benefits • benefits • benefits –fine-grained structure visible –fine-grained structure visible –fine-grained structure visible and and nameable and nameable nameable [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] [A Rule-based Tool for Assisting Colormap Selection. Bergman,. Rogowitz, and. Treinish. Proc. IEEE Visualization (Vis), pp. 118–125, 1995.] • alternatives • alternatives • alternatives –large-scale structure: fewer –large-scale structure: fewer –large-scale structure: fewer hues hues hues –fine structure: multiple hues with –fine structure: multiple hues monotonically increasing with monotonically increasing luminance [eg viridis R/python] luminance [eg viridis R/python] –segmented rainbows for binned or categorical https://cran.r-project.org/web/packages/ viridis/vignettes/intro-to-viridis.html [Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] [Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] [Why Should Engineers Be Worried About Color? Treinish and Rogowitz 1998. http://www.research.ibm.com/people/l/lloydt/color/color.HTM] 29 30 31 32 [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes] [Transfer Functions in Direct Volume Rendering: Design, Interface, Interaction. Kindlmann. SIGGRAPH 2002 Course Notes]