Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/quazardous/activity-heatmap
A(nother) d3 heatmap for representing time series data similar to github's contribution chart
https://github.com/quazardous/activity-heatmap
d3js d3v5 data-visualization heatmap javascript js
Last synced: 21 days ago
JSON representation
A(nother) d3 heatmap for representing time series data similar to github's contribution chart
- Host: GitHub
- URL: https://github.com/quazardous/activity-heatmap
- Owner: quazardous
- License: mit
- Created: 2020-05-03T05:11:38.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-05-06T15:00:42.000Z (over 4 years ago)
- Last Synced: 2024-04-09T16:22:42.142Z (9 months ago)
- Topics: d3js, d3v5, data-visualization, heatmap, javascript, js
- Language: JavaScript
- Size: 82 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Activity heatmap
A(nother) [d3.js](https://d3js.org/) heatmap representing time series data. Inspired by Github's contribution chart
Inspired by the excellent [DKirwan's Calendar Heatmap](https://github.com/DKirwan/calendar-heatmap).
Reworked for [d3.js](https://d3js.org/) 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](https://d3js.org/) v5
* [moment.js](http://momentjs.com/)
## Usage
1. Add `d3.js` and `moment.js`
2. Include `activity-heatmap.js`
`` or ``
3. Add style stuff for tooltips
```CSS
.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
`
`
5. Create the heatmap with some data
```js
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.
```js
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:
```js
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.
```js
...
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**).