3. Basic principles of visualization www.usingmindmaps.com www.estatevaults.com www.cg.tuwien.ac.at exa.com www.nsf.gov Visualization pipeline prefuse.org flowingdata.com Working with data • Data preprocessing – last lecture • Data mapping to visualization Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Working with data • Transformation and rendering en.wikipedia.org opengl.org myego.cz https://d3js.org/ Visualization metrics • Metrics for measuring the success of information transfer using the proposed visualization – Expressiveness – Effectiveness Expressiveness • Mexp = displayed information/information to be expressed 0 ≤ Mexp ≤ 1 • If Mexp = 1, expressiveness is ideal • If Mexp < 1, we display less information than we want to • If Mexp > 1, we present more information than we should Effectiveness • Visualization is effective: – Correct and fast interpretation – Fast rendering Meff = 1/(1 + interpret + render) 0 ≤ Meff ≤ 1 • If Meff is close to zero, time for interpretation and rendering is short Example Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Graphical symbols • Easily recognizable graphical symbols Clear meaning Complex meaning Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Graphical symbols • Without outer, cognitive identification any graphical representation makes sense. External identification has to be easily readable and understandable. • Similarity in data ↔ visual similarity of corresponding graphical symbols • Ordering in data ↔ visual ordering in corresponding graphical symbols Dimensionality of 2D graphics Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Analysis of graphics 1) Subconsciously we perceive grouping of objects http://www.infovis-wiki.net/index.php/Preattentive_processing Analysis of graphics 2) Cognitively we characterize these groups elearningbuzz.wordpress.com Eight visual variables • Variables maximizing the effectiveness of a given visualization: - Position - Shape - Size - Brightness - Color - Orientation - Texture - Motion www.infovis-wiki.net Position • The most important variable • Positioning of graphical elements on screen • Best case – each graphical symbol has its unique position, symbols do not overlap • Worst case – all graphical symbols are positioned to a single spot Position Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Position • Linear scale • Logarithmic scale • Additional graphics - axes mathsisinteresting.blogspot.com cstl.syr.edu Shape • Points, lines, regions, volumes, and their combination • Symbols, letters, words, … • Except for size, orientation, etc. – these are other visual variables Shape Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Size • Usable for datasets of small cardinality (it is hard to distinguish between symbols with small difference in size) Size • Depends on the symbol type selection • Points, lines, curves are appropriate in combination with size • Inappropriate for regions Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Brightness • Brightness scale for mapping values : • Linear brightness scale Brightness Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Color • Hue, saturation Color • http://colorbrewer2.org/ Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Color • Standard linear grayscale • Rainbow • „Heated“ • Blue to cyan • Blue to yellow Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Problem with rainbow scale • Can distort perceptions of data and alter meaning by creating false boundaries between values Problem with rainbow scale • Why? – Rainbow scales are not ‘perceptually uniform’ – they create sharp artificial boundaries between colors (particularly involving yellow) that are not necessarily representative of the underlying data. Problem with rainbow scale Problem with rainbow scale Luminance Why rainbow? • It’s attractive • Using single hue is less interesting to look at • Rainbow can introduce a lot of artifacts • Use ColorBrewer! Orientation Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Texture Interactive Data Visualization - Foundations, Techniques and Applications. Matthew Ward Motion • Can be associated with any other visual variable • Position – direction of movement • Size – increase/decrease • Brightness – lighter/darker • Orientation – bigger/smaller angle Example – baseball • Mapping of ball hits to space defined by x, y position Example – baseball • Type of hit mapped to different types of glyphs Example – baseball • Reducing the graph size by spreading the hits to more graphs Example – baseball • Adding color to express the hit speed Color perception • Differences in color can be detected already in 200 millisecs – even earlier than we realize that we focus on visualization (so called preattentive concept) • Color can be three-dimensional (e.g., RGB) – In practice we use only 2D color coding • Thanks to high number of color blind persons • Different scales in perceivable hues for different colors (yellow vs. blue) Example – baseball • Using 2D color field adding the information about the density of hits on given spot Formalization of visualization • Jacques Bertin (1918 - 2010) Bertin (1967) Semiology of Graphics • First attempt to define graphics • Creating so called marking system • Graphical lexicon: Marks Points, lines, and areas Positional Two planar dimensions Retinal Size, value, texture, color, orientation, and shape