@the-arc-gmbh/heatmap

Heatmap TypeScript Project

How to use

Define a container in your html.

<div id="heatmapContainer" style="height: 500px; width:500px;"></div>

Create a Heatmap instance in your TypeScript file and pass in a container this Heatmap should be attached to.

import { HeatmapConfig } from './src';
import { Heatmap } from './src/core';

// Get the container the heatmap should be attached to
const heatmapContainer = document.getElementById('heatmapContainer');
if (heatmapContainer) {
  const heatmap = new Heatmap({
    container: heatmapContainer,
    // You can attach event listeners to handle changes of the Heatmap data or visualization.
    onExtremaChange: function onExtremaChange(data) {
      updateLegend(data);
    },
    ...HeatmapConfig
  })

  // DEMO GENERATION OF POINTS
  let prevPoint = [250, 250]
  const data = [];

  // Generate some random path to be visualized in a batch
  for (let i = 0; i < 1000; i++) {
    prevPoint = [Math.round(Math.max(Math.min(prevPoint[0] + Math.random() * 50 - 25, 500), 0)), Math.round(Math.max(Math.min(prevPoint[1] + Math.random() * 50 - 25, 500), 0))]
    data.push({ x: +prevPoint[0], y: +prevPoint[1], value: 1 })
  }
  heatmap.setData({ min: 0, max: 5, data });

  // Generate more points for the random path to be visualized reactively
  setInterval(() => {
    prevPoint = [Math.round(Math.max(Math.min(prevPoint[0] + Math.random() * 50 - 25, 500), 0)), Math.round(Math.max(Math.min(prevPoint[1] + Math.random() * 50 - 25, 500), 0))]
    heatmap.addData({ x: prevPoint[0], y: prevPoint[1], value: 1 });
  }, 50);
}

Heatmap Legend

You can create an image representing the colors of the heatmap. To do so can create a dataURL of that gradient and attach it to an image tag or use it wherever you like.

// Create a gradient that will ve used to display the legend
const legendCanvas = document.createElement('canvas');
legendCanvas.width = 100;
legendCanvas.height = 10;

const legendCtx = legendCanvas.getContext('2d');

function updateLegend(data: ExtremaData) {
  // You can get the min and max values of the legend.
  const minEl = document.getElementById('min');
  if (minEl) {
    minEl.innerHTML = `${data.min}`;
  }
  const maxEl = document.getElementById('max');
  if (maxEl) {
    maxEl.innerHTML = `${data.max}`;
  }

  // Whenever the gradient changes
  if (data.gradient) {
    const gradient = legendCtx.createLinearGradient(0, 0, 100, 1);
    for (const key in data.gradient) {
      gradient?.addColorStop(+key, data.gradient[key]);
    }

    legendCtx.fillStyle = gradient;
    legendCtx.fillRect(0, 0, 100, 10);
    (document.getElementById('gradient')).src = legendCanvas.toDataURL();
  }
};