Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/p-chan/zakkin.js
zakkin.js is a heatmap display library
https://github.com/p-chan/zakkin.js
canvas heatmap
Last synced: 25 days ago
JSON representation
zakkin.js is a heatmap display library
- Host: GitHub
- URL: https://github.com/p-chan/zakkin.js
- Owner: p-chan
- License: mit
- Created: 2018-08-29T14:45:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-04-18T21:46:47.000Z (over 3 years ago)
- Last Synced: 2024-12-12T19:53:37.726Z (28 days ago)
- Topics: canvas, heatmap
- Language: JavaScript
- Homepage: https://p-chan.github.io/zakkin.js/demo/
- Size: 887 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# zakkin.js
> zakkin.js is a heatmap display library
![example](./assets/example.jpg)
Please check [zakkin.js's demo](https://p-chan.github.io/zakkin.js/demo/)
## Usage
```javascript
cosnt points = [{
x: 15,
y: 15,
radius: 30
}, {
x: 10,
y: 10,
radius: 30
}, ...];const zakkin = new Zakkin();
zakkin.init(320, 740, points);
zakkin.execute();
zakkin.render('stage');
```## Install
```
$ npm install zakkin
```or
```html
```
## API
### Zakkin.prototype.init(width, height, points)
Generate and initialize a new canvas.#### width[Number]
Set to canvas.width.#### height[Number]
Set to canvas.height.#### points[Array]
Initial drawing data.##### Point.x[Number]
The x-axis px of the point.##### Point.y[Number]
The y-axis px of the point.##### Point.radius[Number]
Radius of drawing circle.### Zakkin.prototype.execute()
Perform initial drawing.### Zakkin.prototype.clear()
Clear canvas.### Zakkin.prototype.draw(Point)
Draw a single point.##### Point.x[Number]
The x-axis px of the point.##### Point.y[Number]
The y-axis px of the point.##### Point.radius[Number]
Radius of drawing circle.### Zakkin.prototype.process()
Update screen canvas to the current drawing state.### Zakkin.prototype.render(id)
Insert screen canvas into the dom of the specified id.#### id[String]
element-id.### Zakkin.prototype.picker(x, y)
Returns the density of the specified coordinates.#### x[Number]
The x-axis px.#### y[Number]
The y-axis px.