[Solved]-Create color range with radial gradients using d3.js-d3.js

var temps = [25.2, 1.45, 240.25, 3.1],
  coors = [{
    x: 10,
    y: 20
  }, {
    x: 50,
    y: 60
  }, {
    x: 50,
    y: 80
  }, {
    x: 90,
    y: 100
  }];

var color_chart = d3.select("body")
  .append("svg")
  .attr("width", 1000)
  .attr("height", 500);

var numRange = [1, 1.5, 2, 2.5, 3, 4, 5, 7, 10, 15, 25, 45, 70, 100, 150, 240],
  colorRange = ["#0500FF", "#0100FF", "#0022FF", "#0064FF",
    "#00A4FF", "#00E4FF", "#00FF83", "#17FF00",
    "#B0FF00", "#FFF000", "#FFC800", "#FFA000",
    "#FF7800", "#FF5000", "#FF2800", "#FF0000"
  ],
  gradientRange = [];

var defs = color_chart.append("defs");

for (var i = 0; i < colorRange.length; i++) {
  var gradient = defs.append("radialGradient")
    .attr("id", "radial-gradient" + i);

  gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", colorRange[i])
    .attr("stop-opacity", 1);

  gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", colorRange[i])
    .attr("stop-opacity", 0);

  gradientRange.push("url(#radial-gradient" + i + ")");
};

console.log(numRange);
console.log(gradientRange);

var color = d3.scale.linear()
  .domain(numRange)
  .range(gradientRange);

color_chart.selectAll("circle")
  .data(temps)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) {
    return coors[i].x
  })
  .attr("cy", function(d, i) {
    return coors[i].y
  })
  .attr("r", 10)
  .attr("fill", function(d, i) {
    return color(Math.round(d));
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>