Example of Bar Graph Color Gradient!

http://stackoverflow.com/questions/12826604/how-to-use-svg-gradients-to-display-varying-colors-relative-to-the-size-of-the-c

by Nivaldo

HTML

<linearGradient id="svg_2">
   <stop offset="0" stop-color="#fff"/>
   <stop offset="1" stop-color="#00f0NaN"/>
  </linearGradient>

JavaScript

var data = d3.range(20);

var svg = d3.select("body").append("svg");

var minY = 10;
var maxY = 210;

var gradient = svg
    .append("linearGradient")
    .attr("y1", minY)
    .attr("y2", maxY)
    .attr("x1", "0")
    .attr("x2", "0")
    .attr("id", "gradient")
    .attr("gradientUnits", "userSpaceOnUse")
    
gradient
    .append("stop")
    .attr("offset", "0")
    .attr("stop-color", "#ff0")
    
gradient
    .append("stop")
    .attr("offset", "0.5")
    .attr("stop-color", "#f00")
    
    

svg
    .selectAll("rect")
    .data(data)
    .enter()
    .append("rect")
    .attr("x", function(d){return d*25})
    .attr("y", minY)
    .attr("width", 20)
    .attr("height", function(d){return d*10})
    .attr("fill", "url(#gradient)");