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

Experience with Repository pattern implementation in Laravel

Hi folks, Today I am gonna be sharing my experience of implementing and working with Repository Design Pattern in Laravel. As you must be aware that Repository Pattern is one of the widely used design patterns  " which separates the logic that retrieves the data and maps it to the entity model from the business logic that acts on the model. In other words, business logic can access the data object without having knowledge of the underlying data access architecture " My first hand experience Around a year ago I started working on a Service Provider App with Laravel as the back-end exposing APIs for the front-ends like the Mobile and Desktop Apps. And like any other architect, while designing this huge looking application I had to take some important decisions on the architectural level. One of them being the buzzing, totally in, Repository Design Pattern bandwagon which everybody in the tech world was taking and if not that, at-least talking about. I went throug