This is a follow on from the simple d3.js graph used as an example in the book D3 Tips and Tricks.
It is aimed at exploring some features of d3.js and should be taken in context with the text of the book which can be downloaded for free from Leanpub.
forked from d3noob's block: d3.js Graph with many features
| date | close | |
|---|---|---|
| 1-May-12 | 58.13 | |
| 30-Apr-12 | 53.98 | |
| 27-Apr-12 | 67.00 | |
| 26-Apr-12 | 89.70 | |
| 25-Apr-12 | 99.00 | |
| 24-Apr-12 | 130.28 | |
| 23-Apr-12 | 166.70 | |
| 20-Apr-12 | 234.98 | |
| 19-Apr-12 | 345.44 | |
| 18-Apr-12 | 443.34 | |
| 17-Apr-12 | 543.70 | |
| 16-Apr-12 | 580.13 | |
| 13-Apr-12 | 605.23 | |
| 12-Apr-12 | 622.77 | |
| 11-Apr-12 | 626.20 | |
| 10-Apr-12 | 628.44 | |
| 9-Apr-12 | 636.23 | |
| 5-Apr-12 | 633.68 | |
| 4-Apr-12 | 624.31 | |
| 3-Apr-12 | 629.32 | |
| 2-Apr-12 | 618.63 | |
| 30-Mar-12 | 599.55 | |
| 29-Mar-12 | 609.86 | |
| 28-Mar-12 | 617.62 | |
| 27-Mar-12 | 614.48 | |
| 26-Mar-12 | 606.98 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 12px Arial; | |
| } | |
| text.shadow { | |
| stroke: #fff; | |
| stroke-width: 2.5px; | |
| opacity: 0.9; | |
| } | |
| path { | |
| stroke: steelblue; | |
| stroke-width: 2; | |
| fill: none; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: grey; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| .grid .tick { | |
| stroke: lightgrey; | |
| stroke-opacity: 0.7; | |
| shape-rendering: crispEdges; | |
| } | |
| .grid path { | |
| stroke-width: 0; | |
| } | |
| .area { | |
| fill: lightsteelblue; | |
| stroke-width: 0; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var margin = {top: 30, right: 20, bottom: 35, left: 50}, | |
| width = 600 - margin.left - margin.right, | |
| height = 270 - margin.top - margin.bottom; | |
| var parseDate = d3.time.format("%d-%b-%y").parse; | |
| var x = d3.time.scale().range([0, width]); | |
| var y = d3.scale.linear().range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(5); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5); | |
| var area = d3.svg.area() | |
| .x(function(d) { return x(d.date); }) | |
| .y0(height) | |
| .y1(function(d) { return y(d.close); }); | |
| var valueline = d3.svg.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.close); }); | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", | |
| "translate(" + margin.left + "," + margin.top + ")"); | |
| // function for the x grid lines | |
| function make_x_axis() { | |
| return d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .ticks(5) | |
| } | |
| // function for the y grid lines | |
| function make_y_axis() { | |
| return d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .ticks(5) | |
| } | |
| // Get the data | |
| d3.csv("data.csv", function(error, data) { | |
| data.forEach(function(d) { | |
| d.date = parseDate(d.date); | |
| d.close = +d.close; | |
| }); | |
| // Scale the range of the data | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| y.domain([0, d3.max(data, function(d) { return d.close; })]); | |
| // Add the filled area | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "area") | |
| .attr("d", area); | |
| // Draw the x Grid lines | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(make_x_axis() | |
| .tickSize(-height, 0, 0) | |
| .tickFormat("") | |
| ) | |
| // Draw the y Grid lines | |
| svg.append("g") | |
| .attr("class", "grid") | |
| .call(make_y_axis() | |
| .tickSize(-width, 0, 0) | |
| .tickFormat("") | |
| ) | |
| // Add the valueline path. | |
| svg.append("path") | |
| .attr("d", valueline(data)); | |
| // Add the X Axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| // Add the Y Axis | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| // Add the text label for the X axis | |
| svg.append("text") | |
| .attr("transform", | |
| "translate(" + (width/2) + " ," + | |
| (height+margin.bottom) + ")") | |
| .style("text-anchor", "middle") | |
| .text("Date"); | |
| // Add the white background to the y axis label for legibility | |
| svg.append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("x", margin.top - (height / 2)) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .attr("class", "shadow") | |
| .text("Price ($)"); | |
| // Add the text label for the Y axis | |
| svg.append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("x", margin.top - (height / 2)) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Price ($)"); | |
| // Add the title | |
| svg.append("text") | |
| .attr("x", (width / 2)) | |
| .attr("y", 0 - (margin.top / 2)) | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "16px") | |
| .style("text-decoration", "underline") | |
| .text("Price vs Date Graph"); | |
| }); | |
| </script> | |
| </body> |