JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<input id="time" type="range" min=0 max=100 step=3600000>
<div id="heatmap"></div>

CSS

html, body, 
#heatmap {
  font-family:helvetica, arial, sans-serif;
  width:100%;
  height:100%;
}

JavaScript

class ComfortHeatmap {
  constructor(container, options = {}) {

    this._forecast = null;
    this._selectedTime = null;
    this._timeRange = null;
    this._forecastPoints = null;

    this.container = document.querySelector(container);
    this.options = {
      tempRange: options.tempRange || [0, 50],
      humidityRange: options.humidityRange || [0, 100],
      colorPalette: options.colorPalette || [{
          point: 0,
          color: [255, 255, 255]
        }, // White
        {
          point: 5,
          color: [135, 206, 235]
        }, // Sky Blue
        {
          point: 10,
          color: [0, 255, 0]
        }, // Green
        {
          point: 15,
          color: [255, 255, 0]
        }, // Yellow
        {
          point: 21,
          color: [255, 165, 0]
        }, // Orange
        {
          point: 24,
          color: [255, 0, 0]
        }, // Red
        {
          point: 30,
          color: [128, 0, 128]
        }, // Purple
        {
          point: 35,
          color: [0, 0, 0]
        } // Black
      ],
      margin: options.margin || {
        top: 100,
        right: 100,
        bottom: 100,
        left: 100
      }
    };

    this.svg = this.createSVGElement('svg');
    this.container.appendChild(this.svg);

    this.g = this.createSVGElement('g');
    this.svg.appendChild(this.g);

    this.setupEventListeners();
    this.resize();
  }

  createSVGElement(type) {
    return document.createElementNS('http://www.w3.org/2000/svg', type);
  }

  setupEventListeners() {
    window.addEventListener('resize', this.resize.bind(this));
  }

  resize() {
    const bounds = this.container.getBoundingClientRect();
    this.width = bounds.width;
    this.height = bounds.height;
    this.innerWidth = this.width - this.options.margin.left - this.options.margin.right;
    this.innerHeight = this.height - this.options.margin.top - this.options.margin.bottom;

    this.svg.setAttribute('width', this.width);
   ...