<commit_before># D3 Calendar Heatmap
A [d3.js](d3js.org) heatmap representing time series data. Inspired by Github's contribution chart

![Reusable D3.js Calendar Heatmao chart](https://raw.githubusercontent.com/DKirwan/calendar-heatmap/develop/example/thumbnail.png)

## TODO's

* Allow developers to enable/disable tooltip
* Allow editing of tooltip text
* Allow editing of the cell gradient colours
* Allow editing of the start/end dates

## 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 |

## 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
```javascript
// chart data example
var chartData = [{
  date: valid Javascript date object,
  count: Number
}];
var chart1 = calendarHeatmap()<commit_msg>Updated README TODO list<commit_after># D3 Calendar Heatmap
A [d3.js](d3js.org) heatmap representing time series data. Inspired by Github's contribution chart

![Reusable D3.js Calendar Heatmao chart](https://raw.githubusercontent.com/DKirwan/calendar-heatmap/develop/example/thumbnail.png)

## TODO's

* 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

## 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 |

## 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
```javascript
// chart data example
var chartData = [{
  date: valid Javascript date object,
  count: Number
}];
var chart1 = calendarHeatmap()
{'fraction_non_alphanumeric': 0.1262605889471561, 'fraction_numerical': 0.007260992335619202, 'mean_word_length': 3.500907441016334, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6754994', 'n_tokens_mistral': 739, 'n_tokens_neox': 700, 'n_words': 294}