|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> |
|
5 <title>Zoom</title> |
|
6 <script type="text/javascript" src="../../d3.js"></script> |
|
7 <script type="text/javascript" src="../../d3.csv.js"></script> |
|
8 <script type="text/javascript" src="../../d3.time.js"></script> |
|
9 <style type="text/css"> |
|
10 |
|
11 path { |
|
12 fill: steelblue; |
|
13 } |
|
14 |
|
15 line { |
|
16 stroke: #000; |
|
17 shape-rendering: crispEdges; |
|
18 } |
|
19 |
|
20 </style> |
|
21 </head> |
|
22 <body> |
|
23 <script type="text/javascript"> |
|
24 |
|
25 var w = 960, |
|
26 h1 = 400, |
|
27 h2 = 40, |
|
28 p = 20, |
|
29 x0, // start of focus region |
|
30 x1, // end of focus region |
|
31 xx, // drag state |
|
32 time = d3.time.format("%Y-%m-%d"), |
|
33 x = d3.scale.linear().range([0, w]), |
|
34 y1 = d3.scale.linear().range([h1 - p, 0]), |
|
35 y2 = d3.scale.linear().range([h2, 0]); |
|
36 |
|
37 var svg = d3.select("body") |
|
38 .append("svg:svg") |
|
39 .attr("width", w) |
|
40 .attr("height", h1 + h2); |
|
41 |
|
42 // Focus view. |
|
43 var focus = svg.append("svg:g"); |
|
44 |
|
45 // Context view. |
|
46 var context = svg.append("svg:g") |
|
47 .attr("transform", "translate(0," + h1 + ")"); |
|
48 |
|
49 d3.csv("dji.csv", function(csv) { |
|
50 var minX, |
|
51 maxX, |
|
52 maxY = -Infinity; |
|
53 |
|
54 // Compute x- and y-extent. |
|
55 csv.reverse(); |
|
56 for (var i = 0, n = csv.length, o; i < n; i++) { |
|
57 o = csv[i]; |
|
58 o = csv[i] = {x: +time.parse(o.Date), y: +o.Close}; |
|
59 if (o.y > maxY) maxY = o.y; |
|
60 } |
|
61 minX = csv[0].x; |
|
62 maxX = csv[n - 1].x; |
|
63 |
|
64 // Update x- and y-scales. |
|
65 x.domain([minX, maxX]); |
|
66 y1.domain([0, maxY]); |
|
67 y2.domain([0, maxY]); |
|
68 |
|
69 // Focus view. |
|
70 focus.append("svg:path") |
|
71 .data([csv]) |
|
72 .attr("d", d3.svg.area() |
|
73 .x(function(d) { return x(d.x); }) |
|
74 .y0(y1(0)) |
|
75 .y1(function(d) { return y1(d.y); })); |
|
76 |
|
77 focus.append("svg:line") |
|
78 .attr("x1", 0) |
|
79 .attr("x2", w) |
|
80 .attr("y1", y1(0)) |
|
81 .attr("y2", y1(0)); |
|
82 |
|
83 // Context view. |
|
84 context.append("svg:rect") |
|
85 .attr("width", w) |
|
86 .attr("height", h2) |
|
87 .attr("fill", "none") |
|
88 .attr("pointer-events", "all") |
|
89 .attr("cursor", "crosshair") |
|
90 .on("mousedown", mousedown); |
|
91 |
|
92 context.append("svg:path") |
|
93 .data([csv]) |
|
94 .attr("pointer-events", "none") |
|
95 .attr("d", d3.svg.area() |
|
96 .x(function(d) { return x(d.x); }) |
|
97 .y0(y2(0)) |
|
98 .y1(function(d) { return y2(d.y); })); |
|
99 |
|
100 context.append("svg:line") |
|
101 .attr("x1", 0) |
|
102 .attr("x2", w) |
|
103 .attr("y1", y2(0)) |
|
104 .attr("y2", y2(0)); |
|
105 |
|
106 // Active focus region. |
|
107 active = context.append("svg:rect") |
|
108 .attr("pointer-events", "none") |
|
109 .attr("id", "active") |
|
110 .attr("x", x(x0 = minX)) |
|
111 .attr("y", 0) |
|
112 .attr("height", h2) |
|
113 .attr("width", x(x1 = (minX + 1e11)) - x(x0)) |
|
114 .attr("fill", "lightcoral") |
|
115 .attr("fill-opacity", .5); |
|
116 }); |
|
117 |
|
118 d3.select(window) |
|
119 .on("mousemove", mousemove) |
|
120 .on("mouseup", mouseup); |
|
121 |
|
122 function mousedown() { |
|
123 xx = x.invert(d3.svg.mouse(this)[0]); |
|
124 } |
|
125 |
|
126 function mousemove() { |
|
127 if (xx != null) { |
|
128 |
|
129 // Compute the new (clamped) focus region. |
|
130 var xy = x.invert(d3.svg.mouse(active[0][0])[0]); |
|
131 if (xx < xy) { x0 = xx; x1 = xy; } |
|
132 else if (xx > xy) { x0 = xy; x1 = xx; } |
|
133 else return; |
|
134 x0 = Math.max(x.domain()[0], x0); |
|
135 x1 = Math.min(x.domain()[1], x1); |
|
136 |
|
137 // Update the x-scale. TODO Recycle this scale? |
|
138 var tx = d3.scale.linear() |
|
139 .domain([x0, x1]) |
|
140 .range([0, w]); |
|
141 |
|
142 // Recompute the focus path. |
|
143 focus.select("path") |
|
144 .attr("d", d3.svg.area() |
|
145 .x(function(d) { return tx(d.x); }) |
|
146 .y0(y1(0)) |
|
147 .y1(function(d) { return y1(d.y); })); |
|
148 |
|
149 // Reposition the active region rect. |
|
150 active |
|
151 .attr("x", x(x0)) |
|
152 .attr("width", x(x1) - x(x0)); |
|
153 } |
|
154 } |
|
155 |
|
156 function mouseup() { |
|
157 xx = null; |
|
158 } |
|
159 |
|
160 </script> |
|
161 </body> |
|
162 </html> |