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:
| date | close | |
|---|---|---|
| 26-Dec-13 | 9092 | |
| 27-Dec-13 | 14401 | |
| 28-Dec-13 | 19865 | |
| 29-Dec-13 | 29077 | |
| 30-Dec-13 | 39068 | |
| 31-Dec-13 | 42231 | |
| 01-Jan-14 | 44369 | |
| 02-Jan-14 | 52146 | |
| 03-Jan-14 | 53236 | |
| 04-Jan-14 | 63008 | |
| 05-Jan-14 | 69698 | |
| 06-Jan-14 | 75013 | |
| 07-Jan-14 | 77284 | |
| 08-Jan-14 | 85131 | |
| 09-Jan-14 | 86780 | |
| 10-Jan-14 | 90012 | |
| 11-Jan-14 | 97154 | |
| 12-Jan-14 | 102770 | |
| 13-Jan-14 | 571 | |
| 14-Jan-14 | 9303 | |
| 15-Jan-14 | 18907 | |
| 16-Jan-14 | 26835 | |
| 17-Jan-14 | 31335 | |
| 18-Jan-14 | 40351 | |
| 19-Jan-14 | 49232 | |
| 20-Jan-14 | 52091 | |
| 21-Jan-14 | 60885 | |
| 22-Jan-14 | 70570 | |
| 23-Jan-14 | 79819 | |
| 24-Jan-14 | 83310 | |
| 25-Jan-14 | 88828 | |
| 26-Jan-14 | 98327 | |
| 27-Jan-14 | 101278 | |
| 28-Jan-14 | 106644 | |
| 29-Jan-14 | 114956 | |
| 30-Jan-14 | 116087 | |
| 31-Jan-14 | 121808 | |
| 01-Feb-14 | 130627 | |
| 02-Feb-14 | 132787 | |
| 03-Feb-14 | 137803 | |
| 04-Feb-14 | 140126 | |
| 05-Feb-14 | 149473 | |
| 06-Feb-14 | 153562 | |
| 07-Feb-14 | 162038 | |
| 08-Feb-14 | 166615 | |
| 09-Feb-14 | 172706 | |
| 10-Feb-14 | 173912 | |
| 11-Feb-14 | 181364 | |
| 12-Feb-14 | 2381 | |
| 13-Feb-14 | 4171 | |
| 14-Feb-14 | 7025 | |
| 15-Feb-14 | 8643 | |
| 16-Feb-14 | 15182 | |
| 17-Feb-14 | 16441 | |
| 18-Feb-14 | 22353 | |
| 19-Feb-14 | 24481 | |
| 20-Feb-14 | 34162 | |
| 21-Feb-14 | 36280 | |
| 22-Feb-14 | 43893 | |
| 23-Feb-14 | 48106 | |
| 24-Feb-14 | 49897 | |
| 25-Feb-14 | 59090 | |
| 26-Feb-14 | 61333 | |
| 27-Feb-14 | 70737 | |
| 28-Feb-14 | 71944 | |
| 01-Mar-14 | 80028 | |
| 02-Mar-14 | 88637 | |
| 03-Mar-14 | 91467 | |
| 04-Mar-14 | 98545 | |
| 05-Mar-14 | 99886 | |
| 06-Mar-14 | 102471 | |
| 07-Mar-14 | 111839 | |
| 08-Mar-14 | 115621 | |
| 09-Mar-14 | 124687 | |
| 10-Mar-14 | 131231 | |
| 11-Mar-14 | 138172 | |
| 12-Mar-14 | 147112 | |
| 13-Mar-14 | 156998 | |
| 14-Mar-14 | 3877 | |
| 15-Mar-14 | 12902 | |
| 16-Mar-14 | 21252 | |
| 17-Mar-14 | 25817 | |
| 18-Mar-14 | 30961 | |
| 19-Mar-14 | 38742 | |
| 20-Mar-14 | 47373 | |
| 21-Mar-14 | 54846 | |
| 22-Mar-14 | 64388 | |
| 23-Mar-14 | 70278 | |
| 24-Mar-14 | 79880 | |
| 25-Mar-14 | 89640 | |
| 26-Mar-14 | 96169 | |
| 27-Mar-14 | 105084 | |
| 28-Mar-14 | 112879 | |
| 29-Mar-14 | 116528 | |
| 30-Mar-14 | 124315 | |
| 31-Mar-14 | 133540 | |
| 01-Apr-14 | 142947 | |
| 02-Apr-14 | 144181 | |
| 03-Apr-14 | 152838 | |
| 04-Apr-14 | 160572 | |
| 05-Apr-14 | 165469 | |
| 06-Apr-14 | 167850 | |
| 07-Apr-14 | 175455 | |
| 08-Apr-14 | 180608 | |
| 09-Apr-14 | 189953 | |
| 10-Apr-14 | 197694 | |
| 11-Apr-14 | 206864 | |
| 12-Apr-14 | 208465 | |
| 13-Apr-14 | 4786 | |
| 14-Apr-14 | 12702 | |
| 15-Apr-14 | 14794 | |
| 16-Apr-14 | 23119 | |
| 17-Apr-14 | 30103 | |
| 18-Apr-14 | 31854 | |
| 19-Apr-14 | 34133 | |
| 20-Apr-14 | 35893 | |
| 21-Apr-14 | 38317 | |
| 22-Apr-14 | 46856 | |
| 23-Apr-14 | 50816 | |
| 24-Apr-14 | 56674 |
| require 'date' | |
| DELIM = "\t" | |
| puts ['date', 'close'].join(DELIM) | |
| DAYS = 120 | |
| d = DateTime.now - DAYS | |
| amt = 0 | |
| sofar = 0 | |
| DAYS.times do |day| | |
| d += 1 | |
| diff = 1000 + rand(9000) | |
| amt += diff | |
| sofar += diff | |
| if day % 30 == 18 | |
| amt -= sofar - rand(2000) | |
| sofar = 0 | |
| end | |
| df = d.strftime("%d-%b-%y") | |
| puts [df, amt].join(DELIM) | |
| end |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .x.axis path { | |
| display: none; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: steelblue; | |
| stroke-width: 1.5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| function getParameterByName(name) { | |
| name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); | |
| var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"), | |
| results = regex.exec(location.search); | |
| return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); | |
| } | |
| var margin = {top: 10, right: 10, bottom: 20, left: 20}, | |
| width = 300; | |
| height = 100; | |
| 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) | |
| .tickFormat(d3.time.format("%b %d")) | |
| .ticks(d3.time.weeks, 2) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var line = 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 + ")"); | |
| d3.tsv(getParameterByName('dataUrl'), function(error, data) { | |
| data.forEach(function(d) { | |
| d.date = parseDate(d.date); | |
| d.close = +d.close; | |
| }); | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| y.domain(d3.extent(data, function(d) { return d.close; })); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text("Balance ($)"); | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "line") | |
| .attr("d", line); | |
| }); | |
| </script> |
