| license: gpl-3.0 |
This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:
forked from mbostock's block: Line Chart
| [ | |
| results: | |
| { | |
| "created_date":"2017-03-23", | |
| "count":"2" | |
| }, | |
| { | |
| "created_date":"2017-03-26", | |
| "count":"4" | |
| }, | |
| ] |
| date | close | |
|---|---|---|
| 24-Apr-07 | 93.24 | |
| 24-Apr-07 | 93.24 | |
| 24-Apr-07 | 93.24 | |
| 24-Apr-07 | 93.24 | |
| 24-Apr-07 | 93.24 | |
| 25-Apr-07 | 95.35 | |
| 26-Apr-07 | 98.84 | |
| 27-Apr-07 | 99.92 | |
| 30-Apr-07 | 99.80 | |
| 1-May-07 | 99.47 | |
| 2-May-07 | 100.39 | |
| 3-May-07 | 100.40 | |
| 4-May-07 | 100.81 | |
| 7-May-07 | 103.92 | |
| 8-May-07 | 105.06 | |
| 9-May-07 | 106.88 | |
| 10-May-07 | 107.34 | |
| 11-May-07 | 108.74 | |
| 14-May-07 | 109.36 | |
| 15-May-07 | 107.52 | |
| 16-May-07 | 107.34 | |
| 17-May-07 | 109.44 | |
| 18-May-07 | 110.02 | |
| 21-May-07 | 111.98 | |
| 22-May-07 | 113.54 | |
| 23-May-07 | 112.89 | |
| 24-May-07 | 110.69 | |
| 25-May-07 | 113.62 | |
| 29-May-07 | 114.35 | |
| 30-May-07 | 118.77 | |
| 31-May-07 | 121.19 |
| <!DOCTYPE html> | |
| <svg width="960" height="500"></svg> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| d3.json("data.json", function(data) { | |
| var canvas = d3.select("body").append("svg") | |
| .attr("width", 500) | |
| .attr("height", 500) | |
| .attr("border", "black") | |
| var svg = d3.select("svg"), | |
| margin = {top: 20, right: 20, bottom: 30, left: 50}, | |
| width = +svg.attr("width") - margin.left - margin.right, | |
| height = +svg.attr("height") - margin.top - margin.bottom, | |
| g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| var group = canvas.append("g") | |
| .attr("transform", "translate(100,10)") | |
| var line = d3.svg.line() | |
| .x(function(d, i) { | |
| return d.x; | |
| }) | |
| .y(function(d, i) { | |
| return d.y; | |
| }); | |
| group.selectAll("path") | |
| .data(data).enter() | |
| .append("path") | |
| .attr("d", function(d){ return line(d) }) | |
| .attr("fill", "none") | |
| .attr("stroke", "green") | |
| .attr("stroke-width", 3); | |
| }); | |
| </script> |