Datawrapper 1.5

After two months and +600 commits, we are very proud to finally release the next major milestone of Datawrapper. Here’s a brief overview what has been changed:

• Chart editor redesign
• Data editing and per-column formatting
• Chart display optimization
• Started using CloudFront as CDN, changed chart URL structure.

Chart editor redesign

Every change made in the editor are now immediately displayed in the preview, as opposed to the two-seconds delay we had in previous versions. Also the chart editor is now separated in three sub-steps that can be navigated via tabs:

The custom color picker which was formerly shown in a popup window is now integrated into the sidebar. This makes it easier to see the effect of new colors immediately. Also the new color picker allows changing colors of multiple elements at the same time.

Last but not least we enabled our intelligent charting engine™ to speak back to the user in case something can be improved in a chart. Many of these heuristics are already built into Datawrapper since version 1.0, but now we thought it’s a nice idea to also explain what we are doing and why.

Message shown in a pie chart with way too many values

Data editing

The second step of the chart editor now supports quick-editing of the dataset, making it a lot easier change a label. The changes are stored with the chart to ensure that the original dataset is preserved. Using the revert button you can always return to the uploaded data. The editing feature was developed by Marcin Warpechowski, who also developed the popular JavaScript spreadsheet Handsontable that we’re using since version 1.3.

The number format can now be specified for individual columns instead of the entire dataset, which gives you a finer control about how numbers should be rendered. In order to change the column format you now have to select one or more columns, just as you would do in a spreadsheet software.

Optimized chart display

With 1.5 we introduce display improvements for all chart types.

In line charts we now use a one-dimensional force-directed layout to ensure that labels won’t overlap in vertical direction. Here you can see a comparison of the old and new rendering.

Also the line chart now supports filling below the line if there is only one line in the chart. To avoid a common charting mistake we will automatically extend the y axis to zero if line filling is activated.

The third improvement is stepped line interpolation. The idea behind this is simple: the default straight connection lines between points in a line chart express the assumption that there is a continuous change in the presented variable. However, in some cases you know that this is not the case. For instance, you know that an account balance stays on a constant value until the next financial transaction takes place.

The previous image also showcases another improvement of the line chart: if your dataset covers only a few dates, we label these exact dates instead of the usual evenly distributed grid lines (thanks to Lorenz Matzat for this very tufteeske idea).

Speaking of Tufte: we finally made our column charts smart enough to decide whether or not it needs to** display grid lines**. The assumption is that if you have a considerable small number of bars and enough space for labeling the values directly, there is no need for grid lines and grid labels anymore. Instead the full width of the chart can be used for the columns, making them a lot more space-efficient.

In pie charts we now move labels of small slices outside of the pie to ensure that they are still readable. We adjust the rotation of the pie so that the outside labels move to a nice location on the top right of the chart. The result of this improvement is probably the most advanced pie chart in any visualization tool:

Finally fixed: the labeling of small slices in pie charts

CloudFront CDN and versionized chart urls

We’re now using Amazon CloudFront as content delivery network (CDN), which has some decent benefits in terms of chart load time and support for SSL delivery. The downside is that it required us to change the way chart URLs are constructed. Until now, every chart had only one URL that would always point to the latest version of the chart. That was very flexible, but it’s hard to cache charts effectively.

Starting with 1.5, every chart URL contains the version of the chart, which increases every time you re-publish a chart. To immediately see the most recent version of your chart, you will need to update the URL in your embed code. If for some reasons you cannot do this, you will have to wait up to 24 hours until Amazon has updated the cache of the old chart versions.

Further improvements

Furthermore the release includes a couple of minor improvements and bugfixes. Some of them where already released in Datawrapper 1.4, but are included here for completeness of the release notes.

• Showing a static image of the charts even if JavaScript has been disabled.
• New plugin system: Towards our way of turning Datawrapper into a platform for open source data visualization we in introduced a new flexible plugin system. The goal was to refactor as much as functionality into plugins in order to keep the Datawrapper core lightweight. Plugins include functionality such as the visualizations, custom themes, and integration.
• Moved translation to Crowdin.net: To simplify translation of Datawrapper we decided to move to Crowdin.net, who kindly offers free plans for open source software projects. If you want to help translating, please use this invitation link.
• JavaScript refactoring: A great part of the development had gone into completely refactoring the JavaScript core of Datawrapper, including all the visualization plugins.

So what’s next?

Datawrapper 1.5 is the last release of the 1.x series. As mentioned above, we have worked hard on preparing the software for the next big step towards Datawrapper 2.0, which is coming in fall 2013. With the new plugin architecture we already prepared the ground for the transition towards an open source data visualization platform.

If you’re interested in being part of the development, do not hesitate to contact us.