Skip to content

Commit

Permalink
Merge pull request #23 from nswamy14/master
Browse files Browse the repository at this point in the history 
Update gh-pages with V2 changes
  • Loading branch information
@nswamy14
nswamy14 authored Feb 20, 2024
2 parents 02c2bd3 + c1db296 commit e463f90
Show file tree
Hide file tree
Showing 13 changed files with 995 additions and 563 deletions.
72 changes: 44 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,43 @@ Visual Heatmap, an open-source JavaScript module, emerges as a powerful tool des

### Examples:
<p align="center">
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a>
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a>
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a>
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html"> <label>Click me<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap4.png" width=1200> </a>
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap3.png" width=1200> </a>
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap1.png" width=1200></a>
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmap2.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap2.png" width=1200> </a>
<a href="https://nswamy14.github.io/visual-heatmap/demo/heatmapWithLabels.html"> <label>Click<label><img src="https://nswamy14.github.io/visual-heatmap/snaps/snap4.png" width=1200> </a>
</p>

## Installing
# Installing

If npm
npm
```
npm i visual-heatmap --save
```
Download source code from below links
Or Download source code from below links

* [visualHeatmap.min.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.min.js)
* [visualHeatmap.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.js)
* [visualHeatmap.esm.js](https://raw.githubusercontent.com/nswamy14/visual-heatmap/master/dist/visualHeatmap.esm.js)

Visual-Heatmap is written in ES6 Modules. To import use below syntax

Importing everything into namespace

# Usage

### Importing
Visual-Heatmap provides ES6 and UMD modules. Accordingly module can be embeded into applications.

```
import Heatmap from 'visual-heatmap'
```

## VisualHeatmapJs - API

### visualHeatmap()
visualHeatmap provides a API to create context **WebGL**. API accepts container/containerId and config as an input. A layer will be created under the provided Div #containerId.
### Instance Creation API
visualHeatmap provides a API to create heatmap instance. API accepts container/containerId and config as an input. A context element will be created under the provided Div #containerId.
```Javascript
let instance = Heatmap('#containerId', {
size: 30.0,
size: 30.0, //Radius of the data point, in pixels. Default: 20
max: 100, // if not set, will be derived from data
min: 0, // if not set, will be derived from data
intensity: 1.0,
intensity: 1.0,
background: {
url: "urlPath",
width: 100, // if not set, viewport width of the image will be considered
Expand All @@ -63,32 +65,46 @@ let instance = Heatmap('#containerId', {
}]
});
```
**Container/ContainerId** The container div element or a string CSS Query selector which identifies the container.
**Container/ContainerId** : The container div element or a string CSS Query selector which identifies the container.

**Config**
Object with config properties.
**Config Object** :
```
{
size : Radius of the data point, in pixels.
max : Max data Value for relative gradient computation.
min : Min data Value for relative gradient computation.
intensity : intensity factor.
opacity : Opacity factor.
rotationAngle : Rotation angle.
translate : translate vector [x, y].
zoom : Zoom Factor.
size : Radius of the data point, in pixels. Default: 20
max : Max data Value for relative gradient computation. if not set, will be derived from data.
min : Min data Value for relative gradient computation. if not set, will be derived from data.
intensity : intensity factor. Default: 1.0
opacity : Opacity factor. Default: 1.0
rotationAngle : Rotation angle. Default: 0
translate : translate vector [x, y]. Default: [0,0]
zoom : Zoom Factor. Default: 1.0
gradient : Color Gradient, array of objects with color value and offset.
background: To set background of the heatMap
background: To set background of the heatMap. Value : { url: , x: , y: , height: , width: }
}
```

## Adding Data API

### instance.renderData([])
Accepts an array of data points with 'x', 'y' and 'value'. [Demo](https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html)
```Javascript
instance.renderData([{x: , y: , value: }])
```

### instance.addData([], transformationIntactflag);
Accepts an array of data points with 'x', 'y' and 'value' and a flag to specify to apply existing canvas transformations on the newly added data points.
Accepts an array of data points with 'x', 'y' and 'value' and a boolean flag to specify to apply existing heatmap transformations on the newly added data points. After adding data points, need to invoke `.render()` method to update the heatmap.
Try [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap3.html)
```Javascript
instance.addData([{x: , y: , value: }],transformationIntactflag)
```

## Render API
Method to re-render the heatmap. This method needs to be invoked as and when configurations get changed. [Example](https://nswamy14.github.io/visual-heatmap/demo/heatmap1.html)
```Javascript
instance.render()
```

## Configuration Setting API

### instance.setMax(number)
To set max data value, for relative gradient calculations.
Expand Down
20 changes: 13 additions & 7 deletions demo/heatmap1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,25 +61,25 @@
instance.renderData(data);
} );
gui.add( params, 'size', 15, 100 ).onChange( function () {
instance.setSize(params.size);
instance.setSize(params.size).render();
} );
gui.add( params, 'opacity', 0, 1 ).onChange( function () {
instance.setOpacity(params.opacity);
instance.setOpacity(params.opacity).render();
} );
gui.add( params, 'intensity', 0, 1 ).onChange( function () {
instance.setIntensity(params.intensity);
instance.setIntensity(params.intensity).render();
} );
gui.add( params, 'transalteX', -instance.width, instance.width ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
} );
gui.add( params, 'transalteY', -instance.height, instance.height ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
} );
gui.add( params, 'zoom', 0, 2 ).onChange( function () {
instance.setZoom(params.zoom);
instance.setZoom(params.zoom).render();
} );
gui.add( params, 'rotationAngle', 0, Math.PI * 2 ).onChange( function () {
instance.setRotationAngle(params.rotationAngle);
instance.setRotationAngle(params.rotationAngle).render();
} );

data = generateData(10000);
Expand Down Expand Up @@ -108,6 +108,12 @@
return num;
}

window.addEventListener("resize", function () {
if (instance && document.getElementById("canvas")) {
instance.resize();
}
});



</script>
Expand Down
14 changes: 7 additions & 7 deletions demo/heatmap2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,25 +57,25 @@

var params = new ParamsCon();
gui.add( params, 'size', 5, 100 ).onChange( function () {
instance.setSize(params.size);
instance.setSize(params.size).render();
} );
gui.add( params, 'opacity', 0, 1 ).onChange( function () {
instance.setOpacity(params.opacity);
instance.setOpacity(params.opacity).render();
} );
gui.add( params, 'intensity', 0, 1 ).onChange( function () {
instance.setIntensity(params.intensity);
instance.setIntensity(params.intensity).render();
} );
gui.add( params, 'transalteX', -instance.width, instance.width ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
} );
gui.add( params, 'transalteY', -instance.height, instance.height ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
} );
gui.add( params, 'zoom', 0, 2 ).onChange( function () {
instance.setZoom(params.zoom);
instance.setZoom(params.zoom).render();
} );
gui.add( params, 'rotationAngle', 0, Math.PI * 2 ).onChange( function () {
instance.setRotationAngle(params.rotationAngle);
instance.setRotationAngle(params.rotationAngle).render();
} );


Expand Down
17 changes: 9 additions & 8 deletions demo/heatmap3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,30 +61,31 @@

var params = new ParamsCon();
gui.add( params, 'size', 1, 200 ).onChange( function () {
instance.setSize(params.size);
instance.setSize(params.size).render();
} );
gui.add( params, 'opacity', 0, 1 ).onChange( function () {
instance.setOpacity(params.opacity);
instance.setOpacity(params.opacity).render();
} );
gui.add( params, 'intensity', 0, 1 ).onChange( function () {
instance.setIntensity(params.intensity);
instance.setIntensity(params.intensity).render();
} );
gui.add( params, 'transalteX', -instance.width, instance.width ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
} );
gui.add( params, 'transalteY', -instance.height, instance.height ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
} );
gui.add( params, 'zoom', 0, 2 ).onChange( function () {
instance.setZoom(params.zoom);
instance.setZoom(params.zoom).render();
} );
gui.add( params, 'rotationAngle', 0, Math.PI * 2 ).onChange( function () {
instance.setRotationAngle(params.rotationAngle);
instance.setRotationAngle(params.rotationAngle).render();
} );

var dataPush = true;
document.getElementById('canvas').addEventListener("mousemove", function(e){
if (dataPush) { instance.addData([{
if (dataPush) {
instance.addData([{
x: e.x,
y: e.y,
value: 10 +Math.random() * 50
Expand Down
14 changes: 7 additions & 7 deletions demo/heatmapWithLabels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,31 +59,31 @@

var params = new ParamsCon();
gui.add( params, 'size', 50, 100 ).onChange( function () {
instance.setSize(params.size);
instance.setSize(params.size).render();
params.updateLabels();
} );
gui.add( params, 'opacity', 0, 1 ).onChange( function () {
instance.setOpacity(params.opacity);
instance.setOpacity(params.opacity).render();
params.updateLabels();
} );
gui.add( params, 'intensity', 0, 1 ).onChange( function () {
instance.setIntensity(params.intensity);
instance.setIntensity(params.intensity).render();
params.updateLabels();
} );
gui.add( params, 'transalteX', -instance.width, instance.width ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
params.updateLabels();
} );
gui.add( params, 'transalteY', -instance.height, instance.height ).onChange( function () {
instance.setTranslate([params.transalteX, params.transalteY]);
instance.setTranslate([params.transalteX, params.transalteY]).render();
params.updateLabels();
} );
gui.add( params, 'zoom', 0, 2 ).onChange( function () {
instance.setZoom(params.zoom);
instance.setZoom(params.zoom).render();
params.updateLabels();
} );
gui.add( params, 'rotationAngle', 0, Math.PI * 2 ).onChange( function () {
instance.setRotationAngle(params.rotationAngle);
instance.setRotationAngle(params.rotationAngle).render();
params.updateLabels();
} );

Expand Down
Loading

0 comments on commit e463f90

Please sign in to comment.