Two graphs arranged using bootstrap

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.

<!DOCTYPE html>
<meta charset="utf-8">

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>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://code.jquery.com/jquery.js to a secure url

https://d3js.org/d3.v3.min.js

https://code.jquery.com/jquery.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js