Information Visualization An Introduction
Intelligent Systems, Interaction and Multimedia Seminar 2017/2018
10/26/2017 Daniel Castro Silva [email protected] SSIIM Presentation Outline
Introduction
Brief History
Semiology of Graphics
Graph Types and Examples
Best Practices
Tools and References
Topics for Coursework
FEUP / LIACC 2 SSIIM Introduction • We are generating more and more data • Over 1 ZB/year • tera FEUP / LIACC 3 SSIIM Introduction What is Information Visualization? • Graphical representation of data • Possibly interactive • Transform data into information • Necessary in decision-making processes • Leverage human cognition • Allows for information • Exploration • Exploratory data analysis / questions are not (well) formulated • Confirmation • Provide support for comparison, evaluation, decision • Presentation • Communicate and explain ideas / influence or persuade behavior FEUP / LIACC 4 SSIIM Introduction Why vision? • Of our five senses, it has the most advantages • Larger bandwidth • Fast and parallel • Easy recognition of visual patterns • People think visually! FEUP / LIACC 5 SSIIM Introduction What can we do with it? • Simple tasks: • Maximum, minimum, average, standard deviation, percentages, and other simple descriptive statistics • Exact and known questions • More complex tasks: • Patterns, tendencies, distributions, temporal evolution • Outliers, exceptions • Relations and correlations • Tradeoffs • Groups, clusters, comparison, context • Anomalies, errors in the data • Paths • … FEUP / LIACC 6 SSIIM Introduction Example • Anscombe’s quartet FEUP / LIACC 7 SSIIM Introduction Example • Which state has the highest income? • What is the relation between education and income? FEUP / LIACC 8 SSIIM Introduction Example College Degree % Degree College Per Capita Income FEUP / LIACC 9 SSIIM Brief History of InfoVis • Temporal evolution • Pre-1600 • Early maps and diagrams • 1600s • Measurements and Theory • 1700s • New graphic forms • 1800-1849 • Beginnings of modern graphics • 1850-1899 • Golden age • 1900-1949 • Modern dark ages • 1950 – 1974 • Rebirth of information visualization • 1975 – present day • High-density data visualization FEUP / LIACC 10 SSIIM Brief History of InfoVis Early Maps and Diagrams ~6200 BC ~550 BC FEUP / LIACC 11 SSIIM Brief History of InfoVis Early Maps and Diagrams • Peutinger Map (Roman Empire, ~350BC) • Painted parchment 34cm in height and almost 7m in length FEUP / LIACC 12 SSIIM Brief History of InfoVis Early Maps and Diagrams • Positions of the sun, moon and other planets throughout the year (~950) FEUP / LIACC 13 SSIIM Brief History of InfoVis Early Maps and Diagrams • Fra Mauro Map (Italy ~1450) • Over 2m in diameter FEUP / LIACC 14 SSIIM Brief History of InfoVis Measurements and Theory John Graunt, 1662 Beginning of demographic statistics (life expectancy, …) FEUP / LIACC 15 SSIIM Brief History of InfoVis Measurements and Theory • Edmond Halley • Altitude vs. pressure FEUP / LIACC 16 SSIIM Brief History of InfoVis Measurements and Theory • Weather map (prevailing winds) • Edmond Halley, 1686 FEUP / LIACC 17 SSIIM Brief History of InfoVis Measurements and Theory • Contour map (isogonic lines) • Edmond Halley, 1701 FEUP / LIACC 18 SSIIM Brief History of InfoVis New Graphic Forms • Life span of 2000 famous people • Joseph Priestley, 1765 • Use of bars for comparison FEUP / LIACC 19 SSIIM Brief History of InfoVis New Graphic Forms • Monge’s method of projections FEUP / LIACC 20 SSIIM Brief History of InfoVis New Graphic Forms William Playfair, 1786 Price of wheat and wages bar/line chart National debt FEUP / LIACC 21 SSIIM Brief History of InfoVis Beginnings of Modern Graphics • Pie chart • William Playfair, 1801 FEUP / LIACC 22 SSIIM Brief History of InfoVis Beginnings of Modern Graphics • Choropleth map • Baron Pierre Charles Dupin 1826 FEUP / LIACC 23 SSIIM Brief History of InfoVis Beginnings of Modern Graphics • Polar-area charts • André Michel Guerry 1829 FEUP / LIACC 24 SSIIM Brief History of InfoVis Beginnings of Modern Graphics • Flow Map • Henry Drury Harness 1837 FEUP / LIACC 25 SSIIM Brief History of InfoVis Golden Age • Cholera map • John Snow 1854 FEUP / LIACC 26 SSIIM Brief History of InfoVis Golden Age • Mortality causes • Florence Nightingale 1857 • Uses the Polar Area charts, by Guerry FEUP / LIACC 27 SSIIM Brief History of InfoVis Golden Age • Napoleon's March on Moscow • Charles Joseph Minard, 1869 FEUP / LIACC 28 SSIIM Brief History of InfoVis Golden Age • Bilateral histogram (age pyramid) • Francis Amasa Walker, 1874 FEUP / LIACC 29 SSIIM Brief History of InfoVis Golden Age • Stereogram • Luigi Perozzo 1879 FEUP / LIACC 30 SSIIM Brief History of InfoVis Golden Age • Train schedules using the Ibry method • Étienne-Jules Marey, 1885 FEUP / LIACC 31 SSIIM Brief History of InfoVis Modern Dark Ages • Metro • Henry Beck 1933 FEUP / LIACC 32 SSIIM Brief History of InfoVis Rebirth of Information Visualization • The Future of Data Analysis • John Tukey 1962 FEUP / LIACC 33 SSIIM Brief History of InfoVis Rebirth of Information Visualization • Semiologie Graphique • Jacques Bertin 1967 FEUP / LIACC 34 SSIIM Brief History of InfoVis Rebirth of Information Visualization • Chernoff Faces (multivariate data) • Herman Chernoff 1973 FEUP / LIACC 35 SSIIM Brief History of InfoVis High-Density Data Visualization • Scatterplot Matrix • John Hartigan, 1975 FEUP / LIACC 36 SSIIM Brief History of InfoVis High-Density Data Visualization • Bifocal Display • Mark D. Apperley Robert Spence 1980 Fisheye View FEUP / LIACC George W. Furnas, 1981 37 SSIIM Brief History of InfoVis High-Density Data Visualization • Parallel Coordinates • Alfred Inselberg 1985 FEUP / LIACC 38 SSIIM Brief History of InfoVis High-Density Data Visualization • Treemap • Ben Shneiderman 1991 FEUP / LIACC 39 SSIIM Brief History of InfoVis High-Density Data Visualization • Table Lens • Ramana Rao and Stuart K. Card 1994 FEUP / LIACC 40 SSIIM Brief History of InfoVis High-Density Data Visualization • Word/Tag Cloud / Wordle • Jim Flanagan, 2002 FEUP / LIACC 41 SSIIM Brief History of InfoVis High-Density Data Visualization • Moving Bubble Chart • Hans Rosling 2005 FEUP / LIACC 42 SSIIM Brief History of InfoVis High-Density Data Visualization • Chord Diagram (radial • Danny Holten, 2006 FEUP / LIACC 43 SSIIM Semiology of Graphics • Semiology (or semiotics) refers to the study of signals and communication • Meaning, relations, perception • A signal represents something other than itself • Mapping between the data and visual representation • Semiology of graphics • Based upon Semiologie Graphique (Jacques Bertin, 1967) • Theoretical foundation for information visualization • Considers printing on white paper as transmission medium FEUP / LIACC 44 SSIIM Semiology of Graphics Categorization of Symbolic Displays • Kosslyn (1989) divided the visual representation of information into graphs, charts, maps and diagrams. FEUP / LIACC 45 SSIIM Semiology of Graphics Categorization of Symbolic Displays • Lohese et al. (1994) conduced an experiment where 16 participants (half with a graphic design background) classified 60 different graphics into groups and were asked to name those groups. The resulting groups were: • Graphs • Tables (numerical and graphical) • Charts (time charts and network charts) • Diagrams (structure diagrams and network diagrams) • Maps • Cartograms • Icons • Photo-realistic images FEUP / LIACC 46 SSIIM Semiology of Graphics Visual Structure • Visual structure composed of • Spatial substrate • Axes are often placed on space to assist • Marks • Graphical properties of marks • Marks are things that occur in space • Point • Line • Area • (Volume) FEUP / LIACC 47 SSIIM Semiology of Graphics Visual Variables • Position • Size • Shape • Value • Orientation • Color • Texture FEUP / LIACC 48 SSIIM Semiology of Graphics Additional Visual Variables • Movement • Direction, speed, acceleration, … • Saturation of color • Flicker • Frequency, rhythm, … • Depth • 3D Perception, depth, occlusion, perspective, binocular disparity, … • Illumination • Transparency FEUP / LIACC 49 SSIIM Semiology of Graphics Visual Variables Characteristics • Selective • Is a change in the variable enough to select it from a group? • Associative • Is a change in the variable enough to be perceived as a group? • Quantitative • Can changes in the variable transmit a numeric value? • Order • Can changes in the variable be perceived as ordered? • Length (Dissociative) • How many changes in the variable can be perceived as distinct? FEUP / LIACC 50 SSIIM Semiology of Graphics Impositions FEUP / LIACC 51 SSIIM Semiology of Graphics Impositions • Example • Victims of traffic accidents in France (1958) Pedestrians 28.951 Bicycles 17.247 Motorcycles 74.887 4-Wheeled Vehicles 63.071 FEUP / LIACC 52 SSIIM Semiology of Graphics Impositions FEUP / LIACC 53 SSIIM Semiology of Graphics Impositions • Linear construction • Only one dimension used to show data • Quantities are shown in a proportional manner • Total is represented implicitly FEUP / LIACC 54 SSIIM Semiology of Graphics Impositions • Orthogonal construction • Categories and quantities represented in different axes • Total is not represented • Easier comparison between categories FEUP / LIACC 55 SSIIM Semiology of Graphics Impositions • Rectilinear elevation • Quantity is represented by area • Size of marks • Only one dimension used • Total is not represented • Comparison between categories is more difficult FEUP / LIACC 56 SSIIM Semiology of Graphics Impositions • Circular construction • Circular version of rectilinear construction • Quantity is represented by angle at the center of the circumference and size of the arc • Total is represented • Comparison is easier using angles than arc lengths FEUP / LIACC 57 SSIIM Semiology of Graphics Impositions • Polar construction • Circular version of orthogonal construction • Total is not represented • Comparison of quantities is more complex FEUP / LIACC 58 SSIIM Semiology of Graphics Impositions • Circular elevation • Circular version of rectilinear elevation • Quantity is represented by the area • Total is not represented FEUP / LIACC 59 SSIIM Graph Types and Examples Hierarchical Data • Node-link diagrams • Cartesian coordinates • Polar coordinates FEUP / LIACC 60 SSIIM Graph Types and Examples Hierarchical Data • Treemap and variations • Voronoi Treemap FEUP / LIACC 61 SSIIM Graph Types and Examples Hierarchical Data • Circular Treemap FEUP / LIACC 62 SSIIM Graph Types and Examples Hierarchical Data • Adjacency diagrams • Cartesian (icicle) • Polar (sunburst) FEUP / LIACC 63 SSIIM Graph Types and Examples Graphs Opte Project, 2003 FEUP / LIACC 64 SSIIM Graph Types and Examples Graphs Opte Project, 2015 FEUP / LIACC 65 SSIIM Graph Types and Examples Graphs FEUP / LIACC 66 SSIIM Graph Types and Examples Graphs FEUP / LIACC 67 SSIIM Graph Types and Examples Graphs • Arc Diagram FEUP / LIACC 68 SSIIM Graph Types and Examples Graphs • Force-Directed Graph FEUP / LIACC 69 SSIIM Graph Types and Examples Graphs • Matrix/Pixel-based representations FEUP / LIACC 70 SSIIM Graph Types and Examples FEUP / LIACC 71 SSIIM Graph Types and Examples Temporal Data • Theme River / Streamgraph FEUP / LIACC 72 SSIIM Graph Types and Examples Temporal Data • Spiral Display FEUP / LIACC 73 SSIIM Graph Types and Examples Temporal Data • Spiral Display • Changing the time period can reveal temporal patterns FEUP / LIACC 74 SSIIM Graph Types and Examples Temporal Data FEUP / LIACC 75 SSIIM Graph Types and Examples Multivariate Data • Easy to represent data up to three dimensions FEUP / LIACC 76 SSIIM Graph Types and Examples Multivariate Data • Use different visual variable for third dimension FEUP / LIACC 77 SSIIM Graph Types and Examples Multivariate Data • Scatterplot matrix • Parallel coordinates • Table lens • Chernoff faces FEUP / LIACC 78 SSIIM Graph Types and Examples Multivariate Data • Star Plot (Radar chart) FEUP / LIACC 79 SSIIM Graph Types and Examples Multivariate Data FEUP / LIACC 80 SSIIM Graph Types and Examples Geospatial Data FEUP / LIACC 81 SSIIM Graph Types and Examples Geospatial Data FEUP / LIACC 82 SSIIM Graph Types and Examples Geospatial Data FEUP / LIACC 83 SSIIM Graph Types and Examples Geospatial Data FEUP / LIACC 84 SSIIM Graph Types and Examples Geospatial Data FEUP / LIACC 85 SSIIM Graph Types and Examples Geospatial Data FEUP / LIACC 86 SSIIM Graph Types and Examples Geospatial Data FEUP / LIACC 87 SSIIM Graph Types and Examples Geospatial Data • Lisbon’s Traffic • Pedro Cruz, 2010 FEUP / LIACC 88 SSIIM Graph Types and Examples • Online Communities • Randall Munroe 2010 FEUP / LIACC 89 SSIIM Graph Types and Examples FEUP / LIACC 90 SSIIM Graph Types and Examples FEUP / LIACC 91 SSIIM Graph Types and Examples Social Visualizations • Refugees and immigrants (Peter Orntoft, 2010) FEUP / LIACC 92 SSIIM Graph Types and Examples Social Visualizations FEUP / LIACC 93 SSIIM Graph Types and Examples Social Visualizations FEUP / LIACC 94 SSIIM Graph Types and Examples Social Visualizations • An ecosystem of corporate politicians • Pedro Cruz, 2013 FEUP / LIACC 95 SSIIM Graph Types and Examples Infographics FEUP / LIACC 96 SSIIM Graph Types and Examples Infographics FEUP / LIACC 97 SSIIM Graph Types and Examples Infographics FEUP / LIACC 98 SSIIM Graph Types and Examples FEUP / LIACC 99 SSIIM Graph Types and Examples Infoposter FEUP / LIACC 100 SSIIM Graph Types and Examples Infographic vs Infoposter • Infographic • Manner of visualizing information or data • Uses small amount of text (especially short captions and explanations) • Visual elements (symbols, icons, ...) used to convey quantitative information • Other elements (color, size, shape) used to convey qualitative information • Infoposter • Uses text and numbers to convey various facts (quantitative) • Graphic elements (symbols, icons, graphics, ...) typically used just to make it more appealing visually • Typically vertical format FEUP / LIACC 101 SSIIM Best Practices • Edward Tufte defines principles of graphical integrity and guidelines to help create good visualizations • Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space FEUP / LIACC 102 SSIIM Best Practices Graphical Integrity • The representation of numbers, as physically measured on the surface of the graphic itself, should be directly proportional to the numerical quantities measured. • Lie Factor Size of effect in the graphic Lie factor = Size of effect in the data 27,5 - 18 x 100 = 53% 18 5,3 – 0,6 x 100 = 783% 0,6 783 Lie factor = = 14,8 53 FEUP / LIACC 103 SSIIM Best Practices Graphical Integrity • Clear, detailed, and thorough labeling should be used to defeat graphical distortion and ambiguity. Write out explanations of the data on the graphic itself. Label important events in the data. What America talked about in 2014, as viewed Echelon Insights FEUP / LIACC through 184.5 million Twitter mentions 104 SSIIM Best Practices Graphical Integrity • Show data variation not design variation FEUP / LIACC 105 SSIIM Best Practices Graphical Integrity • In time-series displays of money, deflated and standardized units of monetary measurement are nearly always better than nominal units FEUP / LIACC 106 SSIIM Best Practices Graphical Integrity • The number of information‐carrying (variable) dimensions depicted should not exceed the number of dimensions in the data FEUP / LIACC 107 SSIIM Best Practices Graphical Integrity FEUP / LIACC 108 SSIIM Best Practices Graphical Integrity • Graphics must not quote data out of context FEUP / LIACC 109 SSIIM Best Practices Graphical Integrity FEUP / LIACC 110 SSIIM Best Practices Graphical Integrity Stock Market Crash? FEUP / LIACC 111 SSIIM Best Practices Graphical Integrity • Maximize data ink ratio (within reason) • The proportion of the graphic's ink devoted to non-redundant display of data information Data ink Data ink ratio = Total ink used in graphic FEUP / LIACC 112 SSIIM Best Practices Graphical Integrity • Data density should be maximized within reason • Data density is the proportion of the total area of the graph that is dedicated to display data • Most graphs can be shrunk way down without losing legibility or information (The Shrink Principle), economizing space and bringing room to the portrayal of more information FEUP / LIACC 113 SSIIM Best Practices Graphical Integrity • Use Small Multiples • The repeated application of the Shrink Principle leads to a powerful and effective design, the small multiples • Series of the same high-density graphic repeated in one layout • Small multiples are a great tool to visualize large quantities of data and with a high number of dimensions, enabling to rapidly compare, for example, the nature of a whole dataset across one selected dimension FEUP / LIACC 114 SSIIM Best Practices Graphical Integrity • Avoid chart junk FEUP / LIACC 115 SSIIM Best Practices Choose an Appropriate Graph Type • Dimensionality of the data • Nature of the data • Nominal variables? How many classes? • Ordinal variables? • Quantitative variables? • How many variables of each type? • Intent of the graph • Comparing items • Showing (temporal) evolution of data • Showing relationship between data • Showing data distribution • Showing data composition FEUP / LIACC 116 SSIIM Best Practices Choose an Appropriate Graph Type FEUP / LIACC 117 SSIIM Best Practices Funny Examples FEUP / LIACC 118 SSIIM Best Practices Mind your target audience • Familiarity with symbols • May vary from culture to culture FEUP / LIACC 119 SSIIM Best Practices Mind your target audience FEUP / LIACC 120 SSIIM Best Practices Mind your target audience • Consider accessibility issues • Color combinations FEUP / LIACC 121 SSIIM Best Practices Mind your target audience • Consider accessibility issues • Color blindness FEUP / LIACC 122 SSIIM Best Practices Gustafson FEUP / LIACC 123 SSIIM Best Practices Consider Accessibility Issues • Avoid optical ambiguity / illusions FEUP / LIACC 124 SSIIM Best Practices What Not To Do (Fox News Edition) FEUP / LIACC 125 SSIIM Best Practices What Not To Do (Fox News Edition) FEUP / LIACC 126 SSIIM Best Practices What Not To Do (Fox News Edition) FEUP / LIACC 127 SSIIM Tools and References • Some Useful Tools • Gephi (https://gephi.org/) • D3 (https://d3js.org/) • FusionCharts (http://www.fusioncharts.com/) • Processing (https://processing.org/) • Processing.js (http://processingjs.org/) • Selection of Tools for Data Visualization • http://selection.datavisualization.ch/ • Gapminder (https://www.gapminder.org/) FEUP / LIACC 128 SSIIM Tools and References Some Reference Websites • Information Aesthetics (http://infosthetics.com/) • Visual Complexity (http://www.visualcomplexity.com/vc/) • Data Visualization (http://www.data-visualization.org/) • Visualising Data (http://www.visualisingdata.com/) • Information is Beautiful (http://www.informationisbeautiful.net/) • InfoVis:Wiki (www.infovis-wiki.net/) • DataVis.ca (http://www.datavis.ca/) • Edward Tufte (https://www.edwardtufte.com/tufte/) FEUP / LIACC 129 SSIIM Tools and References Some Reference Books • Edward R. Tufte, The Visual Display of Quantitative Information. Graphics Press, 2007. • Jacques Bertin, Semiology of Graphics: Diagrams, Networks, Maps. ESRI Press, 2010. • Colin Ware, Information Visualization: Perception for Design. Morgan Kaufmann, 2012 (3rd edition) • Robert Spence, Information Visualization: An Introduction. Springer, 2014 (3rd edition). • Stephen Few, Now You See It: Simple Visualization Techniques for Quantitative Analysis. Analytics Press, 2009. • Julie Steele e Noah Iliinsky (eds), Beautiful Visualization - Looking at Data Through the Eyes of Experts. O’Reilly, 2010. • Toby Segaran e Jeff Hammerbacher (eds), Beautiful Data: The Stories Behind Elegant Data Solutions. O’Reilly, 2009. FEUP / LIACC 130 SSIIM Possible Topics for Course Work • Survey on interaction with visualizations • Survey on recent information visualization methods • Exploratory visualization of a dataset • … FEUP / LIACC 131 SSIIM Q & A Information Visualization An Introduction Daniel Castro Silva [email protected] FEUP / LIACC 132