Gradient bar exampleGradient

by Blake Dietz

HTML

<script src="http://d3js.org/d3.v2.min.js"></script>

JavaScript

var data = d3.range(20);

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

var minY = 10;
var maxY = 210;

var lingrad = d3.select("body").append("linearGradient")
.attr("id", "svg_2");

lingrad.append("stop").attr("offset","0").attr("stop-color","#fff");

lingrad.append("stop").attr("offset","1").attr("stop-color","#fff");


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)");