Borrowing a barchart

I really enjoyed reading the last article from Datawrapper. I strongly suggest you to follow their blog.

The only missed thing, after finished reading it and checked back the chart, was that I really wanted to play with it to answer some curiosities that came into my mind. That's the benefit of interactive charts, isn't it?

I took this as an opportunity to play more with my D3.js in-progress-chart-lib journey, thus, I borrowed their chart.

This is an interesting way to improve a project that is supposed to be abstract as much as possible. Trying to replicate, and hopefully improve, a given chart means basically deal with the needs of a potential user, a great way to let arise the limitations of some design choices.

Show the data

I've started to visualize the dataset kindly provided by the article:

See the Pen GyBjXr by Fabio Franchino (@abusedmedia) on CodePen.

This shows immediately a requirement the library cannot handle so far: the label format of a given axis. Instead of adding a configuration for the label format I've implemented the possibility to set a d3-axis object. This way, the limitation described above can be overcome with this setting:

var myCustomAxis = d3.axisBottom().tickFormat(d3.format('.0s'))

var chartGen = rivela.barchart()
    .axisx(myCustomAxis)

Sorting the dataset

The next step was to let the user sort the charts using different keys:

See the Pen aEjQXG by Fabio Franchino (@abusedmedia) on CodePen.

To better try to spot interesting fact out of this chart we need a tool to play with the data points. The next iteration implements a rollover effect to select the same Country on both charts:

See the Pen NXBEmN by Fabio Franchino (@abusedmedia) on CodePen.

The initial goal

The first purpose of this exploration has always been to create an interactive version of the Datawrapper chart primarly to test my library, so here it is:

See the Pen WdKYBx by Fabio Franchino (@abusedmedia) on CodePen.

The trick here has been to use two barcharts stacked on each other using the same svg, setting a special CSS class to make invisible some duplicated elements such as axis, title and background. This is not the most efficient and elegant solution from the implementation point of view, but I like to achieve the desired result without polluting the library with further unnecesary options.

This exercise allowed me also to fix a couple of other constraints to let more freedom for the experienced user.