GED VIZ An HTML5 data visualization tool


my name is


What is GED VIZ?

  • 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


  • Interactive Storytelling, Data Journalism & Open Data
  • Bertelsmann Foundation
  • Project Global Economic Dynamics (GED)
    • 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™

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

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


That’s all, folks!