rlugojr / d3-circularheat

A D3 circular heat chart. Good for displaying cyclic data.

#Circular Heat Chart

A D3 chart for displaying quantative data using segmented concentric rings.

Ideal for displaying cyclic data e.g.

• a week's worth of hourly data. Each ring represents a day and each segment an hour
• a year's worth of daily data. Each ring represents a week and each segment a day

###Simple example

var data = [1, 2, 3, 4, 2, 3, 4, 5, 3, 4, 5, 6, 4, 5, 6, 7];
var chart = circularHeatChart().innerRadius(100).numSegments(4).range(["white", "red"]);
d3.select('#chart')
	.selectAll('svg')
	.data([data])
	.enter()
	.append('svg')
	.call(chart);

More examples.

###Implementation

The implementation follows the reusable charts convention proposed by Mike Bostock.

##Configuration

The chart can be configured in a number of ways (all optional)

• margin: An object specifying the margins e.g. {top: 20, right: 20, bottom: 20, left: 20}
• innerRadius: The radius of the innermost circle
• numSegments: The number of segments in each ring
• segmentHeight: The height of each ring
• domain: The domain of the data e.g. [0, 1]
• range: The output colour range of the data e.g. ["white", "red"]
• accessor: An accessor function for e.g. arrays of objects

###About This chart was created by Peter Cook Twitter: @prcweb