JSFiddle - React, Tailwind, and code Playground

by Henry

CSS

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

var spaces = [
  {name: "HSL", interpolate: d3.interpolateHsl}
];

var y = d3.scale.ordinal()
    .domain(spaces.map(function(d) { return d.name; }))
    .rangeRoundBands([0, 500], .09);

var width = 200,
    height = y.rangeBand();

var color = d3.scale.linear()
    .domain([0, width])
    .range(["hsl(62,100%,90%)", "hsl(222,30%,20%)"]);

/*var space = d3.select("body").selectAll(".space")
    .data(spaces)
  .enter().append("div")
    .attr("class", "space")
    .style("width", width + "px")
    .style("height", height + "px");

space.append("canvas")
    .attr("width", width)
    .attr("height", 1)
    .style("width", width + "px")
    .style("height", height + "px");
    //.each(render);
*/

  var canvas = d3.select("body").append("rect").append("canvas")
    .attr("width", width)
    .attr("height", 1)
    .style("width", width + "px")
    .style("height", height + "px");
console.log("hi");
  var context =  canvas.node().getContext("2d");

  var image = context.createImageData(width, 1);
  color.interpolate(d3.interpolateHsl);
  for (var i = 0, j = -1, c; i < width; ++i) {
    c = d3.rgb(color(i));
    image.data[++j] = c.r;
    image.data[++j] = c.g;
    image.data[++j] = c.b;
    image.data[++j] = 255;
  }
  context.putImageData(image, 0, 0);
/*
function render(d) {
  var context = this.getContext("2d"),
      image = context.createImageData(width, 1);
  color.interpolate(d3.interpolateHsl);
  for (var i = 0, j = -1, c; i < width; ++i) {
    c = d3.rgb(color(i));
    image.data[++j] = c.r;
    image.data[++j] = c.g;
    image.data[++j] = c.b;
    image.data[++j] = 255;
  }
  context.putImageData(image, 0, 0);
}*/