Introduction to Information Visualisation

Sales Data as a Table

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

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 Cleaning Data

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

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

• Business Intelligence Tools:
  • Tableau tableau.com
    • upload data (public)
    • analyse data
    • create visualisations (public)
    • create dashboards (public)
  • Qlik qlik.com
  • PowerBI powerbi.microsoft.com
  • Tibco Spotfire spotfire.tibco.com
• Consumer Charting Tools:
  • Datawrapper datawrapper.de
    (free and commerical, either hosted or PHP on own server)
  • Flourish flourish.studio
  • Infogram infogram.com
  • Everviz everviz.com
  • plotly plot.ly
  • ChartCube chartcube.alipay.com
  • RAWGraphs rawgraphs.io
    (free, open source, online or localhost, various D3 charts for tabular data)
  • DataMaps.eu datamaps.eu
    (free, choropleth maps in SVG)
• Data Drawing Apps:
  • Charticulator; charticulator.com
    (free, open source, online or localhost)
  • Adobe Data Illustrator; data-illustrator.com
    
• No Longer Around:
  • IBM Many Eyes [dead]
    many-eyes.com
https://computerworld.com/article/2930326/
    (data and visualisations public, Java applets, social discussion)
  • Google Spreadsheets + Gadgets [dead]
    docs.google.com
    (upload data, insert chart gadgets, create custom gadgets)
  • verifiable.com [dead]
  • swivel.com [dead]
    https://eagereyes.org/criticism/the-rise-and-fall-of-swivel

Standalone Applications

• Excel, LibreOffice Calc;
• Adobe Illustrator;
• Liquid Diagrams (IICM, Flash-based, not released);
• RAWGraphs rawgraphs.io
  (free, open source, online or localhost, various D3 charts for tabular data)
• Vega Editor (Vega 3, Vega Lite, Lyra); vega.github.io
• Charticulator; charticulator.com
  (free, open source, online or localhost, data drawing app)

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)

• Javascript: (on the following slides).
• Java:
  • JavaFX charts; javafx.scene.chart
  • Prefuse; https://github.com/prefuse/Prefuse
  • InfoVis Toolkit (ivtk); https://sourceforge.net/projects/ivtk/
• Actionscript (Flash, Flex) [dead]:
  • Flare; flare.prefuse.org
  • Kap Lab Kalileo; http://lab.kapit.fr/default/Kalileo/
  • birdeye; http://code.google.com/p/birdeye/
• Many, many others (for C, C++, ...).

Basic Graphics Technologies in the Web Browser

Three ways to draw graphics dynamically using JavaScript:

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

Graphics Libraries (JavaScript)

• PixiJS (2D: WebGL, Canvas2D);
  pixijs.com
• Three.js (3D: WebGL, Canvas2D, SVG-DOM);
  threejs.org
• Two.js (2D: WebGL, Canvas2D, SVG-DOM);
  https://jonobr1.github.io/two.js/
• Raphael (2D: SVG-DOM); [outdated]
  https://dmitrybaranovskiy.github.io/raphael/
• plexx (2D: WebGL, Canvas2D, SVG-DOM, Save As SVG); [not released]
  ISDS

InfoVis Toolkits (JavaScript)

• D3 Data-Driven Documents (SVG-DOM)
  d3js.org
  (recipes to compose marks on screen, very widely used)
• chartist (SVG-DOM)
  https://gionkunz.github.io/chartist-js/
• chart.js (Canvas 2D)
  chartjs.org
• FluidDiagrams (three.js)
  https://projects.isds.tugraz.at/fluiddiagrams/
• dimple.js (D3)
  dimplejs.org
• c3 (D3)
  c3js.org
• G2 (Canvas 2D, SVG-DOM)
  g2.antv.vision
• Highcharts (Canvas 2D, WebGL)
  highcharts.com
  (free for non-commercial use)
• AmCharts (SVG-DOM)
  amcharts.com
  (free with branding)
• dc.js (D3)
  http://dc-js.github.io/dc.js/
• vega (D3, Canvas 2D)
  https://trifacta.github.io/vega/

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.

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/
• Describler; describler.com

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

• EuroVis 2020; 25-29 May 2020, Norrköping, Sweden.
  Now only online conference. eurovis.org
• IEEE Vis 2020; 25-30 Oct 2020, Salt Lake City, USA.
  ieeevis.org
• IVAPP 2021; 08-10 Feb 2021, Vienna, Austria.
  ivapp.visigrapp.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/2021/2021-05-24-infovis/

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