JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<canvas id="canvas"></canvas>

JavaScript

let scale = d3.scaleLinear().range(['red', 'blue']).interpolate(d3.interpolateHslLong).domain([-2, 2]);


function ramp(color, n = 100) {
  const canvas = document.getElementById('canvas')
  const context = canvas.getContext("2d");
  canvas.style.margin = "0 -14px";
  canvas.style.width = "200px";
  canvas.style.height = "40px";
  canvas.style.imageRendering = "pixelated";
  
  let ctr = 0;

d3.range(-2, 2).forEach(v => console.log(scale(v)));

  for (let i = -2; i < n; i++) {
  let _color = scale(i);

    context.fillStyle = _color;
    context.fillRect(ctr*25, 0, 25, 40);
    ctr++;
  }
  return canvas;
}

ramp(d3.interpolateHslLong('red', 'blue'), 2);