Calendar_heatmap NPM

calendar_heatmap

flexible D3 calendar heatmaps a la GitHub contribution calendars

npm.io

including in your project

Using node:

npm install calendar_heatmap
var calendar_heatmap = require(calendar_heatmap);

Otherwise you can just download the pre-bundled JS and include it in your HTML:

<script src="calendar_heatmap.bundle.js"></script> and carry on.

usage

To create the default, barebones calendar heatmap from your data, you might do something like:

calendar_heatmap.create({
    data: my_data,
    date_var: "day",
    fill_var: "count"
});

Your data is expected to be an array of objects representing days and corresponding measurements. It should probably look something like this:

[
    { day: "2015-01-01", count: 100 },
    { day: "2015-01-02", count: 101 },
    { day: "2015-01-03", count: 102 }
]

Note: You probably want the timeframe of your data to span somewhere between a couple months and a couple years to make this type of visualization. A year's worth of data might make the most sense...

For convenience, calendar_heatmap exposes a color_ramps object that includes color_ramps.

Another example:

d3.json("my_data.json", function(err, dat) {
    calendar_heatmap.create({
        target: "#container",
        data: dat,
        date_var: "day",
        fill_var: "count",
        color_scheme: calendar_heatmap.color_ramps.YlGnBu,
        stroke_color: "whitesmoke",
        date_format: "%m-%d-%Y",
        missing_as_zero: true,
        title: "Daily Measurements of Something Interesting"
    });
});

Take a look at the wiki for the full breakdown of available options.