Applying a colour gradient to an area fill in d3.js

The following post is a portion of the D3 Tips and Tricks document which it free to download. To use this post in context, consider it with the others in the blog or just download the pdf  and / or the examples from the downloads page:-)

--------------------------------------------------------

The previous example of a varying gradient on a line is neat, but hopefully you're already thinking “Hang on, can't that same thing be applied to an area fill?”.

Damn! You're catching on.

To do this there's only a few things we need to change;

First of all the CSS for the line needs to be amended to refer to the area. So this...

.line {                         
    fill: none;                 
    stroke: url(#line-gradient);    
    stroke-width: 2px;          
}

…gets changed to this...

.area {                         
    fill: url(#area-gradient);                  
    stroke-width: 0px;          
}

We've defined the styles for the area this time, but instead of the stroke being defined by the separate script, now it's the area. While we've changed the url name, it's actually the same piece of code, with a different id (because it seemed wrong to be talking about an area when the label said line). We've also set the stroke width to zero, because we don't want any lines around our filled area.

Now we want to take the block of code that defined our line...

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

… and we need to replace it with the standard block that defined an area fill.

var area = d3.svg.area()    
    .x(function(d) { return x(d.date); })   
    .y0(height)                 
    .y1(function(d) { return y(d.close); });

So we're not going to be drawing a line at all. Just the area fill.

Next as I mentioned earlier, we change the id for the linearGradient block from “line-gradient” to “area-gradient”

.attr("id", "area-gradient")    

And lastly, we remove the block of code that drew the line and replace it with a block that draws an area. So change this....

svg.append("path")              
        .attr("class", "line")      
        .attr("d", valueline(data));

… for this;

svg.append("path")  
        .datum(data)    
        .attr("class", "area")  
        .attr("d", area);

And then sit back and marvel at your creation;

For a slightly 'nicer' looking example, you could check out a variation of one of Mike Bostocks originals here; http://bl.ocks.org/4433087.

The above description (and heaps of other stuff) is in the D3 Tips and Tricks document that can be accessed from the downloads page of d3noob.org.