Information Visualisation for the Web

Prof. Keith Andrews
IICM, Graz University of Technology, Austria
http://www.iicm.tugraz.at/keith/

Slides
http://keithandrews.com/talks/2017/nux-2017-02-22-infovis/

Wed 22 Feb 2017, NUX Newcastle, Newcastle, UK.

Sales Data as a Table

MonthSalesperson ASalesperson B
2012-0128,36623,274
2012-0227,05021,732
2012-0329,46323,845
2012-0432,56128,732
2012-0528,05024,023
2012-0630,10026,089
2012-0722,34319,026
2012-0821,50617,903
2012-0924,66419,387
2012-1028,84223,490
2012-1130,62125,873
2012-1236,25428,490

Sales Data as a Line Chart

Interactive Data Visualisation

Visualising Hierarchies

Hyperbolic Browser

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

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, IICM, Graz University of Technology [Andrews, 2002]
doi:10.1109/IV.2002.1028871

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
...
UBS Prices and Earnings Survey 2012 [UBS, 2012]
https://www.ubs.com/microsites/prices-earnings/open-data.html

Parallel Coordinates and Similarity Maps

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

AVL Racing's SimBook

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

Voronoi Hierarchy + Similarity Map

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

Visualising Networks

Visualising Object Collections (Feature Spaces)

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 Business, 24 Jun 2015]
https://bloomberg.com/graphics/2015-whats-warming-the-world/

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

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

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:

Books (HowTo Guides)

Books (Hardcore InfoVis)

Books (Scalable and Responsive InfoVis)

Videos

Conferences

Credits

Thanks to the following people for helping to build the responsive demos:

Thank You!

Prof. Keith Andrews
IICM, Graz University of Technology, Austria
http://www.iicm.tugraz.at/keith/

These slides:
http://keithandrews.com/talks/2017/nux-2017-02-22-infovis/

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

Illuminating Data Through Visualisation, TEDxGraz Talk, 06 Nov 2015:
http://youtu.be/fnyKj8r0CN4