The technologies used in Datawrapper

The new Datawrapper was build on top of a serious number of open source components. In this post we want to thank them all, and explain what we’re using and why.

The charts

For the new version of Datawrapper we decided to drop Highcharts, the charting library that was used in the beta version. Instead we developed our very own charting library based on two giants among the visualization libraries. We use d3js to compute all the positions, sizes and colors (using the excellent d3.scales), and then we draw and animate the charts using RaphaelJS, in order to integrate support for legacy browsers.

To read the data we learned a lot from the Miso project, and finally we borrowed from their excellent Dataset class. To format the localized numbers in the charts we use Globalize.js. The chart thumbnails that we’re displaying in the chart gallery are generated on the client side using innerSVG.js and canvg.

The frontend

On the frontend side we of course used all-time heroes like jQuery and Underscore.js. The frontend layout is based on the ultra-amazing Bootstrap framework. We used it to develop our early functional prototype and it was flexible enough to support everything we wanted in the final application.

Additionally, we used crypto.js to make sure that sensitive information is send encrypted. Originally we planned to use Backbone.js, but in the end we wrote our own backbone-like class to keep the charts on the server in sync with the user interface.

The backend

One of the requirements of Datawrapper was that it should be as easy to install as WordPress. That’s why we picked PHP in favour to Python. So unfortunately we could not build upon cool frameworks like Django. But it turned out that there’s a lot of cool stuff in the PHP world as well.

The main backend is actually a mix of three awesome frameworks. We used SlimFramework to develop the front controller for both the website and our JSON API. For database abstraction and object modelling we found that PropelORM is doing a great job. To separate the controller logic from the views we picked the Twig Template Engine, which has a nice template markup and can be extended easily.

To make it easy to edit and translate the integrated documentation, we’re using this WordPress as CMS and pulling the content from it using the excellent JSON API.

As you see, we used a whole lot of open source projects. Without them, Datawrapper wouldn’t be possible.

Thanks!