An HTML5 data visualization tool
- Mathias Schäfer
- Software developer at 9elements
- HTML/CSS/JavaScript, Ruby on Rails
- @molily on Mastodon
- @molily on Twitter
- molily@mailbox.org
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
-
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™
- 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…)
constructor()update(data)draw(options)dispose()addChild()/removeChild()- State transition system
- 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