I made a circular heat chart of my energy consumption last year and I've decided to extract the charting component so that it can be re-used for other visualisations.

It follows the conventions set out by Mike Bostock for resuable charts so that it can be used and configured by others.

The chart is ideally suited to cyclic data. Most time based data is cyclic, for example, monthly rainfall data:

The code to create this rainfall chart is remarkably succinct:

d3.json('rainfall.json', function(rainfallData) {
   
    /* Label data */
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
        'August', 'September', 'October', 'November', 'December'];
    var years = [];
    for(var i = 1980; i < 2011; i++)
        i % 10 === 0 ? years.push(i) : years.push('');

    /* Create the chart */
    var chart = circularHeatChart()
        .segmentHeight(5)
        .innerRadius(20)
        .numSegments(12)
        .domain([50, 200])
        .range(['white', 'blue'])
        .segmentLabels(months)
        .radialLabels(years);

    d3.select('#chart')
        .selectAll('svg')
        .data([rainfallData])
        .enter()
        .append('svg')
        .call(chart);

});

Notice how attributes such as segment size, number of segments, colouring, labels etc. can be configured using chained function calls.

For more information see the examples pages or the project on github.