JSFiddle - React, Tailwind, and code Playground

by Sinh Nguyen

HTML

<script src="https://cdn.rawgit.com/pa7/heatmap.js/master/build/heatmap.min.js"></script>



      <div style="position: relative; height: 400px; width: 400px;" class="heatmap">
      </div>

JavaScript

var heatmapInstance = h337.create({
  // only container is required, the rest will be defaults
  container: document.querySelector('.heatmap')
});

// now generate some random data
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;

while (len--) {
  var val = Math.floor(Math.random()*100);
  max = Math.max(max, val);
  var point = {
    x: Math.floor(Math.random()*width),
    y: Math.floor(Math.random()*height),
    value: val
  };
  points.push(point);
}
// heatmap data format
var data = { 
  max: max, 
  data: points 
};
// if you have a set of datapoints always use setData instead of addData
// for data initialization
heatmapInstance.setData(data);