Datameer Blog post

What’s behind our Business Infographics Designer? D3.js of course.

by on Jun 26, 2012

In Datameer 2.0, we rewrote the whole visualization experience. There is plenty of excellent visualization libraries out there. So why did we choose D3.js? Because, like us, it’s clearly a different beast.

In a typical charting package, like Highcharts js, Google Chart Tools or Dojo.GFX.charts, you would write something like:

var pieChart = new pieChart(options);

So, basically, you ask for a pie chart and you configure it as you like. But what if you want to modify it beyond what’s provided by your charting library? If you want a sophisticated visualization like a network or a sunburst? If you want to be able to tweak all little aspects of your charts?

Some visualization libraries, the Infovis Toolkit for example, can expand your possiblities by providing more deep access to the guts of your visualization. For even more control, using a plain graphical package, like Raphael or Processing.js, gives you full control. But instead of asking for a pie chart, you build it yourself. For example, here is an exemple of Raphael code just to draw one slice of a pie chart:

function sector(cx, cy, r, startAngle, endAngle, params) {
var x1 = cx + r * Math.cos(-startAngle * rad),
x2 = cx + r * Math.cos(-endAngle * rad),
y1 = cy + r * Math.sin(-startAngle * rad),
y2 = cy + r * Math.sin(-endAngle * rad);
return paper.path([“M”, cx, cy, “L”, x1, y1, “A”, r, r, 0, +(endAngle – startAngle > 180), 0, x2, y2, “z”]).attr(params);
}

You can easily see that there is a trade-off between ease of use and freedom. In the first case, you are stuck with a black box, in the second, with very complicated code. One way or another, it can’t scale. And Datameer is all about scalability, growing with your data, growing with your business, growing with your success. So now we also scale with the web, improving the user experience as the technologies improve, by leveraging modern web technologies.

The charting and visualization libraries we just mentioned are still very impressive. But D3.js is not a charting library, not a visualization library and not a graphic library. It is a very thin layer on top of modern web technologies to help visualization engineers bind data to graphics, hence its full name: Data-Driven Documents.

Designing visualizations is about finding a meaningful visual representation for your data. Visualization engineers see it as finding a set of rules to map data to graphics. That’s what D3.js is good for. Here is an example of D3.js helpers to build a pie chart:

var arc = d3.svg.arc()
.outerRadius(r);
var pie = d3.layout.pie()
.value(function(d) { return d.value; });

D3.js has multiple helpers function to build some useful building blocks and to help you assemble them. Sounds complicated to you? In a way it is. Once you pass the learning curve, you are sure to be impressed by the elegance and the endless possibilities of the tool. But the most important thing with an opensource tool is all support you can get from and give to the community. So if you are a visualization user, let us handle the hard part and come play with our new Business Infographics Designer. But if you are a visualization designer, join us, learn and contribute to the D3.js community.

Here are some additional resources:
D3.js website
Gallery
Google Groups

Posted in Archive

At Datameer, we’re obsessed with making data the most valuable asset in any organization. We believe that when people have unconstrained access to explore massive amounts of data at the speed of thought, they can make data-driven decisions that can wholly impact the future of any business.

Back to Overview