Skip to content

peterrcook/d3-circularheat

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published