Last active
August 29, 2015 14:11
-
-
Save parklander/c7b83002203d335c3d39 to your computer and use it in GitHub Desktop.
Graph with Features
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment