About Us Icon About Us Icon Business Analyst Icon Business Analyst Icon CEO Icon CEO Icon Datameer Icon Datameer Icon Envelope Icon Envelope Icon Facebook Icon Facebook Icon Google Plus Icon Google Plus Icon Instagram Icon Instagram Icon IT Professional Icon IT Professional Icon Learn Icon Learn Icon Linkedin Icon Linkedin Icon Product Icon Product Icon Partners Icon Partners Icon Search Icon Search Icon Social Networks Icon Social Networks Icon Share Icon Share Icon Support Icon Support Icon Testimonial Icon Testimonial Icon Twitter Icon Twitter Icon

Datameer Blog

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

By on June 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


Connect with Datameer

Follow us on Twitter
Connect with us on LinkedIn, Google+ and Facebook


Christophe Viau

Subscribe