Goldilocks and the D3 Bears

d3-bears-dimple-blog-price-range-chart

As open-source software goes from strength-to-strength, one area particularly close to my heart is that of charting libraries and APIs.  Like many areas of software, the open-source community has revolutionised the way that data is presented on the web.

Arguably the most significant open-source visualisation project is called D3 (data-driven documents), however many an inexperienced JavaScript developer’s hopes have been dashed against the rocks of D3. It is NOT a charting API.  It’s a library which helps a developer map data to elements on a web page (think JQuery for data if you are technically minded).  That means you CAN create charts, in fact I’d say you can create any chart you could ever imagine and you can do it much more easily than with raw JavaScript, however the spectrum of JavaScript programmers is broad and I would argue that D3 still requires a fairly high level of skill if you want to do something from scratch.  In the hands of an expert, the results are magnificent but sadly the majority of D3 implementations I have seen appear to have been built by taking an example and hacking at it until it fits the required data.

To address this, a number of open-source projects have emerged with the specific goal of drawing charts in D3.  Their restricted reach leads to a greater simplicity and opens the door to many more users.  However when I came to look for an API which meets the needs of our analysts – many of whom come from an Excel rather than JavaScript background – we couldn’t find that crucial Goldilocks zone between complexity and limitation.  This was what spurred us to create our own. The result is dimple, a JavaScript library which allows you to build charts using a handful of commands.  The commands can be combined in myriad ways to create all sorts of charts and the results can be manipulated with D3 if you need to do something really unusual.  The main limitation is that it only supports charts with axes for now (pie charts are in the works), but it works in a way which ought to be easily understood by anybody with some basic programming knowledge.

Dimple Price Range Chart

The example above is from the advanced section of the site, but still has less than 20 lines of JavaScript.  To get started with a simpler example, why not copy and paste the code below into notepad, save it as MyChart.html, open it in your favourite browser and then sit back admiring your first bar chart.

   var svg = dimple.newSvg("body", 800, 600);
   var data = [
     { "Word":"Hello", "Awesomeness":2000 },
     { "Word":"World", "Awesomeness":3000 }
   ];
   var chart = new dimple.chart(svg, data);
   chart.addCategoryAxis("x", "Word");
   chart.addMeasureAxis("y", "Awesomeness");
   chart.addSeries(null, dimple.plot.bar);
   chart.draw();

The brevity is good but it’s the flexibility and readability which we were really shooting for.  So try switching the letters “x” and “y” on the add axis lines and you get a horizontal bar chart, change “bar” in the “addSeries” line to “bubble”, “line” or “area” and you’ll get those respective chart types.  Or better still copy the “addSeries” line and change the plot to get a multiple series chart.  You can go on to add multiple axes, different axis types, storyboards (for animation), legends and more.  For ideas see the examples, or if you are feeling brave the advanced examples which I try to update regularly.

Author: John Kiernander

Want Insights Fit For Action?

Get in Touch

Give us a call on:

+44 (0)20 8347 3500 (UK)
+1 484 367 0888 (US)