Visualising Hierarchies

Visualising Networks

Visualising Multidimensional Metadata

Visualising Object Collections (Feature Spaces)

Open Data Formats

• Spreadsheet
  • Excel (xls), OpenOffice (ods), comma-separated value (csv), JSON, etc.
  • machine-readable
  • (potentially) with a guaranteed URI
• SPARQL + RDF
  • RDF triples in say XML notation.
  • machine-readable
  • (potentially) with a guaranteed URI
  • (potentially) live data = always current
  • RDF "Dialects" for Statistical Data:
    • The RDF Data Cube Vocabulary W3C initiative, based on SDMX ISO standard.
    • Simple Knowledge Organization System (SKOS) for concept hierarchies.
    • The Statistical Core Vocabulary (SCOVO) earlier project, now deprecated.

Tools for Massaging Data

• Scripting Languages
  • Python
  • Perl
• Data Cleaning
  • Wrangler
    http://vis.stanford.edu/wrangler/
    (web service)
  • OpenRefine
    openrefine.org
    (download, but runs locally in web browser)

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

• IBM Many Eyes
  • upload data (always public)
  • create public visualisations (Java applets)
  • many-eyes.com
• Tableau Public
  • upload data (public)
  • analyse data
  • create visualisations (public)
  • create dashboards (public)
  • http://tableausoftware.com/public/
• Tibco Silver Spotfire
  silverspotfire.tibco.com
• Google Spreadsheets + Gadgets (dead)
  • upload data (private or shared)
  • insert gadgets (private or shared)
  • custom gadgets (Google Vis API) [Liquid Diagrams Gadgets]
  • docs.google.com
• Datawrapper
  datawrapper.de (either hosted or PHP on own server)
• verifiable.com (dead)
• swivel.com (dead)
• DataMaps.eu
  datamaps.eu (produces choropleth maps in SVG)
• Google Maps API

Standalone Applications

• Excel, OpenOffice Calc
• Adobe Illustrator
• Liquid Diagrams (not released)

Scripting Languages (with Libraries)

• R
  • lattice http://cran.r-project.org/web/packages/lattice/
  • 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)

• Java
  • Prefuse
    prefuse.org
  • InfoVis Toolkit (ivtk)
    ivtk.sourceforge.net
• Actionscript (Flash, Flex)
  • Flare
    flare.prefuse.org
  • Kap Lab Kalileo
    http://lab.kapit.fr/default/Kalileo/
  • birdeye
    http://code.google.com/p/birdeye/
• Javascript (SVG-DOM, Canvas 2D, WebGL)
  • D3
    http://mbostock.github.com/d3/
  • Javascript InfoVis Toolkit (jit)
    thejit.org
  • Modest Maps
    modestmaps.com
  • Polymaps
    polymaps.org
• Many, many others (for C, C++, ...)

Basic Graphics Technologies in the Web Browser

Ways to draw graphics dynamically using JavaScript:

• Canvas 2D (HTML Canvas 2D Context)
  http://w3.org/TR/2dcontext/
• SVG-DOM (SVG nodes injected into the DOM)
  http://sitepoint.com/surviving-the-zombie-apocalypse-manipulating-svg-with-javascript/
• WebGL
  webgl.org

Graphics Libraries (JavaScript)

• raphael (2D: SVG-DOM)
  raphaeljs.com
• three.js (3D: WebGL, Canvas 2D, SVG-DOM)
  threejs.org
• two.js (2D: WebGL, Canvas 2D, SVG-DOM)
  https://jonobr1.github.io/two.js/
• pixi (2D: WebGL, Canvas 2D)
  pixijs.com
• plexx (2D: WebGL, Canvas 2D, SVG-DOM, Save As SVG)
  IICM

InfoVis Toolkits (JavaScript)

• D3 Data-Driven Documents (SVG-DOM)
  d3js.org
• chartist (SVG-DOM)
  https://gionkunz.github.io/chartist-js/
• chart.js (Canvas 2D)
  chartjs.org
• fluiddiagrams (three.js)
  http://projects.iicm.tugraz.at/fluiddiagrams/
• dimple.js (D3)
  dimplejs.org
• c3 (D3)
  c3js.org
• dc.js (D3)
  http://dc-js.github.io/dc.js/
• vega (D3, Canvas 2D)
  https://trifacta.github.io/vega/
• wisp (plexx)
  IICM

Examples of Visualising Data Given in RDF

Not many...

• UK Archives; Cabinet Office Organogram; http://data.gov.uk/organogram/cabinet-office
http://code.google.com/p/linked-data-api/source/browse/branches/organogram-2011-03-31/
  (Server-side processing of RDF, ships JSON to browser, and uses jit for visualisation).
• Jeni Tennison; Offence Hierarchy Visualisation with rdfQuery and JIT; http://www.jenitennison.com/blog/node/123
  Working version of demo: http://www.jenitennison.com/visualisation/offences.html?offences=http%3A%2F%2Fwww.jenitennison.com%2Fdata%2Fscheme%2Foffence%2Fcriminal-damage
  (Client-side processing of RDF, uses jit for visualisation).
• LODlive; http://en.lodlive.it
  (Client-side processing of RDF, uses jquery.jcanvas for visualisation).

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:Observation>
  <qb:dataset rdf:resource="/id/tin00088#ds"></qb:dataset>
  <hhtyp rdf:resource="/dic/hhtyp#TOTAL"></hhtyp>
  <geo rdf:resource="/dic/geo#AT"></geo>
  <dcterms:date>2003</dcterms:date>
  <sdmx-measure:obsValue>37</sdmx-measure:obsValue>
</qb:Observation>
<qb:Observation>
  <qb:dataset rdf:resource="/id/tin00088#ds"></qb:dataset>
  <hhtyp rdf:resource="/dic/hhtyp#TOTAL"></hhtyp>
  <geo rdf:resource="/dic/geo#AT"></geo>
  <dcterms:date>2004</dcterms:date>
  <sdmx-measure:obsValue>45</sdmx-measure:obsValue>
</qb:Observation>
...

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

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

Open Data

• Cooperation OGD Österreich; Katalog offener Datensätze und Dienste; data.gv.at
• Stadt Graz; Open Government Data Graz; data.graz.gv.at
• UK Government; data.gov.uk; data.gov.uk
• US Federal Government; data.gov; data.gov
• Open Knowledge Foundation; okfn.org; okfn.org
• Open Knowledge Forum Austria; opendata.at; opendata.at

Books (HowTo Guides)

• 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
• Colin Ware; Information Visualization: Perception for Design; 3^rd Edition, Morgan Kaufmann, Dec 2012. 0123814642
• Robert Spence; Information Visualization: Design for Interaction; 2^nd Edition, Prentice Hall, 2006. 0132065509
• Tamara Munzner Visualization Analysis and Design: Abstractions, Principles, and Methods; A. K. Peters, 2014. http://www.cs.ubc.ca/~tmm/courses/533/book/

Videos

• Hans Rosling; Stats that Reshape Your Worldview; TED 2006 Talk, 22 Feb 2006. http://www.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://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization.html
• Stephen Few; Now You See It; Tableau Customer Conference 2008 Talk, 22 Jul 2008. http://www.tableausoftware.com/mkt/downloads/StephanFew-TableauConference.wmv

Conferences

• EuroVis 2015; 25-29 May 2015, Cagliari, Sardinia, Italy. eurovis.org
• IV 2015; 21-24 Jul 2015, Barcelona, Spain. www.graphicslink.co.uk
• IEEE Vis 2015; 25-30 Oct 2015, Chicago, Illinois, USA. ieeevis.org

Thank You

Prof. Keith Andrews

IICM, Graz University of Technology, Austria

http://www.iicm.tugraz.at/keith/

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

These slides:
http://keithandrews.com/talks/2015/ddj-2015-11-26/