Introduction to Information Visualisation

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

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

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

Wed 17 Oct 2018, World Usability Congress, Graz, Austria.

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

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:

Data Visualisation (DataVis) = InfoVis + GeoVis.

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

Interactive Information Visualisation

InfoVis ≠ SciVis or GeoVis:

Interactive Information Visualisation

Visualising Hierarchies

Collage: Visualising Hierarchies

Hyperbolic Browser

Hyperbolic Browser
Hyperbolic Browser [Lamping and Rao, 1994]
doi:10.1145/192426.192430

Deep Green Hyperbolic Tree

Deep Green Hyperbolic Tree
Deep Green Phylogenetic Tree, University of California Berkeley [Cranfill and Moe, 2000]
http://ucjeps.berkeley.edu/htree_intro.html

Information Pyramids

Information Pyramids
Information Pyramids, IICM, Graz University of Technology [Andrews, 2002]
doi:10.1109/IV.2002.1028871

Visualising Multidimensional Metadata

Collage: Visualising Multidimensional Metadata

Multidimensional Data as a Table

City Net Purchasing Power Prices (incl. rent) Net Wages Working Time [hours per year] Vacation [paid days per year] Time for Big Mac [min] Time for iPhone 4S 16 GB [h] 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
UBS Prices and Earnings Survey 2012 [UBS, 2012]. https://www.ubs.com/microsites/prices-earnings/open-data.html

Parallel Coordinates and Similarity Maps

InfoScope with Cities 2012
InfoScope, macrofocus.com [Brodbeck and Girardin, 2003]
doi:10.1109/CMV.2003.1215008

AVL Racing's SimBook

AVL Racing's SimBook
Aggregated Parallel Coordinates, AVL Racing + IICM, [Andrews et al, 2015]
doi:10.1145/2809563.2809588

Visualising Networks

Collage: Visualising Networks

Visualising Object Collections (Feature Spaces)

Collage: Visualising Object Collections

Voronoi Hierarchy + Similarity Map

Voronoi Hierarchy + Similarity Map
InfoSky Cobweb, IICM + Hyperwave + Know-Center + Süddeutsche Zeitung [Andrews et al, 2002]
doi:10.1057/palgrave.ivs.9500023

New York Times: Voronoi Treemap

New York Times: Voronoi Treemap
[New York Times, 03 May 2008]
http://nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html

Bloomberg: What's Really Warming the World

Bloomberg: What's Really Warming the World
[Bloomberg Business, 24 Jun 2015]
https://bloomberg.com/graphics/2015-whats-warming-the-world/

New York Times: Jobless Rates

New York Times: Jobless Rates
[New York Times, 06 Nov 2009]
http://nytimes.com/interactive/2009/11/06/business/economy/unemployment-lines.html

Styrian Diversity Visualisation

Styrian Diversity Visualisation
IICM + FH Joanneum + Land Steiermark [Andrews et al, 2015]
http://diversitaet.steiermark.at/steirische-vielfalt/

Tools for Massaging Data

Tools for Visualising Data

Four varieties:

Web Services

Standalone Applications

Scripting Languages (with Libraries)

Toolkits (with Programming APIs)

Basic Graphics Technologies in the Web Browser

Three ways to draw graphics dynamically using JavaScript:

Graphics Libraries (JavaScript)

InfoVis Toolkits (JavaScript)

Responsive Information Visualisation

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

Media Queries Inside SVG

1. Responsive Line Chart

At narrower widths:

Demo: Responsive Line Chart

2. Responsive Bar Chart

At narrower widths:

Demo: Responsive Bar Chart

3. Responsive Parallel Coordinates

Demo: Responsive Parallel Coordinates

4. Responsive Scatterplot

Demo: Responsive Scatterplot

See also:

5. Responsive Choropleth Map

Demo: Responsive Choropleth Map

Accessible Visualisations (A11y)

Vision Deficencies

Accessible SVG

Books (HowTo Guides)

Books (Hardcore InfoVis)

Videos

Conferences

Credits

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

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