<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Zoom</title>
<script type="text/javascript" src="../../d3.js"></script>
<script type="text/javascript" src="../../d3.csv.js"></script>
<script type="text/javascript" src="../../d3.time.js"></script>
<style type="text/css">
path {
fill: steelblue;
}
line {
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 960,
h1 = 400,
h2 = 40,
p = 20,
x0, // start of focus region
x1, // end of focus region
xx, // drag state
time = d3.time.format("%Y-%m-%d"),
x = d3.scale.linear().range([0, w]),
y1 = d3.scale.linear().range([h1 - p, 0]),
y2 = d3.scale.linear().range([h2, 0]);
var svg = d3.select("body")
.append("svg:svg")
.attr("width", w)
.attr("height", h1 + h2);
// Focus view.
var focus = svg.append("svg:g");
// Context view.
var context = svg.append("svg:g")
.attr("transform", "translate(0," + h1 + ")");
d3.csv("dji.csv", function(csv) {
var minX,
maxX,
maxY = -Infinity;
// Compute x- and y-extent.
csv.reverse();
for (var i = 0, n = csv.length, o; i < n; i++) {
o = csv[i];
o = csv[i] = {x: +time.parse(o.Date), y: +o.Close};
if (o.y > maxY) maxY = o.y;
}
minX = csv[0].x;
maxX = csv[n - 1].x;
// Update x- and y-scales.
x.domain([minX, maxX]);
y1.domain([0, maxY]);
y2.domain([0, maxY]);
// Focus view.
focus.append("svg:path")
.data([csv])
.attr("d", d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(y1(0))
.y1(function(d) { return y1(d.y); }));
focus.append("svg:line")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", y1(0))
.attr("y2", y1(0));
// Context view.
context.append("svg:rect")
.attr("width", w)
.attr("height", h2)
.attr("fill", "none")
.attr("pointer-events", "all")
.attr("cursor", "crosshair")
.on("mousedown", mousedown);
context.append("svg:path")
.data([csv])
.attr("pointer-events", "none")
.attr("d", d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(y2(0))
.y1(function(d) { return y2(d.y); }));
context.append("svg:line")
.attr("x1", 0)
.attr("x2", w)
.attr("y1", y2(0))
.attr("y2", y2(0));
// Active focus region.
active = context.append("svg:rect")
.attr("pointer-events", "none")
.attr("id", "active")
.attr("x", x(x0 = minX))
.attr("y", 0)
.attr("height", h2)
.attr("width", x(x1 = (minX + 1e11)) - x(x0))
.attr("fill", "lightcoral")
.attr("fill-opacity", .5);
});
d3.select(window)
.on("mousemove", mousemove)
.on("mouseup", mouseup);
function mousedown() {
xx = x.invert(d3.svg.mouse(this)[0]);
}
function mousemove() {
if (xx != null) {
// Compute the new (clamped) focus region.
var xy = x.invert(d3.svg.mouse(active[0][0])[0]);
if (xx < xy) { x0 = xx; x1 = xy; }
else if (xx > xy) { x0 = xy; x1 = xx; }
else return;
x0 = Math.max(x.domain()[0], x0);
x1 = Math.min(x.domain()[1], x1);
// Update the x-scale. TODO Recycle this scale?
var tx = d3.scale.linear()
.domain([x0, x1])
.range([0, w]);
// Recompute the focus path.
focus.select("path")
.attr("d", d3.svg.area()
.x(function(d) { return tx(d.x); })
.y0(y1(0))
.y1(function(d) { return y1(d.y); }));
// Reposition the active region rect.
active
.attr("x", x(x0))
.attr("width", x(x1) - x(x0));
}
}
function mouseup() {
xx = null;
}
</script>
</body>
</html>