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
Interactive Data 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 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
Visualising Object Collections (Feature Spaces)
Tools for Massaging Data
- Scripting Languages:
- Data Cleaning:
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
Standalone Applications
- Excel, OpenOffice Calc
- Adobe Illustrator
- Liquid Diagrams (Flash-based, not released)
- RAW (GUI for some D3 charts)
rawgraphs.io
Scripting Languages (with Libraries)
Toolkits (with Programming APIs)
- Java:
- Actionscript (Flash, Flex):
- 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:
Graphics Libraries (JavaScript)
InfoVis Toolkits (JavaScript)
Responsive Information Visualisation
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:
Books (HowTo Guides)
- Stephen Few;
Show Me the Numbers;
2nd Edition, Analytics Press, Jun 2012.
0963488414
- Andy Kirk;
Data Visualisation;
Sage Publications, 05 Jul 2016.
1473912148
- 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
Books (Hardcore InfoVis)
- Matthew Ward, Georges Grinstein, and Daniel Keim;
Interactive Data Visualization;
A. K. Peters, Jul 2010.
1568814739
- Robert Spence;
Information Visualization: Design for Interaction;
2nd Edition, Prentice Hall, 2006.
0132065509
- Colin Ware;
Information Visualization: Perception for Design;
3rd Edition, Morgan Kaufmann, Dec 2012.
0123814642
- Tamara Munzner
Visualization Analysis and Design: Abstractions,
Principles, and Methods;
A. K. Peters, 2014.
http://www.cs.ubc.ca/~tmm/courses/533/book/
Books (Scalable and Responsive InfoVis)
- Christoph Körner;
Learning Responsive Data Visualization;
Packt Publishing, 23 Mar 2016.
978-1785883781
- Bill Hinderman;
Building Responsive Data Visualization for the Web;
Wiley, 09 Nov 2015.
978-1119067146
Credits
Thanks to the following people for helping to build the
responsive demos:
- Aleš Smrdel
- Rizwan Mehmood
- Gregor Christandl
- Simon Kloiber
- Matthias Link
- Lukas Skofitsch
