|
<!DOCTYPE html> |
|
|
|
<style> |
|
.axis--y .tick line { |
|
/*stroke: #fff;*/ |
|
stroke-opacity: 0.15; |
|
} |
|
|
|
.axis .domain { |
|
display: none; |
|
} |
|
</style> |
|
|
|
<svg width="960" height="300"></svg> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> |
|
<script> |
|
|
|
var svg = d3.select("svg"), |
|
margin = {top: 20, right: 20, bottom: 30, left: 50}, |
|
width = +svg.attr("width") - margin.left - margin.right, |
|
height = +svg.attr("height") - margin.top - margin.bottom, |
|
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
// 2017-03-14T00:00:00Z |
|
var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%SZ"); |
|
|
|
var x = d3.scaleTime() |
|
.rangeRound([0, width]); |
|
|
|
var y = d3.scaleLinear() |
|
.rangeRound([height, 0]); |
|
|
|
// var z = d3.interpolateCool; |
|
|
|
var meanLine = d3.line() |
|
.curve(d3.curveStepAfter) |
|
.x(function(d) { return x(d.date); }) |
|
.y(function(d) { return y(d.mean); }); |
|
// var stdevMinLine = d3.line() |
|
// .x(function(d) { return x(d.date); }) |
|
// .y(function(d) { return y(d.stdevMin); }); |
|
// var stdevMaxLine = d3.line() |
|
// .x(function(d) { return x(d.date); }) |
|
// .y(function(d) { return y(d.stdevMax); }); |
|
// var maxLine = d3.line() |
|
// .x(function(d) { return x(d.date); }) |
|
// .y(function(d) { return y(d.max); }); |
|
// var minLine = d3.line() |
|
// .x(function(d) { return x(d.date); }) |
|
// .y(function(d) { return y(d.min); }); |
|
|
|
var stdevRangeArea = d3.area() |
|
.curve(d3.curveStepAfter) |
|
.x(function(d) { return x(d.date); }) |
|
.y0(function(d) { return y(d.stdevMin); }) |
|
.y1(function(d) { return y(d.stdevMax); }); |
|
|
|
var extentRangeArea = d3.area() |
|
.curve(d3.curveStepAfter) |
|
.x(function(d) { return x(d.date); }) |
|
.y0(function(d) { return y(d.min); }) |
|
.y1(function(d) { return y(d.max); }); |
|
|
|
// var area = d3.area() |
|
// .curve(d3.curveStepAfter) |
|
// .x(function(d) { return x(d.date); }) |
|
// .y0(function(d) { return y(d.stdevMin); }) |
|
// .y1(function(d) { return y(d.stdevMax); }); |
|
|
|
d3.csv("test-data.csv", function(d) { |
|
d.date = parseTime(d.date); |
|
d.mean = +d.mean; |
|
d.stdevMin = +d.stdevMin; |
|
d.stdevMax = +d.stdevMax; |
|
d.min = +d.min; |
|
d.max = +d.max; |
|
return d; |
|
}, function(error, data) { |
|
if (error) throw error; |
|
|
|
x.domain(d3.extent(data, function(d) { return d.date; })); |
|
|
|
// meanExtent = d3.extent(data, function(d) { return d.mean; }); |
|
// stdevMinExtent = d3.extent(data, function(d) { return d.stdevMin; }) |
|
// stdevMaxExtent = d3.extent(data, function(d) { return d.stdevMax; }) |
|
// minExtent = d3.extent(data, function(d) { return d.min; }) |
|
// maxExtent = d3.extent(data, function(d) { return d.max; }) |
|
// var yMin = d3.min([meanExtent, stdevMaxExtent, stdevMinExtent, minExtent, maxExtent], function(array) { return d3.min(array);}); |
|
// var yMax = d3.max([meanExtent, stdevMaxExtent, stdevMinExtent], function(array) { return d3.max(array);}); |
|
var yMin = d3.min(data, function(d) { return d.min; }); |
|
var yMax = d3.max(data, function(d) { return d.max; }); |
|
// y.domain(d3.extent(data, function(d) { return d.mean; })); |
|
y.domain([yMin, yMax]); |
|
|
|
var date0 = data[0], |
|
date1 = d3.utcDay.offset(data[data.length-1].date, 1); |
|
|
|
// g.insert("path", ".axis") |
|
// .datum(data.concat({day: date1, 0: 0, 1: 0})) // for step-after |
|
// .attr("class", "data") |
|
// .attr("d", area); |
|
|
|
|
|
g.append("path") |
|
.datum(data) |
|
.attr("fill", "#c6dbef") |
|
.attr("d", extentRangeArea); |
|
|
|
g.append("path") |
|
.datum(data) |
|
.attr("fill", "#9ecae1") |
|
.attr("d", stdevRangeArea); |
|
// .attr("fill", function() {return }); |
|
// .attr("fill", function() {return z(Math.random()); }); |
|
|
|
g.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(d3.axisLeft(y) |
|
.tickSize(-width) |
|
.tickPadding(10)); |
|
// .append("text") |
|
// .attr("fill", "#000") |
|
// .attr("transform", "rotate(-90)") |
|
// .attr("y", 6) |
|
// .attr("dy", "0.71em") |
|
// .attr("text-anchor", "end") |
|
// .text("Value"); |
|
|
|
g.append("g") |
|
.attr("transform", "translate(0," + height + ")") |
|
.call(d3.axisBottom(x)) |
|
.select(".domain") |
|
.remove(); |
|
|
|
g.append("path") |
|
.datum(data) |
|
.attr("fill", "none") |
|
.attr("stroke", "black") |
|
.attr("stroke-linejoin", "round") |
|
.attr("stroke-linecap", "round") |
|
.attr("stroke-width", 1.5) |
|
.attr("d", meanLine); |
|
|
|
// g.append("path") |
|
// .datum(data) |
|
// .attr("fill", "none") |
|
// .attr("stroke", "darkgray") |
|
// .attr("stroke-linejoin", "round") |
|
// .attr("stroke-linecap", "round") |
|
// .attr("stroke-width", 1.0) |
|
// .attr("d", stdevMinLine); |
|
// |
|
// g.append("path") |
|
// .datum(data) |
|
// .attr("fill", "none") |
|
// .attr("stroke", "darkgray") |
|
// .attr("stroke-linejoin", "round") |
|
// .attr("stroke-linecap", "round") |
|
// .attr("stroke-width", 1.0) |
|
// .attr("d", stdevMaxLine); |
|
// |
|
// g.append("path") |
|
// .datum(data) |
|
// .attr("fill", "none") |
|
// .attr("stroke", "darkgray") |
|
// .attr("stroke-linejoin", "round") |
|
// .attr("stroke-linecap", "round") |
|
// .attr("stroke-width", 1.0) |
|
// .attr("d", maxLine); |
|
// |
|
// g.append("path") |
|
// .datum(data) |
|
// .attr("fill", "none") |
|
// .attr("stroke", "darkgray") |
|
// .attr("stroke-linejoin", "round") |
|
// .attr("stroke-linecap", "round") |
|
// .attr("stroke-width", 1.0) |
|
// .attr("d", minLine); |
|
}); |
|
|
|
</script> |