JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

JavaScript

var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
  },
  width = 800 - margin.left - margin.right,
  height = 50 - margin.top - margin.bottom;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var circles_data = function(count, y, radius) {
  var data = [];
  for (var j = 0; j < count; j++) {
    data.push({
      "id": j,
      "x": j * 2 * radius,
      "y": y
    });
  }
  return data;
}

var create_circles = function(color_func) {
  var svg = d3.select("body").append("svg")
    .attr("data-margin-right", margin.right)
    .attr("data-margin-left", margin.left)
    .attr("data-margin-top", margin.top)
    .attr("data-margin-bottom", margin.bottom)
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  data = circles_data(20, 140, 15);

  x.domain(d3.extent(data, function(d) {
    return d.x;
  })).nice();
  y.domain(d3.extent(data, function(d) {
    return d.y;
  })).nice();

  svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("r", 15)
    .attr("cx", function(d) {
      return x(d.x);
    })
    .attr("cy", function(d) {
      return y(d.y);
    })
    .style("fill", function(d) {
      return color_func(d.id);
    });
}

var step = d3.scaleLinear()
  .domain([1, 10])
  .range([1, 20]);

var color1 = d3.scaleLinear()
  .domain([1, 20])
  .range(['#111111', '#145BB8'])
  .interpolate(d3.interpolateHcl);
  
console.log(color1);

var color3 = d3.scaleLinear()
  .domain([1, step(2), step(3), step(4), step(5), step(6), step(7), 20])
  .range(['#d73027', '#f46d43', '#fdae61', '#fee08b', '#d9ef8b', '#a6d96a', '#66bd63', '#1a9850'])
  .interpolate(d3.interpolateHcl); //interpolateHsl interpolateHcl interpolateRgb
  
  console.log(color1);

d3.select("body").append("h3").html("From red to green - 8 colors...