Information Visualization Position on unaligned scale Color hue - PowerPoint PPT Presentation

Upcoming Outline Channels: the big picture • Foundations 4: out Feb 13, due Feb 26 (right after reading week) • Color in vision theory Magnitude Channels: Ordered Attributes Identity Channels: Categorical Attributes Position on common scale Spatial region • Programming 3: out Feb 13, due Mar 4 (1 week after reading week) • Color channels in vis Information Visualization Position on unaligned scale Color hue • D3 videos/readings week 6 –Decomposition Color • HSL Length (1D size) Motion –Color and Size legends with D3.js [30 min] • Other color spaces –Scatter Plot with Menus [46 min] Tilt/angle Shape –Color deficiency Zipeng Liu, Tamara Munzner –Circles on a Map [42 min] Area (2D size) –Interaction with others Department of Computer Science –Line Charts with Multiple Lines [42 min] • Practical advice Depth (3D position) University of British Columbia • Quiz 6, due by Fri Feb 14, 8am –Colormaps Color luminance • Team formation, due by Fri Feb 14 11:59pm –Tools and programming libraries Color saturation Lecture 12/13, 13 & 25 Feb 2020 Curvature https://www.students.cs.ubc.ca/~cs-436v/20Jan/ Volume (3D size) 2 3 4 Light Eye anatomy Cone and Rod Cells on Retina If I tell you the wavelength, can you tell what color you are seeing? Color in Vision Theory Wavelength (nm) IR ~120 million rods: black vs. white UV R 63% - G 31% - B 6% ~5-6 million cones: color Visible Spectrum 5 6 7 8 Opponent precess Light Color Appearance Color/Lightness constancy: Illumination conditions • perceptual processing before optic nerve • Given L, a, b, can we tell what color it is? If I tell you the wavelength, can you tell what color you are seeing? –one achromatic luminance channel (L*) Color != Wavelength –edge detection through luminance contrast –2 chroma channels –red-green (a*) & yellow-blue axis (b*) Luminance information Chroma information CIE LAB color space Wavelength (nm) IR UV [Seriously Colorful: Advanced Color Principles & Practices. Image courtesy of John McCann Visible Spectrum Stone.Tableau Customer Conference 2014.] 9 10 11 12 Color/Lightness constancy: Illumination conditions Contrast with background Contrast with background Bezold Effect: Outlines matter Black and blue? White and gold? https://imgur.com/hxJjUQB Image courtesy of John McCann https://en.wikipedia.org/wiki/The_dress [Seriously Colorful: Advanced Color Principles & Practices. Stone.Tableau Customer Conference 2014.] 13 14 15 16

Color Appearance Cognition (beyond retina, in brain) Name the colours Name the colours • Given L, a, b, can we tell what color it is? • Given the L, a, b values, the lighting conditions, the surroundings, viewing angle … • Chromatic adaptation • Luminance adaptation • Can you tell me what this color is? • Simultaneous contrast • Middle part of an apple • Spatial effects • Bottom part of an apple • The branch • Viewing angle • … 17 18 https://blog.xkcd.com/2010/05/03/color-survey-results/ 19 http://www.thedoghousediaries.com/1406 20 Name the colours Color is just part of vision system Decomposing color • Does not help perceive • first rule of color: do not JUST talk about color! –Position –color is confusing if treated as monolithic –Shape –Motion –… Color Channels in Visualization https://blog.xkcd.com/2010/05/03/color-survey-results/ 21 22 23 24 HSL decomposition Quiz: Which color channels? Categorical vs ordered color Categorical color: limited number of discriminable bins • decompose into three channels • Continuous quantitative attribute • human perception built on relative comparisons –ordered can show magnitude Luminance v 1 –great if color contiguous •luminance: how bright •saturation: how colourful –surprisingly bad for Saturation –categorical can show identity absolute comparisons 2 Hue •hue: what color • noncontiguous small regions of color • channels have different properties 3 –fewer bins than you want –what they convey directly to perceptual system –rule of thumb: 6-12 bins, –how much they can convey: how many discriminable bins can we use? including background and 4 highlights [Seriously Colorful: Advanced Color Principles & Practices. [Cinteny: flexible analysis and visualization of synteny and genome rearrangements in Stone.Tableau Customer Conference 2014.] multiple organisms. Sinha and Meller. BMC Bioinformatics, 8:82, 2007.] 25 26 27 28 Categorical color: limited number of discriminable bins Ordered color: Rainbow is poor default Ordered color: Rainbow is poor default Ordered color: Rainbow is poor default • problems • problems • problems –perceptually unordered –perceptually unordered –perceptually unordered –perceptually nonlinear –perceptually nonlinear –perceptually nonlinear • benefits • benefits • benefits –fine-grained structure visible –fine-grained structure visible –fine-grained structure visible and nameable and nameable and 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 –large-scale structure: fewer –large-scale structure: fewer hues hues –fine structure: multiple hues with monotonically increasing luminance [eg viridis R/python] [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 https://archive.nytimes.com/www.nytimes.com/interactive/2008/05/05/science/20080506_DISEASE.html [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]