JSFiddle - React, Tailwind, and code Playground

by Yisroel Meir Blumstein

HTML

<html>

  <head></head>

  <body onLoad="RunExample()">
    Example Div:
    <div id="example">

    </div>
  </body>

</html>

JavaScript

function RunExample() {
  //mycompare();
  var e = document.createElement('span');
  e.innerHTML = 'foo';

  document.body.appendChild(e);
}

function mycompare(colors, n = 512) {
  colors = (colors) ? (colors) : ["#000", "#fff"];

  var f = method => myramp(d3.piecewise(method, colors), n);

  f(d3.interpolateRgb);
  f(d3.interpolateHcl);
  f(d3.interpolateLab);
}

function myramp(color, n = 512) {
  const canvas = document.create;
  const context = canvas.getContext("2d");
  canvas.style.margin = "0 -14px";
  canvas.style.width = "calc(100% + 28px)";
  canvas.style.height = "40px";
  canvas.style.imageRendering = "pixelated";
  for (let i = 0; i < n; ++i) {
    context.fillStyle = color(i / (n - 1));
    context.fillRect(i, 0, 1, 1);
  }

/*
    var colors = ["#000", "#fff"];

    colors = d3.quantize(d3.interpolateHcl(colors[0], colors[1]), 11);

		
    return html `
  ${colors.map(c => `<div title="${c}" style="
    display: inline-block;
    margin-right: 3px;
    width: 75px;
    height: 33px;
    background: ${c};
    color: ${"#fff"}
  ">
  ${d3.color(c).hex()}
  </div>`)}
  `;
  */

  return canvas;
}

function RootFind(f, guessLow, guessHigh, nOrders = 3) {
  // Bisection Method

  // Not TOO high
  nOrders = Math.min(nOrders, 9);
  var arbitrarilyLarge = Math.pow(10, nOrders);
  var relativelyLarge = Math.abs(f(b) - f(a)) * arbitrarilyLarge;

  var maxIterations = arbitrarilyLarge;
  var tolerance = Math.pow(relativelyLarge, -1);

  var a, b, c;

  [a, b] = [guessLow, guessHigh];
  // Swap if wrong order
  if (a > b) {
    [a, b] = [b, a];
  }

  for (var i = 0; i < maxIterations; i++) {
    c = (a + b) / 2;

    if ((f(c) == 0) || ((b - a) / 2 < tolerance)) {
      return [c, a, b, c, f(c), i];
    }

    // Results in evaluation of relevant expression
    // Move one of the extrema towards c
    if (Math.sign(f(a)) == Math.sign(f(c))) {
      a = c;
    } else {
      b = c;
    }
  }

  return [NaN, a, b, c, f(c), i];

}