D3 for custom data representation

14 July 2013

Sometimes we have some data and all we need to do to make other people understand the significance is to make a simple bar chart once and save it as an image to be done with it.

Sometimes it's not. Sometimes the data changes by the minute. Sometimes the well-known chart types don't quite cut it. Sometimes the data is best animated instead of displayed as a static image to allow for exploration.

In all these cases, you should give D3.js a spin. D3 is a javascript library that gives many utilities to handle updating data, representing data in non-standard ways, ....

Here for example we can plot a year worth of data points if some event has happened (reliability of connection to the internet maybe?). The innermost circle is january, the days of the month are clockwise. As we can see the event occured less in the beginning of the year and most often in 2 day blocks 7 days appart.

Here the coffeescript source:

$(document).ready ->
  $.getJSON('/static/data.json').done (info) ->
    scale_day = d3.scale.linear()
                    .domain([0, 31])
                    .range([0, 2*Math.PI])
    scale_minute = d3.scale.linear()
                    .domain([0, 24*60])
                    .range([0, scale_day(1)-scale_day(0)-Math.PI/180])
    scale_month = d3.scale.linear()
                    .domain([0, 12])
                    .range([50, 200])
    chart = d3.select("body")
       .append("svg")
       .attr("width", 500)
       .attr("height", 500)
    arc = d3.svg.arc()
              .innerRadius((d) -> scale_month(d[0]-1) + 5)
              .outerRadius((d) -> scale_month(d[0]))
              .startAngle((d) -> scale_day(d[1]) + scale_minute(d[2]*60+d[3]-30))
              .endAngle((d) -> scale_day(d[1]) + scale_minute(d[2]*60+d[3]))

    chart.selectAll("path").data(info).enter()
         .append("path")
         .attr("d", arc)
         .attr("transform", "translate(250, 250)")
         .attr("fill", (d) -> 
           if (d[4] == 1)
             return "blue"
           else
             return "red")

I got started by reading the highly recommendable Interactive Data Visualization for the Web