JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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));
    };




    this.mapIntensityToColor = function(intensity, min, max) {
        var cint = map(intensity, min, max, 0, 255);

        /**
         * Based On Rainbow Gradient
         */
        if (cint > 204) {
            return [255, Math.round(map(intensity, min, max, 255, 0)), 0];
        }

        if (cint > 153) {
            max = (203 / 255 * 100) * (max / 100);
            return [Math.round(map(intensity, 0, max, 255, 0)), 255, 0];
        }

        if (cint > 102) {
            max = (153 / 255 * 100) * (max / 100);
            return [0, 255, Math.round(map(intensity, 0, max, 255, 0))];
        }

        if (cint > 0) {
            max = (102 / 255 * 100) * (max / 100);
            return [0, Math.round(map(intensity, 0, max, 255, 0)), 255];
        }
        max = (51 / 255 * 100) * (max / 100);
        return [0, 0, Math.round(map(intensity, 0, max, 0, 255))];
    };

 this.draw = function(data) {
    var min = 0;
    var max = 1300;
    var data = [
        [0, 50, 1300],
        [50, 100, 1100],
        [100, 150, 1100],
        [150, 200, 1000],
        [200, 250, 500],
        [250, 300, 400],
        [300, 350, 300],
   ...