See http://blogs.oii.ox.ac.uk/vis/ for details

1. Interactive Visualizations
For teaching, research, and dissemination
Scott A. Hale, Joshua Melville
Kunika Kono
http://blogs.oii.ox.ac.uk/vis

2. 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

3. 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

4. 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

5. 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”

6. What types of visualizations?
 Network diagrams
 World choropleth maps
 (Spatial treemaps)

7. 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.

8. 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’.

9. 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)

10. Followers of @oiioxford

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

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

13. OII Knowledge Exchange Project

15. Gephi Exporter Plugin

16. 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)

17. Maps

18. Point vs Choropleth/Polygon

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

20. Static Literacy

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

22. Knowledge Economies

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

24. 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)

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

26. 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.

27. 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