Circle Gradient II

Circle Gradient with Linear scale

<!DOCTYPE html>
<meta charset="utf-8">

var colorRange = ['#d73027', '#e0e0e0', '#4575b4']
var color = d3.scaleLinear().range(colorRange).domain([-1, 0, 1]);

var svg = d3.select('body')
.append('svg')
.attr("width", width + (margin * 2))
.attr("height", height + (margin * 2))
.append("g")
.attr("transform", "translate(" + (margin) + "," + (margin) + ")");

var radialGradient = svg.append("defs")
    .append("radialGradient")
    .attr("id", "radial-gradient");

radialGradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", color(-1));

radialGradient.append("stop")
    .attr("offset", "50%")
    .attr("stop-color", color(0));

radialGradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", color(1));

svg.append("circle")
.attr("cx", width * 0.5)
.attr("cy", height * 0.5)
.attr("r", height * 0.3)
.style("opacity", 1.0)
.style("fill", "url(#radial-gradient)");

</script>
</body>

https://d3js.org/d3.v4.min.js