JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay"></div>

CSS

#overlay {
  width: 100%;
  height: 2000px;
  position: absolute;
  top: 0px;
  left: 0px;
}

JavaScript

var Scroll = function(config, data) {
    var container, computed;
    this.data = data;
    this.config = config;
    container = document.querySelector(this.config.container);
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    computed = getComputedStyle(container) || {};
    this.canvas.className = 'zarget-scrollmap-canvas';
    this.width = this.canvas.width = this.config.width || +(computed.width.replace(/px/, ''));
    this.height = this.canvas.height = this.config.height || +(computed.height.replace(/px/, ''));
    this.canvas.style.cssText = 'position:absolute; top: 0px; left:0px';
    container.appendChild(this.canvas);

    var map = function(value, istart, istop, ostart, ostop) {
       return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
    };


function color_from_hue(hue)
{
  var h = hue/60;
  var c = 255;
  var x = (1 - Math.abs(h%2 - 1))*255;
  var color;
 
  var i = Math.floor(h);
  if (i == 0) color = rgb_to_hex(c, x, 0);
  else if (i == 1) color = rgb_to_hex(x, c, 0);
  else if (i == 2) color = rgb_to_hex(0, c, x);
  else if (i == 3) color = rgb_to_hex(0, x, c);
  else if (i == 4) color = rgb_to_hex(x, 0, c);
  else color = rgb_to_hex(c, 0, x);
 
  return color;
}
 
function rgb_to_hex(red, green, blue)
{
  var h = ((red << 16) | (green << 8) | (blue)).toString(16);
  // add the beginning zeros
  while (h.length < 6) h = '0' + h;
  return '#' + h;
}

    this.draw = function(data) {
      var min = 0;
      var max = 1300;
      var data = [
        [0, 150, 0],
        [150, 200, 40],
        [200, 350, 80],
        [350, 450, 120],
        [450, 500, 160],
        [500, 900, 180],
        [900, 950, 200],
        [950, 1000, 240],
        [1000, 1050, 280]
      ];
      var point, startY, endY, alpha, val, color;
      this.ctx.globalAlpha = 0.75;

      for (var i = 0, l = data.length; i < l; i++) {
      
        point = data[i];
        val = point[2];
       ...