zkan / activity-heatmap

A(nother) d3 heatmap for representing time series data similar to github's contribution chart

Activity heatmap

A(nother) d3.js heatmap representing time series data. Inspired by Github's contribution chart

Inspired by the excellent DKirwan's Calendar Heatmap.

Reworked for d3.js v5 + ES6 class style.

Screenshot

Yearly profile.

Monthly profile.

Features & specs

• Heatmap
• Histogram
• Labels and scales
• Free time granularity
• Clean coding... (well tell me)
• Easy to tweak with options and profiles
• Fully localizable (uses only moment.format())

Dependencies

• d3.js v5
• moment.js

Usage

1. Add d3.js and moment.js

2. Include activity-heatmap.js <script src="path/to/activity-heatmap.js"></script> or <script src="path/to/activity-heatmap.min.js"></script>

3. Add style stuff for tooltips

.heatmap-tooltip {
  position: absolute;
  z-index: 9999;
  padding: 5px 9px;
  color: #bbbbbb;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 3px;
  text-align: center;
}

4. Add some container <div id="my-heatmap"></div>

5. Create the heatmap with some data

  d3.json("url/to/my-data.json").then(function(data) {
    // do your AJAX stuff here
    data.forEach(function(d) {
      // final data items should have at least a JS Date date...
      d.date = new Date(d.timestamp);
      // ...and a Number value.
      d.value = +d.value;
    });

    const map = new ActivityHeatmap(data, 'yearly', '#my-heatmap');
    map.render();
  });

Options

The second arg is a profile hint that will tweak options. You can override the tweaked options after instantiation.

The third arg can be an extensive options object.

const options = {
  selector: '#my-heatmap'
};
const map = new ActivityHeatmap(data, 'yearly', options);
map.options.period.from = new Date('2020-01-01');

Final computations will be done at render time.

Here is some common options:

const options = {
  debug: false,
  selector: "#monthly",
  legend: true,
  histogram: true,
  frame: true,
  colors: {
    separator: "#AAAAAA",
    frame: "#AAAAAA",
    scale: ["#D8E6E7", "#218380"]
  }
};

Inline render()

render() can be use without arguments or you can pass your own SVG object.

...
const heatmap = map.render(mySvg, 100, 50);
...

It returns a SVG group with the whole heatmap.

Example

Open examples/ex1.html.

NB: if you open ex1.html as local file, you may need to bypass CORS (With FF: about:config > privacy.file_unique_origin => false).