Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active November 30, 2019 18:34
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save d3noob/6a3b59149cf3ebdb3fc4 to your computer and use it in GitHub Desktop.
Two graphs arranged using bootstrap
license: mit

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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment