Data Visualizations using D3

Last two weeks were very happening for WaterWorth. I learned a great new technology D3, and we successfully built our first chart from ground-up, without relying on any third party library.

The first version of WaterWorth used HighCharts to create the complex data visualizations. Although the charts looked pretty, we didn’t have much control over them. Basically, we had to rely on whatever Highcharts API provided. Scott and I both agreed on data visualizations being a core part of WaterWorth; So we decided to build our own in-house visualization solution, instead of relying on a third party library. We chose D3 to implement it. D3 is a powerful data visualization tool, which gives you lot of flexibility in terms of how you render your chart. Examples provided on the site are pretty compelling and interactive.

It was a bold decision, as though D3 gives you lot of power, it has a steep learning curve and the code can look pretty daunting if you are new. For example, this is how you draw a line chart in HighCharts:

live demo here

and here is how you draw a similar line chart in D3:

live demo here

Although it looks scary, once you learn the fundamentals of SVG(which D3 uses under the hood) and understand the api of D3, it can be a fun experience creating new visualizations.

It is turning out to be a great decision to switch over to D3. Learning a new technology can be very fun, especially if it involves cool graphics. We ended up with a great bounded zoom feature inspired from here which is not provided by most of the popular charting libraries.

We started with drawing a single dash on the screen using D3 and currently we have a custom chart which looks pretty amazing with some neat zooming features. I am looking forward to creating interactive visualizations with D3.