|
<!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 brush = d3.brushX() |
|
.extent([[0,0], [width, height]]) |
|
.on("brush", brushed); |
|
|
|
var typicalValueLine = d3.line() |
|
.curve(d3.curveStepAfter) |
|
.x(function(d) { return x(d.date); }) |
|
.y(function(d) { return y(d.typicalValue); }); |
|
// 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 range1Area = d3.area() |
|
.curve(d3.curveStepAfter) |
|
.x(function(d) { return x(d.date); }) |
|
.y0(function(d) { return y(d.range1Min); }) |
|
.y1(function(d) { return y(d.range1Max); }); |
|
|
|
var range2Area = d3.area() |
|
.curve(d3.curveStepAfter) |
|
.x(function(d) { return x(d.date); }) |
|
.y0(function(d) { return y(d.range2Min); }) |
|
.y1(function(d) { return y(d.range2Max); }); |
|
|
|
|
|
|
|
// 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.typicalValue = +d.typicalValue; |
|
d.range1Min = +d.range1Min; |
|
d.range1Max = +d.range1Max; |
|
d.range2Min = +d.range2Min; |
|
d.range2Max = +d.range2Max; |
|
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 Math.min(d.typicalValue, Math.min(d.range1Min, d.range2Min)) |
|
}) |
|
var yMax = d3.max(data, function(d) { |
|
return Math.max(d.typicalValue, Math.max(d.range1Max, d.range2Max)) |
|
}) |
|
|
|
// 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", range2Area); |
|
|
|
g.append("path") |
|
.datum(data) |
|
.attr("fill", "#9ecae1") |
|
.attr("d", range1Area); |
|
// .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", "gray") |
|
.attr("stroke-linejoin", "round") |
|
.attr("stroke-linecap", "round") |
|
.attr("stroke-width", 1.) |
|
.attr("d", typicalValueLine); |
|
|
|
g.selectAll("dot") |
|
.data(data) |
|
.enter().append("circle") |
|
.attr("r", 1.) |
|
.attr("fill", "black") |
|
.attr("stroke", "none") |
|
.attr("cx", function(d) { return x(d.date)}) |
|
.attr("cy", function(d) { return y(d.typicalValue)}); |
|
|
|
g.append("g") |
|
.attr("class", "brush") |
|
.call(brush); |
|
// .call(brush.move, x.range()); |
|
// 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); |
|
}); |
|
|
|
function brushed() { |
|
var selection = d3.event.selection; |
|
var timeSelection = selection.map(x.invert, x); |
|
console.log("selection: " + selection); |
|
console.log("start: " + timeSelection[0]); |
|
console.log("end: " + timeSelection[1]); |
|
} |
|
|
|
// function brushed() { |
|
// if (d3.event.sourceEvent.type == "brush") return; |
|
// |
|
// } |
|
</script> |