Beginning D3.js

A friend was working on a project for data visualization using D3.js and I decided to help. I didn’t know much about javascript and d3. I still don’t, but I learned few things on my way. I wouldn’t bore you with details explaining how d3.js works as there are a lot of better sites for that. I made few different types of charts using d3.js and kind of made my own library. It has chain syntax facility and also it’s pretty easy to use. One can update the parameters easily. I’d put it on GitHub once I finish scrubbing it up.

This is just a simple example of a bar chart </br> </br>

    var chart = barChart().width(400)
                          .height(300)
                          .barWidth(20)
                          .separation(3)
                          .showAxis(true)
                          .load(data)
                          .idVal("#bar-chart-d3")
                          .showXText(true)
                          .showLegend(true)
                          .plot();

Here data is raw data. A 2 dimensional array. I'm generating random data and plotting it. idVal parameter is the id of the tag where you want the svg element to be put. In this case, in this div.

Till now, I have created these charts.

• Bar Chart
• Multibar Chart (Stacked and Grouped)
• Pie Chart (Radial and Angular)
• Scatter Chart
• Line Chart

I have also added support for Axis and Legend. I’ll add one by one blog posts explaining each of them in brief.

P.S. This was a fun project.

Playing around with Android UI

Articles focusing on Android UI - playing around with ViewPagers, CoordinatorLayout, meaningful motions and animations, implementing difficult customized views, etc.

Read next