GED VIZ: An HTML5 data visualization tool


by Mathias Schäfer on July 9th, 2013

GED VIZ

Good visualisations are more than just fancy graphics. They are a lot about storytelling, shedding light on important issues, and at the same time inspiring us to raise new questions.

Building such visualisations can be a very time-consuming effort, mostly requiring hand-crafted creative input. Consequently, we’re looking for ways to generate such visualisations without being experts in visual design, which in turn could make data even more accessible.

When the Bertelsmann Foundation, a well-known German non-profit organization and think tank, investigated the relation between the European states during the time of crisis, they found an inspirational visualisation in the New York Times, called “Europe’s web of dept”.

However, this was just a static graphic with no way to interact, add data or watch data change over time. The Bertelsmann Foundation saw a lot potential in building a tool to create interactive visualisation of economic and demographic relations between states and unions. The GED project “intends to contribute to a better understanding of the growing complexity of economic developments”.

After a long ideation and design process with Boris Müller and Raureif, they approached us to build this tool with whatever feasible with state of the art technology. Some time later, we’re very proud to introduce the GED VIZ tool which was finally released on July 2nd.

The GED VIZ editor

GED VIZ is a complex HTML5 application that runs right in the web browser. Using the editor interface, you can create slideshows of interactive charts that visualize economic indicators and relations of countries and their change over time. The slideshows can be embedded into other websites as well. For example, a news site or a blog can embed the visualization into their articles and comments. Users can also share and export the visualization or download the raw data.

On the GED website, there are several articles enriched with interactive visualizations. The following presentation illustrates the story “Shutting Out the BRICs? Why the EU Focuses on a Transatlantic Free Trade Area” by Justine Doody.

To get started with the tool, you can watch the tutorial video on YouTube:

Under the hood, GED VIZ is made with open web technologies. It is a large-scale client-side JavaScript application using our Chaplin.js architecture. On the server side, there is a Ruby on Rails application crunching the data which is stored in a MySQL database. We’ve written another detailed post on the technical implementation.

GED VIZ is a free online tool you can use without prior registration. It is also an open source project. The full code was released under the MIT license and is available on GitHub. We invite everyone to study the code and advance the tool, for example by adding new data sources and new abilities to tell stories.

GED VIZ is our latest take on data visualization using state-of-the-art web technologies. We hope that GED VIZ will be used to create impressive and insightful presentations. Many thanks to the GED team at Bertelsmann for letting us create such an application and release it as an open source project. Also thanks to the designers, testers and prototype developers involved!

Try out GED VIZ at viz.ged-project.com

2 comments
  1. Jacques Brisson July 9, 2013 at 8:53 pm

    Pretty cool tool!!! Now, to what extend can we add entities + relations ?

    An admin tool that would be orthogonal to vizualisation tool would be awesome!

  2. [...] Economic Dynamics, in collaboration with 9elements, provides an explorer that shows country relationships through migration and debt. Inspired by a [...]