Skip to content

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

License

Notifications You must be signed in to change notification settings

quazardous/activity-heatmap

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

Reusable D3.js Calendar Heatmap chart

Monthly profile.

Reusable D3.js Calendar Heatmap chart

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

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published