Data Visualisation

Prof. Keith Andrews

IICM, Graz University of Technology, Austria


Thu 26 Nov 2015, FH Joanneum, Graz, Austria.

Visualising Hierarchies

Collage: Visualising Hierarchies

Visualising Networks

Collage: Visualising Networks

Visualising Multidimensional Metadata

Collage: Visualising Multidimensional Metadata

Visualising Object Collections (Feature Spaces)

Collage: Visualising Object Collections

Open Data Formats

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

Ways to draw graphics dynamically using JavaScript:

Graphics Libraries (JavaScript)

InfoVis Toolkits (JavaScript)

Examples of Visualising Data Given in RDF

Not many...

A Eurostat Vis Tool

  1. Get RDF data cube from Eurostat wrapper.
  2. Query data using SPARQL, save subset as RDF.
  3. Load RDF subset into web browser.
  4. Generate JSON format on the fly in browser.
  5. Visualise using ProtoVis.

Example Eurostat Data in RDF/XML

  <qb:dataset rdf:resource="/id/tin00088#ds"></qb:dataset>
  <hhtyp rdf:resource="/dic/hhtyp#TOTAL"></hhtyp>
  <geo rdf:resource="/dic/geo#AT"></geo>
  <qb:dataset rdf:resource="/id/tin00088#ds"></qb:dataset>
  <hhtyp rdf:resource="/dic/hhtyp#TOTAL"></hhtyp>
  <geo rdf:resource="/dic/geo#AT"></geo>
Example dataset eurostat.rdf.

JSON-like Data Example

var eu_stats = {
'AT': {name:'Austria', a:[33, 46, 54, 58, 64]},
'BE': {name:'Belgium', a:[48, 56, 60, 63, 70]},
'BG': {name:'Bulgaria', a:[10, 15, 21, 26, 26]},
'CY': {name:'Cyprus', a:[12, 20, 33, 47, 51]},
'CZ': {name:'Czech Republic', a:[17, 28, 36, 49, 54]},
'DE': {name:'Germany', a:[34, 50, 55, 65, 75]},
'DK': {name:'Denmark', a:[63, 70, 74, 76, 80]},
'SI': {name:'Slovenia', a:[34, 44, 50, 56, 62]},
'SK': {name:'Slovakia', a:[11, 27, 35, 42, 49]},
//'TR': {name:'', a:[0, 17, 22, 26, 34]},
'UK': {name:'United Kingdom', a:[44, 57, 62, 69, 0]}
eu_stats.maxYear = 2010;
eu_stats.minYear = 2006;
eu_stats.yearIdx = function(year) { return -2006+year; }

Final Eurostat Vis in Browser

eurostat vis

A SKOS (Hierarchy) Vis Tool

  1. Read SKOS data from file (or elsewhere) into browser:
    Example dataset faculty.rdf.
  2. Generate JSON format on the fly in browser.
  3. Visualise using D3.

Final Eurostat Vis in Browser

skos faculty hierarchy vis

Open Data

Books (HowTo Guides)

Books (Hardcore InfoVis)



Thank You

Prof. Keith Andrews

IICM, Graz University of Technology, Austria

Course Notes on Information Visualisation:

These slides: