Skip to main content

D3.js, the most powerful visualization library I came across

Hello Friends!!

This post is dedicated to D3.js, which I came across a few months back.

Prior to that, I always preferred Google Charts which catered to most of my charting needs. However, since I switched to D3.js I could not find a good reason to move back to Google Chart.

If we take a very crude analogy, D3.js would be analogous to an Ubuntu of the OS world, while Google Charts could easily be a Windows 7(just that both of them are free in this case); in the sense that the control and the power the user(in our case the developer) gets from D3.js while working with it, is unmatchable.

While Google Charts is simply too cool and simple for a free charting tool, but D3.js is a library which lets you create any chart that you could think and conceptualize, with so much of ease, and it lets you link any kind of interaction/control that you would want to put on events, on any of the elements of the chart.

D3.js, like RaphaelJS and PaperJS is a library which is developed to manipulate the DOM based on the structured data you have. Only it covers a little wider set of elements and features than the latter two (although the latter two provide out-of-the-box animation, which in some cases could be the deciding factor though).

Just check this simple example, and see how easily a bar chart can be created with D3.js.
(Assuming that the page has a div with id chartDiv and that the d3.js is included on the page).

var data = [1,2,3,4,5,6,7,8,9,10]; //lets create some random data

//simply create the chart with these few lines
var divs = d3.select("#chartDiv")
             .selectAll("div")//select all the divs(which are not yet created)
             .data(data)//read the data
         .enter()//run through each data object

             .append("div")//and finally append the divs we selected previously
             .style("width", function(d) { return (d*20)+"px"; })

             .style({'cursor': 'pointer', 'background-color' :'lightblue','margin':'2px'})//some styling
             .text(function(d) { return d; });//the text inside the div


That's all you need to code to generate the below chart -
Isn't it so simple, yet powerful.

One could easily link events to it by doing something like this -

divs.on('click', function (data, index) {alert(data +', '+ index)});

See, how easily we could link a event to each bar div. Isn't it awesome!!

Now the next step for you is to visit D3.js and check the rich documentation, browse through the code of the tons of example provided, and dive into the awesome world of D3.js.
Although it will take a little practice and some learning to get a knack of it, but eventually you will fall in love with it.

Happy charting :)
Sandeep

P.S. - Don't forget to check my Visualization app powered by D3.js

Comments

Popular posts from this blog

Multi Tenancy with Codeigniter

In this post I will show you how I converted my normal Codeigniter application into a multi-tenant system.(first step to a SaaS implementation) Note - This implementation is a separate DB multi-tenancy implementation. Lets say we have an up and running CI application name ci_app , with the directory structure like this ./application ./application/config ./application/...so many other important directories ./asset ./asset/js ./asset/images ./asset/css ./system ./index.php which is accessed through browser like http://localhost/ci_app So to implement the multi-tenant arch we are most concerned about the following files, and we will be editing them ./index.php ./application/config/config.php ./application/config/database.php And also we need to create a few new ones Create a tenant folder in your www root directory, lets say tenant_1 Cut the ./index.php from ci_app and paste it in tenant_1 directory  Create a blank file config.php in tenant_1 directory Crea

Profiling and checking PHP error_reporting in a Codeigniter App, without editing the config!!

Hi all, You must have definitely used the Profiling in Codeigniter and error_reporting many a times in Development and Testing environment, but I am sure you must have missed it on a real Production environment. As there are scenarios, where you want to quickly debug the Production application and find out what PHP errors is the application throwing, check the page profile, that too without putting the time and effort in replicating the whole production environment on your local machine, or perhaps a testing server. This small piece of code(we could perhaps call it a hack), which I have used in almost all of my CI applications, will make your life very easy, without losing anything on the security of the system. Following points, essentially sum up what exactly it does - Check for the dev(or root or admin, whichever name you use for the su access), if it is logged in, as we don't want others to see all the Profile data and other errors. Check for a specific query str

How I solved design problems by using various design patterns in my Laravel Project

Hey guys, Lately I have been working on a Virtual marketplace application using Laravel and PostgreSQL. So, when I was asked to build this huge application, the biggest challenge I faced was the design. Having a fair bit of prior experience in Laravel and upon following the current community trend, I decided to go with Laravel. And I hoped and expected that this, somewhat opinionated framework, would take care of my design to a large extent. When I actually started designing it, I realized that for a small/medium application Laravel already has things in place, you, as a developer just need to follow the guidelines set in place by the framework and use the features its providing out-of-box. However, for a larger application, with lot of interdependent modules and complex business flows, you need to make your own design decisions as well along with the existing features. This gave me an opportunity to take a look into the various existing design patterns to solve my design probl