I ‘see’. (Rather, what all I now ‘visualize’ with d3.js)

So, d3.js is officially awesome. If it isn’t so official yet, it might have been just very very kind to me so far.

Flashback: I started off my research on the data visualizations for our Language Matrix Dashboard with Limn, our visualization toolkit that is there. And for some reasons, I did not decide to stick only to it, especially not for LCMD. Well, I went on hacking into more libraries. Here I am, sharing my story with d3!

I was thinking of some random queries that could be useful for our dashboard to have a visualization graph for. On my last meeting with Runa, we decided that we can think of queries in two ways:

  • Language Basis
  • Tools Basis

Now different queries would demand different graphical representations to make, obviously. Let’s say A query like “How many languages does have jquery.ime support right now” would not be very well represented with Line Charts as it will be with Pie Charts. Whereas, “The increase in language support for a particular tool in years” would be quite nicely represented with Line Charts. We need to figure out the definite queries that we would like to have for the tool to be pretty enough. I chose to work on “How many language do have jquery.ime support right now” as the primary goal to visualize. The main aim being, naturally, to have a pie chart representation for all the language tools available.

Visualizing jquery.ime statistics, just: 

The best thing about D3, is probably all the neat documentations that are available and the tutorials as well and I have taken advantage of their neatness whenever possible.

There are a few D3 helper functions that have been used. Like:

Pie Layout:
Will take an incoming data array and give you back an object with the necessary angle and radius parameters to construct an arc.

           var donut = d3.layout.pie().value(function(d){
                   //code
           });

Ordinal Scale:
To return a colour value from an ordinal scale of 20  preset colours.

           var color = d3.scale.category20();

I have used the API that Harsh has wonderfully made to fetch data from.

  $.ajax({
url : ‘http://tools.wmflabs.org/lcm-dashboard/lcmd/api/php/dataapi.php?query=jquery_ime‘,
dataType : ‘JSONP’,
type : ‘GET’,

                success : function(data){
//console.log(data);
var x = data.length;
console.log(data.length);
a = (x / 133) * 100;
b = 100 – x;
console.log(a + b);
},
error : function(data){
console.log(data);
}
})

What actually happened in the previous bit of code is quite simple: I fetched the data that I would want to visualize from the API with the url mentioned, which basically being a cross domain data transfer I am keeping the dataType as JSONP – Padded JSON. I am storing the value that would need for the calculation for the visualization purpose in var x, which stores the data.length. var a (which has been initialized before as var a = 0) stores the calculated percentage of the languages which has jquery.ime enabled. var b (Which also initialized before at the same time as a) stores the percentage of the less fortunate languages. Simple! Now I printed those as :

streakerDataAdded = [{‘octetTotalCount’: a},{‘octetTotalCount’: b}];

Now that and a few hundred more lines of code should give you a nice pie chart, helping you to visualize the particular query.

Initially, there was an issue with retrieving data from the API, which I reported at Harsh’s repository. But nevermind he solved it in a jiffy and was very happy to realize that somebody was sweet enough to open an issue (the first ever, in his lcmd repo) in his repo – Yep, that’s me! 😉

Although I do have a working instance of the LCMD in my machine and can easily do the whole data-fetching-from-API locally, it’s good that we solved it.

Implementing the visualizations in LCMD interface:

Implementing this bit of visualization in LCMD interface would simply mean that checking in various language tools that are listed would show the respective visualization. As I had mentioned earlier, I have Harsh’s repository both forked and cloned, and there is one working instance of the LCM dashboard in my local machine, with sane database. I found that he has created a filter where you can play with the tools listed by checking them and shall see the output of languages that have those tools valid for. Neat. What I did for my demo is, I kept all of the html, css, most of the JS same except for a little change in language.html and a major change in his filter.js.
His filter.js now has:
 
function filterdata(value){
$.ajax({
url : ‘http://tools.wmflabs.org/lcm-dashboard/lcmd/api/php/dataapi.php’,
dataType : ‘JSONP’,
data : ‘query=’ + value,
type : ‘GET’,
async : ‘false’,
success : function(data){
langCount(data);
},
error : function(data){
$(‘#langcount’).html(‘<h3 class=”text-info”>’ + (data.length)+ ‘ Languages </h3>’);
//display_lang(data);
}
})
}

And: 

   function langCount(data) {  
      $(“#lcmd-chart”).remove();
$(‘#lcmd’).append(‘<div id=”lcmd-chart”></div>’);
var a = 0;
var b = 0;
data.length == null ? a = 0 : a = data.length;
a = (a/133)*100;
b = 100 – a;  

//Rest of the code for the visualization
}

Which pretty much gives I aimed for: Checking on the tools list will give the visualization pie charts for the same on the same place as where the languages’ names were being listed earlier. Of course, I replaced that.

So.. YAY, I guess? 🙂

2 thoughts on “I ‘see’. (Rather, what all I now ‘visualize’ with d3.js)

  1. The curious bit in your post is that you are talking about time-series data ie. attributes of object over time and, currently representing it via a linear method ie. line/bar chart. For some reason I was anticipating that you'll be pulling a moving-average like method out.

Leave a Reply

Your email address will not be published. Required fields are marked *