This variation of a line chart is taken from the example demonstrated by Mike Bostock where the gradient for the line varied. In this example the gradient is applied to the area fill instead.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: auto;
width: 960px;
}
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.area {
fill: url(#temperature-gradient);
stroke-width: 05px;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.temperature); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.temperature = +d.temperature;
});
x.domain([data[0].date, data[data.length - 1].date]);
y.domain(d3.extent(data, function(d) { return d.temperature; }));
svg.append("linearGradient")
.attr("id", "temperature-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0).attr("y1", y(50))
.attr("x2", 0).attr("y2", y(60))
.selectAll("stop")
.data([
{offset: "0%", color: "steelblue"},
{offset: "50%", color: "gray"},
{offset: "100%", color: "red"}
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
});
</script>
date,temperature
20111001,62.7
20111002,59.9
20111003,59.1
20111004,58.8
20111005,58.7
20111006,57.0
20111007,56.7
20111008,56.8
20111009,56.7
20111010,60.1
20111011,61.1
20111012,61.5
20111013,64.3
20111014,67.1
20111015,64.6
20111016,61.6
20111017,61.1
20111018,59.2
20111019,58.9
20111020,57.2
20111021,56.4
20111022,60.7
20111023,65.1
20111024,60.9
20111025,56.1
20111026,54.6
20111027,56.1
20111028,58.1
20111029,57.5
20111030,57.7
20111031,55.1
20111101,57.9
20111102,64.6
20111103,56.2
20111104,50.5
20111105,51.3
20111106,52.6
20111107,51.4
20111108,50.6
20111109,54.6
20111110,55.6
20111111,53.9
20111112,54.0
20111113,53.8
20111114,53.5
20111115,53.4
20111116,52.2
20111117,52.7
20111118,53.1
20111119,49.0
20111120,50.4
20111121,51.1
20111122,52.3
20111123,54.6
20111124,55.1
20111125,51.5
20111126,53.6
20111127,52.3
20111128,51.0
20111129,49.5
20111130,49.8
20111201,60.4
20111202,62.2
20111203,58.3
20111204,52.7
20111205,51.5
20111206,49.9
20111207,48.6
20111208,46.4
20111209,49.8
20111210,52.1
20111211,48.8
20111212,47.4
20111213,47.2
20111214,46.1
20111215,48.8
20111216,47.9
20111217,49.8
20111218,49.1
20111219,48.3
20111220,49.3
20111221,48.4
20111222,53.3
20111223,47.5
20111224,47.9
20111225,48.9
20111226,45.9
20111227,47.2
20111228,48.9
20111229,50.9
20111230,52.9
20111231,50.1
20120101,53.9
20120102,53.1
20120103,49.7
20120104,52.7
20120105,52.6
20120106,49.0
20120107,51.0
20120108,56.8
20120109,52.3
20120110,51.6
20120111,49.8
20120112,51.9
20120113,53.7
20120114,52.9
20120115,49.7
20120116,45.3
20120117,43.6
20120118,45.0
20120119,47.3
20120120,51.4
20120121,53.7
20120122,48.3
20120123,52.9
20120124,49.1
20120125,52.1
20120126,53.6
20120127,50.4
20120128,50.3
20120129,53.8
20120130,51.9
20120131,50.0
20120201,50.0
20120202,51.3
20120203,51.5
20120204,52.0
20120205,53.8
20120206,54.6
20120207,54.3
20120208,51.9
20120209,53.8
20120210,53.9
20120211,52.3
20120212,50.1
20120213,49.5
20120214,48.6
20120215,49.9
20120216,52.4
20120217,49.9
20120218,51.6
20120219,47.8
20120220,48.7
20120221,49.7
20120222,53.4
20120223,54.1
20120224,55.9
20120225,51.7
20120226,47.7
20120227,45.4
20120228,47.0
20120229,49.8
20120301,48.9
20120302,48.1
20120303,50.7
20120304,55.0
20120305,48.8
20120306,48.4
20120307,49.9
20120308,49.2
20120309,51.7
20120310,49.3
20120311,50.0
20120312,48.6
20120313,53.9
20120314,55.2
20120315,55.9
20120316,54.6
20120317,48.2
20120318,47.1
20120319,45.8
20120320,49.7
20120321,51.4
20120322,51.4
20120323,48.4
20120324,49.0
20120325,46.4
20120326,49.7
20120327,54.1
20120328,54.6
20120329,52.3
20120330,54.5
20120331,56.2
20120401,51.1
20120402,50.5
20120403,52.2
20120404,50.6
20120405,47.9
20120406,47.4
20120407,49.4
20120408,50.0
20120409,51.3
20120410,53.8
20120411,52.9
20120412,53.9
20120413,50.2
20120414,50.9
20120415,51.5
20120416,51.9
20120417,53.2
20120418,53.0
20120419,55.1
20120420,55.8
20120421,58.0
20120422,52.8
20120423,55.1
20120424,57.9
20120425,57.5
20120426,55.3
20120427,53.5
20120428,54.7
20120429,54.0
20120430,53.4
20120501,52.7
20120502,50.7
20120503,52.6
20120504,53.4
20120505,53.1
20120506,56.5
20120507,55.3
20120508,52.0
20120509,52.4
20120510,53.4
20120511,53.1
20120512,49.9
20120513,52.0
20120514,56.0
20120515,53.0
20120516,51.0
20120517,51.4
20120518,52.2
20120519,52.4
20120520,54.5
20120521,52.8
20120522,53.9
20120523,56.5
20120524,54.7
20120525,52.5
20120526,52.1
20120527,52.2
20120528,52.9
20120529,52.1
20120530,52.1
20120531,53.3
20120601,54.8
20120602,54.0
20120603,52.3
20120604,55.3
20120605,53.5
20120606,54.1
20120607,53.9
20120608,54.4
20120609,55.0
20120610,60.0
20120611,57.2
20120612,55.1
20120613,53.3
20120614,53.4
20120615,54.6
20120616,57.0
20120617,55.6
20120618,52.5
20120619,53.9
20120620,55.3
20120621,53.3
20120622,54.1
20120623,55.2
20120624,55.8
20120625,56.8
20120626,57.5
20120627,57.7
20120628,56.6
20120629,56.4
20120630,58.4
20120701,58.8
20120702,56.4
20120703,56.5
20120704,55.8
20120705,54.8
20120706,54.9
20120707,54.7
20120708,52.8
20120709,53.7
20120710,53.1
20120711,52.7
20120712,52.0
20120713,53.4
20120714,54.0
20120715,54.0
20120716,54.5
20120717,56.7
20120718,57.5
20120719,57.1
20120720,58.1
20120721,57.6
20120722,56.0
20120723,56.6
20120724,57.8
20120725,57.5
20120726,56.4
20120727,55.3
20120728,55.0
20120729,55.6
20120730,55.6
20120731,55.9
20120801,55.4
20120802,54.4
20120803,53.7
20120804,54.1
20120805,57.8
20120806,58.2
20120807,58.0
20120808,57.0
20120809,55.0
20120810,54.8
20120811,53.0
20120812,52.5
20120813,53.3
20120814,53.9
20120815,56.2
20120816,57.1
20120817,55.3
20120818,56.2
20120819,54.3
20120820,53.1
20120821,53.4
20120822,54.5
20120823,55.7
20120824,54.8
20120825,53.8
20120826,56.5
20120827,58.3
20120828,58.7
20120829,57.5
20120830,55.9
20120831,55.4
20120901,55.7
20120902,53.1
20120903,53.5
20120904,52.5
20120905,54.5
20120906,56.3
20120907,56.4
20120908,56.5
20120909,56.4
20120910,55.4
20120911,56.2
20120912,55.7
20120913,54.3
20120914,55.2
20120915,54.3
20120916,52.9
20120917,54.8
20120918,54.8
20120919,56.8
20120920,55.4
20120921,55.8
20120922,55.9
20120923,52.8
20120924,54.5
20120925,53.3
20120926,53.6
20120927,52.1
20120928,52.6
20120929,53.9
20120930,55.1