Introduction to Information Visualisation

Sales Data as a Table

Month	Salesperson A	Salesperson B
2012-01	28,366	23,274
2012-02	27,050	21,732
2012-03	29,463	23,845
2012-04	32,561	28,732
2012-05	28,050	24,023
2012-06	30,100	26,089
2012-07	22,343	19,026
2012-08	21,506	17,903
2012-09	24,664	19,387
2012-10	28,842	23,490
2012-11	30,621	25,873
2012-12	36,254	28,490

Sales Data as a Line Chart

Information Visualisation

“Let my dataset change your mindset.”
[Hans Rosling, title of talk at TED@State, 03 Jun 2009]

Information visualisation (InfoVis) is the visual presentation of abstract information spaces and structures, together with accompanying interactions, so as to facilitate their rapid assimilation and understanding.

Visualisation

The broader field of visualisation has three main sub-fields:

• InfoVis:
  

  Information Visualisation (InfoVis) deals with abstract information structures, such as hierarchies, networks, or multidimensional spaces.

• GeoVis:
  

  Geographic Visualisation (GeoVis) is map-based. The data typically has inherent 2d or 3d spatial coordinates, and is generally shown in relation to a map.

• SciVis:
  

  Scientific Visualisation (SciVis) typically involves concrete (3d) objects, for example a medical scan of part of the body, or a simulation of air flow around an aircraft wing. SciVis visualisations often depict flows, volumes, and surfaces in (3d) space.

Data Visualisation (DataVis) = InfoVis + GeoVis.

Visual Analytics = DataVis (frontend) + Analytics (backend).

Interactive Information Visualisation

InfoVis ≠ SciVis or GeoVis:

• In SciVis, the visual representation (geometry) is generally given, suggested by objects in the data.
  [concrete objects, geometry is given]
• In GeoVis, the visual representation (geometry) is generally given, determined by spatial coordinates within the data.
  [spatial coordinates, geometry is given]
• In InfoVis, an appropriate visual representation must be (carefully) designed or “invented”.
  [abstract structures, geometry is chosen]

Interactive Information Visualisation

• Visual Representation + Interaction.
• Two main use cases:
  • Explore (Analyse): help researchers explore and analyse.
  • Explain (Present): present results and insights to a wider public.

Visualising Hierarchies

Hyperbolic Browser

Deep Green Hyperbolic Tree

Information Pyramids

Visualising Multidimensional Metadata

Multidimensional Data as a Table

City	Net Purchasing Power	Prices (incl. rent)	Net Wages	Working Time [hours per year]	Vacation [paid working days per year]	Time Required for Big Mac [minutes]	Time Required for iPhone 4S 16gb [hours]	City Break	Inflation 2011
Amsterdam	90.1	69.1	69.4	1755	24	15	44	720	2.48
Athens	60.5	58.2	40.0	1822	22	29	86	590	3.10
Auckland	82.9	67.8	63.5	1852	20	15	51	580	4.03
Bangkok	31.4	48.2	17.4	2312	7	36	165	550	3.81
Barcelona	78.6	65.6	58.7	1760	29	18	52	740	3.05
Beijing	29.9	51.8	18.0	1979	9	34	184	730	5.42
Berlin	97.1	64.1	70.1	1742	28	16	56	720	2.48
Bogotá	40.7	47.0	22.0	1981	15	52	142	540	3.42
Bratislava	50.7	47.1	27.3	1884	23	31	126	490	4.08
Brussels	78.5	68.8	59.5	1729	20	19	54	730	3.47
Budapest	32.0	50.4	18.1	1912	22	49	206	740	3.90
Buenos Aires	46.2	47.7	25.4	1830	13	45	187	620	9.78
Bucharest	34.0	34.8	13.5	1836	26	57	230	370	5.81
Caracas	25.7	85.4	23.4	1878	17	80	272	830	26.09
...

Parallel Coordinates and Similarity Maps

AVL Racing's SimBook

Visualising Networks

Visualising Object Collections (Feature Spaces)

Voronoi Hierarchy + Similarity Map

New York Times: Voronoi Treemap

Bloomberg: What's Really Warming the World

New York Times: Jobless Rates

Styrian Diversity Visualisation

Tools for Massaging Data

• Scripting Languages:
  • Python
  • Perl
• Data Cleaning:
  • OpenRefine
    openrefine.org
    (download, but runs locally in web browser)
  • Wrangler
    http://vis.stanford.edu/wrangler/
    (web service)
  • Trifacta
    trifacta.com
    (commercial)

Tools for Visualising Data

Four varieties:

• Web Services:
  • must be online
  • point and click
  • can (sometimes must) share data
  • can (sometimes must) share finished visualisations
• Standalone Applications:
  • download, install, and use locally
  • point and click
  • generally produce static visualisations (limited interaction)
• Scripting Languages (with Libraries):
  • download, install, and use locally
  • some basic programming
  • generally produce static visualisations (limited interaction)
• Toolkits (with Programming APIs):
  • download source code or library and use locally (sometimes remote service via API)
  • much more programming
  • can produce fully interactive visualisations

Web Services

• Tableau tableau.com
  • upload data (public)
  • analyse data
  • create visualisations (public)
  • create dashboards (public)
• Qlik qlik.com
• Tibco Spotfire spotfire.tibco.com
• Datawrapper datawrapper.de (either hosted or PHP on own server)
• IBM Many Eyes [dead]
  • upload data (always public)
  • create public visualisations (Java applets)
  many-eyes.com
http://computerworld.com/article/2930326/
• Google Spreadsheets + Gadgets [dead]
  • upload data (private or shared)
  • insert gadgets (private or shared)
  • custom gadgets (Google Vis API) [Liquid Diagrams Gadgets]
  • docs.google.com
• verifiable.com [dead]
• swivel.com [dead] https://eagereyes.org/criticism/the-rise-and-fall-of-swivel
• DataMaps.eu datamaps.eu
  • produce choropleth maps in SVG.
• Google Maps API

Standalone Applications

• Excel, OpenOffice Calc;
• Adobe Illustrator;
• Liquid Diagrams (IICM, Flash-based, not released);
• RAW (GUI for some D3 charts); rawgraphs.io
• Vega Editor (Vega 3, Vega Lite, Lyra); vega.github.io
• Adobe Data Illustrator; data-illustrator.com

Scripting Languages (with Libraries)

• R
  • ggplot2; ggplot2.org
  • portfolio; http://cran.r-project.org/web/packages/portfolio/
• Python
  • SciPy; scipy.org
  • Matplotlib; http://matplotlib.sourceforge.net/
  • Veusz; http://home.gna.org/veusz/
  • SciDAVis; http://scidavis.sourceforge.net/
  • orange; http://orange.biolab.si/
• Processing; processing.org

Toolkits (with Programming APIs)

• Java:
  • Prefuse; prefuse.org
  • InfoVis Toolkit (ivtk); ivtk.sourceforge.net
• Actionscript (Flash, Flex):
  • Flare; flare.prefuse.org
  • Kap Lab Kalileo; http://lab.kapit.fr/default/Kalileo/
  • birdeye; http://code.google.com/p/birdeye/
• Javascript (on following slides).
• Many, many others (for C, C++, ...).

Basic Graphics Technologies in the Web Browser

Three ways to draw graphics dynamically using JavaScript:

• Canvas 2D (HTML Canvas 2D Context);
  http://w3.org/TR/2dcontext/
• SVG-DOM (SVG nodes injected into the DOM);
  http://sitepoint.com/surviving-the-zombie-apocalypse-manipulating-svg-with-javascript/
• WebGL (OpenGL ES 2.0 3D API);
  webgl.org

Graphics Libraries (JavaScript)

• raphael (2D: SVG-DOM);
  raphaeljs.com
• three.js (3D: WebGL, Canvas 2D, SVG-DOM);
  threejs.org
• two.js (2D: WebGL, Canvas 2D, SVG-DOM);
  https://jonobr1.github.io/two.js/
• pixi (2D: WebGL, Canvas 2D);
  pixijs.com
• plexx (2D: WebGL, Canvas 2D, SVG-DOM, Save As SVG);
  ISDS (not released)

InfoVis Toolkits (JavaScript)

• D3 Data-Driven Documents (SVG-DOM)
  d3js.org
• chartist (SVG-DOM)
  https://gionkunz.github.io/chartist-js/
• chart.js (Canvas 2D)
  chartjs.org
• fluiddiagrams (three.js)
  http://projects.iicm.tugraz.at/fluiddiagrams/
• dimple.js (D3)
  dimplejs.org
• c3 (D3)
  c3js.org
• dc.js (D3)
  http://dc-js.github.io/dc.js/
• vega (D3, Canvas 2D)
  https://trifacta.github.io/vega/
• wisp (plexx)
  IICM

Responsive Information Visualisation

• Scalable Visualisations:

  • Scale fluidly (but nothing else).

• Responsive Visualisations:

  • Responsive Layout: Change layout at breakpoints, scale fluidly between breakpoints.
  • Responsive Display Density: Support higher and lower resolutions, data point sampling.
  • Responsive Interaction: Provide selective support for touch, keyboard, mouse, motion events, etc. Larger tap areas.

See also the examples at https://projects.isds.tugraz.at/respvis/

Media Queries Inside SVG

• Demo: Responsive SVG Logo.

  See the original discussions at:
  http://blog.cloudfour.com/media-queries-in-svg-images/
http://people.opera.com/andreasb/demos/demos_svgopen2009/update/svgscalelogo.html

• Demo: Responsive SVG Line Chart.

1. Responsive Line Chart

At narrower widths:

• Thin out the axis labels.
• Switch to a sparkline (click/tap to standard line chart).
• Reduce data density (sample the points). [Caution]

Demo: Responsive Line Chart

2. Responsive Bar Chart

At narrower widths:

• Rotate the axis labels (or abbreviate them).
• Adjust data density (remove some bars). [Caution]
• Flip from vertical bars to horizontal bars.

Demo: Responsive Bar Chart

3. Responsive Parallel Coordinates

• Selectively remove some of the dimensions (but allow the user to override!).
• Provide raw data as HTML table (accessibility, fallback in case JS fails).

Demo: Responsive Parallel Coordinates

4. Responsive Scatterplot

• Pinch zoom.
• Filtering.
• Fisheye and Cartesian distortion.
• Disambiguation. If data points overlap, list them and/or displace them temporarily.

Demo: Responsive Scatterplot

See also:

• Gabriel Florit; On Responsive Design and Data Visualization; OpenVis 2013 talk. http://youtu.be/BrmwjVdaxMM
• Ramik Sadana and John Stasko; Designing and Implementing an Interactive Scatterplot Visualization for a Tablet Computer; Proc. AVI 2014. doi:10.2312/eurovisshort.20141155
http://www.cc.gatech.edu/~stasko/papers/avi14-touch.pdf
http://vimeo.com/97798460

5. Responsive Choropleth Map

• Provide polygon borders at multiple granularities. Choose the right one depending on screen size, resolution, and current zoom level.
• Responsive layout of components (menus, info boxes).
• Support touch events, pinch zooming, etc.

Demo: Responsive Choropleth Map

Accessible Visualisations (A11y)

• Always make data available in addition to the graphic (choice of views, table in HTML, link to download).
• Textual description of any chart or graphic (e.g. SVG desc element).
• Support keyboard navigation.

Vision Deficencies

• Redundant encoding of colour hue and contrast.
• Redundant encoding of colour with another channel.
• Good contrast, but not extreme (not full black on full white).
• Colorgorical; Creating Discriminable and Preferable Color Palettes; http://vrl.cs.brown.edu/color
• Bernhard Jenny and Nathaniel Kelso; Color Design for the Color Vision Impaired; Cartographic Perspectives, No. 58, 2007. http://colororacle.org/resources/2007_JennyKelso_ColorDesign_hires.pdf
• Tools to check colour contrast, e.g. Colour Contrast Analyser https://paciellogroup.com/resources/contrastanalyser/

Accessible SVG

• Léonie Watson; Tips for Creating Accessible SVG; SitePoint, 06 May 2014.
  https://sitepoint.com/tips-accessible-svg/
• Léonie Watson; SVG Accessability; Talk at Graphical Web 2016, 03 Nov 2016.
  https://youtu.be/Bqhh0ZOSEq8
http://ljwatson.github.io/decks/2016/graphicalweb/
• WAI-ARIA Graphics Module; W3C Working Draft, 08 Sep 2016.
  https://w3.org/TR/graphics-aria-1.0/

Books (HowTo Guides)

• Stephen Few; Show Me the Numbers: Designing Tables and Graphs to Enlighten; 2^nd Edition, Analytics Press, Jun 2012. 0963488414
• Andy Kirk; Data Visualisation; Sage Publications, 05 Jul 2016. 1473912148
• Danyel Fisher and Miriah Meyer; Making Data Visual; O'Reilly, 12 Jan 2018. 1491928468
• Stephen Few; Now You See It: Simple Visualization Techniques for Quantitative Analysis; Analytics Press, 2009. 0970601980
• Nathan Yau; Visualize This; Wiley, Jul 2011. 0470944889
• Noah Iliinsky and Julie Steele; Designing Data Visualizations; O'Reilly, Sep 2011. 1449312284
• Brian Suda; Designing with Data; Five Simple Steps, Aug 2010. 0956174086 designingwithdata.com
• Stephen Few; Information Dashboard Design: Displaying Data for At-A-Glance Monitoring; 2^nd Edition, Analytics Press, Aug 2013. 1938377001

Books (Hardcore InfoVis)

• Matthew Ward, Georges Grinstein, and Daniel Keim; Interactive Data Visualization; A. K. Peters, Jul 2010. 1568814739
• Robert Spence; Information Visualization: An Introduction; 3^rd Edition, Springer, 2014. 3319073400
• Colin Ware; Information Visualization: Perception for Design; 3^rd Edition, Morgan Kaufmann, Dec 2012. 0123814642
• Tamara Munzner; Visualization Analysis and Design: Abstractions, Principles, and Methods; A. K. Peters, 2014. 1466508914

Videos

• Hans Rosling; Stats that Reshape Your Worldview; TED 2006 Talk, 22 Feb 2006. http://ted.com/talks/hans_rosling_shows_the_best_stats_you_ve_ever_seen.html
• David McCandless; The Beauty of Data Visualization; TED Global 2010 Talk, 14 Jul 2010. http://ted.com/talks/david_mccandless_the_beauty_of_data_visualization.html
• Keith Andrews; Illuminating Data Through Visualisation; TEDxGraz Talk, 06 Nov 2015. http://youtu.be/fnyKj8r0CN4

Conferences

• IEEE Vis 2018; 21-26 Oct 2018, Berlin, Germany.
  ieeevis.org
• IVAPP 2019; 25-27 Feb 2019, Prague, Czech Republic.
  ivapp.visigrapp.org
• EuroVis 2019; 03-07 Jun 2019, Porto, Portugal.
  eurovis.org

Credits

Thanks to the following students and collaborators for helping to build the responsive demos:

• Aleš Smrdel
• Rizwan Mehmood
• Gregor Christandl
• Simon Kloiber
• Matthias Link
• Lukas Skofitsch
• Thomas Traunmüller

Thank You!

Prof. Keith Andrews
ISDS, Graz University of Technology, Austria
http://isds.tugraz.at/keith/

These slides:
http://keithandrews.com/talks/2018/wuc-2018-10-17-infovis/

Course Notes on Information Visualisation:
http://courses.isds.tugraz.at/ivis/ivis.pdf