An HTML5 data visualization tool

• Mathias Schäfer
• Software developer at 9elements
• HTML/CSS/JavaScript, Ruby on Rails
• @molily
• mathias.schaefer@9elements.com

What is GED VIZ?

• viz.ged-project.de
• Free online tool for creating data visualizations
• Visualize economic relations (trade, migration …) between countries and country groups (e.g. EU)
• Editor for journalists and bloggers
• Share visualizations on social media
• Embed the player into articles and blog posts

Background

• Interactive Storytelling, Data Journalism & Open Data
• Bertelsmann Foundation

• make complex economic dynamics transparent and understandable
• create multimedia, interactive presentations of studies, simulations and forecasts

GED VIZ: Editor

GED VIZ: Player

Examples: Handelsblatt, GED articles

Made with Open Web Technologies™

• Ruby on Rails app with HAML, Sass, CoffeeScript
• MySQL database, data import from CSV
• Asynchronous Module Definition (AMD) and Require.js/Almond.js
• HAML Coffee Templates
• MVC structure: Chaplin.js on top of Backbone.js
• Raphael.js for SVG/VML

Progressive Enhancement

• Requirement: Make it work in IE6! o_O
• The editor requires newer browsers (IE8+)
• The player basically works in IE7+
  • Non-interactive, static images for old browsers (Phantom.js screenshots)
  • VML chart for IE8
  • SVG chart for newer browsers

Chart Rendering 1/3

• Raphael.js is only useful for drawing low-level SVG shapes
• Render tree of DisplayObjects (Chart, Element, Magnet, Relation, Indicator…)
• DisplayObject
  • constructor()
  • update(data)
  • draw(options)
  • dispose()
  • addChild() / removeChild()
  • State transition system (see also State Machines)
  • Backbone.Events

Chart Rendering 2/3

• Editor, Player and Chart are separate components
• chart.update(data)
• Countries are added and removed, data and indicator types and values may change
• The Chart component starts the proper transition
• Adapt chart type and size/scaling, calculate new positions
• Raphael.js animates primitive shapes, not groups

Chart Rendering 3/3

• A lot of procedural drawing code
• Map input data to visualizable data
• Update and transition logic is very custom
• State handling is quite complex
• Automatic binding? The binding model of D3.js would help, but still litte abstraction
• Raphael.js is the only SVG/VML abstraction layer

It’s Open Source!

• The full source code is MIT-licensed, data is free to use
• github.com/bertelsmannstift/GED-VIZ
• Give feedback, report errors and propose changes
• Add more data so more types of visualizations are possible
• Translate the UI – currently it’s available in English and German

Credits

• Concept: Jan Arpe and the GED team
• Concept & Design: Boris Müller and Raureif
• Typography: Jan Fromm
• Software Development: 9elements
• A lot of beta testers

That’s all, folks!

• GED VIZ tool: viz.ged-project.de
• Source code: github.com/bertelsmannstift/GED-VIZ
• Blog posts:
  • GED VIZ: An HTML5 data visualization tool
  • How we built the GED VIZ
• 9elements designs and builds HTML5 web apps.Let’s work together!