quazardous/activity-heatmap

A d3 heatmap for representing time series data

1.1.3 2020-05-06 15:00 UTC

Requires

• robloach/component-installer: *

MIT

• David Berlioz

README

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;
}

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

2. 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).