This is a follow on from the multiple simple graphs on one page used as an example in the book D3 Tips and Tricks.
It demonstrates the loading of two graphs and a paragraph of text and organising them using twitter bootstrap. In the default display on bl.ocks.org the graphs and text may appear vertically, but if you open in a full window they should look more as anticipated.
It should be taken in context with the text of the book which can be downloaded for free from Leanpub.
| 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 |
| date | close | |
|---|---|---|
| 27-Apr-12 | 1167.00 | |
| 26-Apr-12 | 1189.70 | |
| 25-Apr-12 | 1199.00 | |
| 24-Apr-12 | 1110.28 | |
| 23-Apr-12 | 1166.70 | |
| 8-Apr-12 | 1646.23 | |
| 7-Apr-12 | 1663.23 | |
| 6-Apr-12 | 1566.23 | |
| 5-Apr-12 | 1363.68 | |
| 4-Apr-12 | 1164.31 | |
| 3-Apr-12 | 869.32 | |
| 2-Apr-12 | 618.63 | |
| 30-Mar-12 | 559.55 | |
| 29-Mar-12 | 369.86 | |
| 28-Mar-12 | 160.62 | |
| 27-Mar-12 | 61.48 | |
| 26-Mar-12 | 100.98 |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> | |
| </head> | |
| <style> /* set the CSS */ | |
| body { font: 12px Arial;} | |
| path { | |
| stroke: steelblue; | |
| stroke-width: 2; | |
| fill: none; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: grey; | |
| stroke-width: 1; | |
| shape-rendering: crispEdges; | |
| } | |
| </style> | |
| <div class="row"> | |
| <div class="col-md-5" id="area1"></div> | |
| <div class="col-md-2"> | |
| To the left is a graph showing the anticipated profits | |
| of the 'Widget Incorporated' company. | |
| On the right is the anticipated cost of production as | |
| the number of Widgets is increased. | |
| Clearly we will be RICH! | |
| </div> | |
| <div class="col-md-5" id="area2"></div> | |
| </div> | |
| <body> | |
| <!-- load the JavaScript libraries --> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://code.jquery.com/jquery.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> | |
| <script> | |
| // Set the dimensions of the canvas / graph | |
| var margin = {top: 30, right: 20, bottom: 30, left: 50}, | |
| width = 400 - margin.left - margin.right, | |
| height = 220 - margin.top - margin.bottom; | |
| // Parse the date / time | |
| var parseDate = d3.time.format("%d-%b-%y").parse; | |
| // Set the ranges | |
| var x = d3.time.scale().range([0, width]); | |
| var y = d3.scale.linear().range([height, 0]); | |
| // Define the axes | |
| var xAxis = d3.svg.axis().scale(x) | |
| .orient("bottom").ticks(5); | |
| var yAxis = d3.svg.axis().scale(y) | |
| .orient("left").ticks(5); | |
| // Define the line | |
| var valueline = d3.svg.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.close); }); | |
| // Adds the svg canvas | |
| var chart1 = d3.select("#area1") | |
| .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 + ")"); | |
| // Get the data | |
| d3.csv("data-1.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 valueline path. | |
| chart1.append("path") | |
| .attr("class", "line") | |
| .attr("d", valueline(data)); | |
| // Add the X Axis | |
| chart1.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| // Add the Y Axis | |
| chart1.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| }); | |
| // Adds the svg canvas | |
| var chart2 = d3.select("#area2") | |
| .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 + ")"); | |
| // Get the data | |
| d3.csv("data-2.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 valueline path. | |
| chart2.append("path") | |
| .attr("class", "line") | |
| .attr("d", valueline(data)); | |
| // Add the X Axis | |
| chart2.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| // Add the Y Axis | |
| chart2.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| }); | |
| </script> | |
| </body> |
