D3 Calendar Heatmap
A d3.js heatmap representing time series data. Inspired by Github's contribution chart
TODO
Enable/disable tooltip- Editing of tooltip text
Editing of the cell gradient colours- Configuration of the start/end dates
- Add optional callback for click events on the day cells
- Add project to bower
- Remove example and vendor folders to separate
gh-pagesbranch
Configuration
| Property | Usage | Default | Required |
|---|---|---|---|
| data | Path to data to render on the chart | none | yes |
| selector | DOM selector to attach the chart to | body | no |
| colorRange | Array of colors to use as a gradient in the chart | ['#D8E6E7', '#218380'] | no |
| tooltipEnabled | Whether it shows a tooltip or not | true | no |
Dependencies
Usage
1: Include the calendar-heatmap.js code after d3.js and moment.js
<script src="path/to/calendar-heatmap.js"></script>
2: Format the data so each array item has a date and count property.
As long as new Date() can parse the date string it's ok. Note - there all data should be rolled up into daily bucket granularity.
3: Configure the chart and render it
// chart data example
var chartData = [{
date: valid Javascript date object,
count: Number
}];
var chart1 = calendarHeatmap()
.data(chartData)
.selector('#chart-one')
.colorRange(['#D8E6E7', '#218380'])
.tooltipEnabled(true);
chart1(); // render the chartPull Requests and issues
...are very welcome!