PHPackages                             quazardous/activity-heatmap - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. quazardous/activity-heatmap

ActiveComponent

quazardous/activity-heatmap
===========================

A d3 heatmap for representing time series data

1.1.3(6y ago)8703[3 PRs](https://github.com/quazardous/activity-heatmap/pulls)MITJavaScriptCI failing

Since May 3Pushed 1mo ago1 watchersCompare

[ Source](https://github.com/quazardous/activity-heatmap)[ Packagist](https://packagist.org/packages/quazardous/activity-heatmap)[ RSS](/packages/quazardous-activity-heatmap/feed)WikiDiscussions v2 Synced 4d ago

READMEChangelogDependencies (1)Versions (7)Used By (0)

Activity Heatmap
================

[](#activity-heatmap)

[![Demo](https://camo.githubusercontent.com/5274b4e2c45a4fe1b80fbce179f9d2a9c6f930ffd1abd2fa823b9530b42194fd/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f64656d6f2d6c6976652d627269676874677265656e)](https://quazardous.github.io/activity-heatmap/)

A [D3.js](https://d3js.org/) heatmap visualization for time series data, similar to GitHub's contribution graph.

Inspired by [DKirwan's Calendar Heatmap](https://github.com/DKirwan/calendar-heatmap).

Demo
----

[](#demo)

[Live Demo](https://quazardous.github.io/activity-heatmap/)

Screenshots
-----------

[](#screenshots)

**Yearly profile**

[![Yearly heatmap](yearly.png)](yearly.png)

**Monthly profile**

[![Monthly heatmap](monthly.png)](monthly.png)

Features
--------

[](#features)

- Heatmap with customizable color scales
- Histogram view
- Labels and scales
- Flexible time granularity (yearly, monthly, or custom)
- ES6 module support
- Fully localizable (uses day.js formatting)

Installation
------------

[](#installation)

### npm

[](#npm)

```
npm install activity-heatmap
```

### CDN (Standalone)

[](#cdn-standalone)

```

```

Usage
-----

[](#usage)

### ES6 Modules

[](#es6-modules)

```
import * as d3 from 'd3';
import { ActivityHeatmap } from 'activity-heatmap';

const data = await d3.json('data.json');
data.forEach(d => {
  d.date = new Date(d.timestamp);
  d.value = +d.value;
});

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

### Script Tag (Standalone)

[](#script-tag-standalone)

```

  d3.json('data.json').then(data => {
    data.forEach(d => {
      d.date = new Date(d.timestamp);
      d.value = +d.value;
    });

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

```

### Tooltip Styles

[](#tooltip-styles)

Add CSS for tooltips:

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

Options
-------

[](#options)

The constructor accepts three arguments:

1. `data` - Array of data points with `date` and `value` properties
2. `profile` - Profile name (`'yearly'` or `'monthly'`)
3. `options` - Options object or CSS selector string

```
const options = {
  selector: '#my-heatmap',
  debug: false,
  legend: true,
  histogram: true,
  frame: true,
  colors: {
    separator: '#AAAAAA',
    frame: '#AAAAAA',
    scale: ['#D8E6E7', '#218380']
  }
};

const map = new ActivityHeatmap(data, 'yearly', options);

// Override options after instantiation
map.options.period.from = new Date('2020-01-01');

map.render();
```

Inline Render
-------------

[](#inline-render)

The `render()` method can be used with your own SVG element:

```
const mySvg = d3.select('#container').append('svg');
const heatmap = map.render(mySvg, 100, 50); // with x, y offset
```

Returns an SVG group containing the heatmap.

Development
-----------

[](#development)

```
# Install dependencies
npm install

# Run dev server
npm run dev

# Build library
npm run build

# Build demo for GitHub Pages
npm run build:demo
```

Dependencies
------------

[](#dependencies)

- [D3.js](https://d3js.org/) v5+
- [Day.js](https://day.js.org/)

License
-------

[](#license)

MIT

###  Health Score

39

↑

LowBetter than 86% of packages

Maintenance61

Regular maintenance activity

Popularity16

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

6

Last Release

2200d ago

Major Versions

0.1.0 → 1.0.02020-05-03

### Community

Maintainers

![](https://www.gravatar.com/avatar/f9b424f56493e5f1fa6ae1edf6552cefbb24755fd9949618e57c9373edcd8ce6?d=identicon)[quazardous](/maintainers/quazardous)

---

Top Contributors

[![quazardous](https://avatars.githubusercontent.com/u/1506211?v=4)](https://github.com/quazardous "quazardous (13 commits)")

---

Tags

d3jsd3v5data-visualizationheatmapjavascriptjs

### Embed Badge

![Health badge](/badges/quazardous-activity-heatmap/health.svg)

```
[![Health](https://phpackages.com/badges/quazardous-activity-heatmap/health.svg)](https://phpackages.com/packages/quazardous-activity-heatmap)
```

###  Alternatives

[fullcalendar/fullcalendar

Full-sized drag & drop event calendar

20.4k373.3k4](/packages/fullcalendar-fullcalendar)[eternicode/bootstrap-datepicker

A datepicker for Bootstrap

12.7k543.8k6](/packages/eternicode-bootstrap-datepicker)[eonasdan/bootstrap-datetimepicker

Date/time picker widget based on twitter bootstrap

7.2k492.4k9](/packages/eonasdan-bootstrap-datetimepicker)[happyworm/jplayer

jPlayer allows you to create a media player with a consistent interface and experience across all browsers.

4.6k114.2k1](/packages/happyworm-jplayer)[imsky/holder

Client-side image placeholders.

5.8k20.5k2](/packages/imsky-holder)[trentrichardson/jquery-timepicker-addon

Adds a timepicker to jQueryUI Datepicker.

2.6k70.2k](/packages/trentrichardson-jquery-timepicker-addon)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)