Skip to content
A D3 circular heat chart. Good for displaying cyclic data.
JavaScript
Branch: master
Clone or download
Peter Cook
Latest commit dbb0eab Jun 19, 2013
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Add labels. Flesh out examples page Jan 28, 2013
js Add labels. Flesh out examples page Jan 28, 2013
.gitignore First commit Jan 25, 2013
LICENSE.txt First commit Jan 25, 2013
README.md typo Jun 19, 2013
index.html Add labels. Flesh out examples page Jan 28, 2013

README.md

#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

You can’t perform that action at this time.