|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>DJI</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="../../d3.csv.js"></script> |
|
7 <script type="text/javascript" src="../../d3.time.js"></script> |
|
8 <style type="text/css"> |
|
9 |
|
10 body { |
|
11 font: 10px sans-serif; |
|
12 } |
|
13 |
|
14 rect { |
|
15 fill: #ddd; |
|
16 } |
|
17 |
|
18 path.area { |
|
19 fill: #000; |
|
20 fill-opacity: .75; |
|
21 } |
|
22 |
|
23 .axis, .grid { |
|
24 shape-rendering: crispEdges; |
|
25 } |
|
26 |
|
27 .grid line { |
|
28 stroke: #fff; |
|
29 } |
|
30 |
|
31 .grid line.minor { |
|
32 stroke-opacity: .5; |
|
33 } |
|
34 |
|
35 .grid text { |
|
36 display: none; |
|
37 } |
|
38 |
|
39 .axis line { |
|
40 stroke: #000; |
|
41 } |
|
42 |
|
43 .grid path, .axis path { |
|
44 display: none; |
|
45 } |
|
46 |
|
47 </style> |
|
48 </head> |
|
49 <body> |
|
50 <script type="text/javascript"> |
|
51 |
|
52 var m = [10, 50, 20, 10], |
|
53 w = 960 - m[1] - m[3], |
|
54 h = 500 - m[0] - m[2], |
|
55 parse = d3.time.format("%Y-%m-%d").parse; |
|
56 |
|
57 // Scales. Note the inverted domain for the y-scale: bigger is up! |
|
58 var x = d3.time.scale().range([20, w - 20]), |
|
59 y = d3.scale.linear().range([h - 20, 20]); |
|
60 |
|
61 // Axes. |
|
62 var xAxis = d3.svg.axis().scale(x).orient("bottom"), |
|
63 yAxis = d3.svg.axis().scale(y).orient("right"); |
|
64 |
|
65 // An area generator. |
|
66 var area = d3.svg.area() |
|
67 .x(function(d) { return x(d.Date); }) |
|
68 .y0(y(0)) |
|
69 .y1(function(d) { return y(d.Close); }); |
|
70 |
|
71 var svg = d3.select("body").append("svg:svg") |
|
72 .attr("width", w + m[1] + m[3]) |
|
73 .attr("height", h + m[0] + m[2]) |
|
74 .append("svg:g") |
|
75 .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); |
|
76 |
|
77 svg.append("svg:rect") |
|
78 .attr("width", w) |
|
79 .attr("height", h); |
|
80 |
|
81 d3.csv("dji.csv", function(data) { |
|
82 |
|
83 // Parse dates and numbers. |
|
84 data.reverse().forEach(function(d) { |
|
85 d.Date = parse(d.Date); |
|
86 d.Close = +d.Close; |
|
87 }); |
|
88 |
|
89 // Compute the minimum and maximum date, and the maximum price. |
|
90 x.domain([data[0].Date, data[data.length - 1].Date]); |
|
91 y.domain([0, d3.max(data, function(d) { return d.Close; })]); |
|
92 |
|
93 svg.append("svg:g") |
|
94 .attr("class", "x grid") |
|
95 .attr("transform", "translate(0," + h + ")") |
|
96 .call(xAxis.tickSubdivide(1).tickSize(-h)); |
|
97 |
|
98 svg.append("svg:g") |
|
99 .attr("class", "y grid") |
|
100 .attr("transform", "translate(" + w + ",0)") |
|
101 .call(yAxis.tickSubdivide(1).tickSize(-w)); |
|
102 |
|
103 svg.append("svg:g") |
|
104 .attr("class", "x axis") |
|
105 .attr("transform", "translate(0," + h + ")") |
|
106 .call(xAxis.tickSubdivide(0).tickSize(6)); |
|
107 |
|
108 svg.append("svg:g") |
|
109 .attr("class", "y axis") |
|
110 .attr("transform", "translate(" + w + ",0)") |
|
111 .call(yAxis.tickSubdivide(0).tickSize(6)); |
|
112 |
|
113 svg.append("svg:path") |
|
114 .attr("class", "area") |
|
115 .attr("d", area(data)); |
|
116 }); |
|
117 |
|
118 </script> |
|
119 </body> |
|
120 </html> |