Circular heat chart

A circular heat chart displays quantitative data as an array of circular segments, coloured according to value.

This is a good chart for displaying cyclic data such as hourly energy usage over the course of a week e.g.

The code to create the above energy chart is:

var chart = circularHeatChart()
    .innerRadius(20)
    .radialLabels(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"])
    .segmentLabels(["Midnight", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am", 
    "11am", "Midday", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"]);

var energyData = [ 0.176042, 0.096146, 0.076414, ..more data.. , 0.192478, 0.134997, 0.152271 ];

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

Examples

Simple chart

var chart = circularHeatChart()
	.segmentHeight(10)
	.innerRadius(20);
var data = [];
for(var i=0; i<240; i++) data[i] = i;

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

Array of charts

/* Create random data */
var data = [];
for(var i=0; i<3; i++) {
	data[i] = [];
	for(var j=0; j<120; j++) {
	    data[i][j] = Math.random();
	}
}

var chart = circularHeatChart()
	.range(["white", "black"]);

d3.select('#chart2')
    .selectAll('svg')
    .data(data)
    .enter()
    .append('svg')
    .call(chart);

Labels

/* Random data */
var data = [];
for(var i=0; i<168; i++) data[i] = Math.random();

var chart = circularHeatChart()
    .innerRadius(20)
    .range(["white", "steelblue"])
    .radialLabels(["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"])
    .segmentLabels(["Midnight", "1am", "2am", "3am", "4am", "5am", "6am", "7am", "8am", "9am", "10am",
    "11am", "Midday", "1pm", "2pm", "3pm", "4pm", "5pm", "6pm", "7pm", "8pm", "9pm", "10pm", "11pm"]);

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

Events (try hovering over chart)

/* Define an array of objects */
var data = [];
for(var i=0; i<240; i++) data[i] = {title: "Segment "+i, value: Math.round(Math.random()*100)};

/* Define an accessor function */
chart.accessor(function(d) {return d.value;})

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

/* Add a mouseover event */
d3.selectAll("#chart4 path").on('mouseover', function() {
    var d = d3.select(this).data()[0];
    console.log(d.title + ' has value ' + d.value);
});