Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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.