Interactive Visualizations for teaching, research, and dissemination

Interactive Visualizations For teaching, research, and dissemination

Scott A. Hale, Joshua Melville Kunika Kono

http://blogs.oii.ox.ac.uk/vis

Broad motivation

Proliferation of digital data (esp. geospatial and network)

The rise of ‘big data’, coupled with increasing interest in social media trace data

Many static, image-based visualizations being produced, with many tools geared up for producing them…

However, static images loose depth & sacrifice complexity and nuance

We concluded there is a lack of elegant, easy-to-use tools for non-technical researchers to create interactive visualizations

Existing tools, libraries

That is not to say that some tools do not already exist! For example:

Many Eyes

Google Charts, Maps

Simile Widgets

Sigma.js, D3.js

Miso

Raphael, Dojo Toolkit

oCanvas

Processing

Why interactive?

What are the limitations of conventional (static) approaches?

Logic of conventional visualization is a product of the limits of traditional paper-based dissemination methods. Cannot be interactive, by definition.

This reduces the intelligibility of complex data sets (by requiring inelegant and confusing visual representations)

…or forces simplification, resulting in a loss of explanatory power.

Multidimensionality of data (esp. ‘Big Data’) needs dynamic representation

This encourages user/reader exploration

Allows finding specific values without returning to source data

Promotes richer dissemination of findings outside of (and in addition to) traditional academic publication

Project development parameters

Browser native and standards compliant code

No flash, no java, no proprietary formats

Standalone/Offline

Can work in ebooks

Can work on tablets even if disconnected

Easy to use

Online interface to take the researcher “from datafile to visualization”

What types of visualizations?

Network diagrams

World choropleth maps

(Spatial treemaps)

Networks

Network data increasingly common

Structural explanation gaining momentum within social science

Influx of tools and techniques from other disciplines (Comp Sci/Physics)

SNA community has an historical aversion to disseminating raw data

A perceived complexity is seen to prevent the ‘lay’ interpretation of network data.

Nevertheless, visualization a crucial analytical/interpretive step.

Implementation Considerations

Computational Demands Hundreds/thousands of nodes to be rendered. Force directed layout algorithms scale poorly in javascript, and are difficult to implement. Interactivity adds further demands.

File Formats Many to choose from (graphml, gexf, gdf, dl, net). Some XML, some not. No clear winner.

Rendering Technology SVG, Canvas, WebGL…and the complex relationship between them.

Many Network Types – One (Extendable) Interface Need to avoid overly specific features/becoming a ‘twitter visualizer’.

Implementation Details

• Sigma.js as the renderer

• Renders to canvas element using its own internal drawing methods and scene management (layers for nodes, edges, etc.)

• HTML5/CSS3/JS interface, jQuery for transitions and effects

• Clean and customisable framework, based on a single json configuration file

• Editable by hand (for advanced users)

• Parser to turn common file formats into pure javascript data structures (json)

• Increases rendering speed

• Preserves existing layout (so no layout needed in browser)

Followers of @oiioxford

http://oxfordinternetinstitute.github.com/InteractiveVis/network/

https://apps.facebook.com/namegenweb/

OII Knowledge Exchange Project

Gephi Exporter Plugin

Issues/Limitations

No web based wizard (time constraints)

Upper bound to scalability due to rendering method

Potential to implement WebGL

Dependence on existing skills

Graph layout

Framing

Software packages (Gephi)

Maps

Point vs Choropleth/Polygon

While point maps are sexy, polygons are often easier to normalize

Static Literacy

Interactive Literacy

http://blogs.oii.ox.ac.uk/vis/?page_id=115

Knowledge Economies

Geotagged Tweets

http://blogs.oii.ox.ac.uk/vis/?page_id=115

Implementation

SVG/Raphael

Lightweight, standalone, tablet-friendlish

Abstracted json configuration

config in one place, human readable

setup wizard only needs to write two files (data, config)

http://api.oii.ox.ac.uk/InteractiveVisBuilder/

Issues/Limitations

Wizard UI wanting

Hard to mash up with GIS shapefiles

Unable to having backing/tile map

Possibly extend with leaflet.js implementation, but issues with speed portability.

Thanks!

Use the tools / contribute (all code is open source)

Sign up for our mailing list; subscribe to RSS feed

Extend the spirit of the project! Create your own class of visualisation, using open standards, and common data formats.

http://blogs.oii.ox.ac.uk/vis