условное заполнение в d3.js для диаграммы с областями

У меня есть график с областями (, который должен представлять временной ряд ). Я хочу раскрасить график на основе значения y таким образом, чтобы для областей, где y > c, был один цвет, а для области, где y<=c, — другой цвет. Возможно ли это в D3?

Это код, который у меня есть, который генерирует одноцветный график:

var width = 700,
    height = 400;

var vis = d3.select("#chart")
   .append("svg")
   .attr("width",width)
   .attr("height",height); 

var mpts = [{"x":0,"val":15}];
var n = 200;
for(var i=0;i<n;i++)
{
    if(Math.random()>.5)
    {
        mpts = mpts.concat({"x":i+1,"val":mpts[i].val*(1.01)});
    }
    else
    {
        mpts = mpts.concat({"x":i+1,"val":mpts[i].val*(.99)});
    }
}

var x = d3.scale.linear().domain([0,n]).range([10,10+width]);
var y = d3.scale.linear().domain([10,20]).range([height-10,0]);

var area = d3.svg.area()
       .interpolate("linear")
       .x(function(d) { return x(d.x); })
       .y1(function(d) { return y(d.val); })
       .y0(function(d) { return y(0); });

vis.append("svg:path")
           .attr("class", "area")
           .attr("d",area(mpts))
       .attr("fill","orange");

</script>