D3.js Tips and Tricks: Arrange more than one d3.js graph with Bootstrap

The following post is a portion of the D3 Tips and Tricks book which is free to download. To use this post in context, consider it with the others in the blog or just download the the book as a pdf / epub or mobi .

----------------------------------------------------------

In the previous sections we have seen how to assign ID selectors so that we anchor our d3.js graphs to a particular section of our web page. We have also seen how to utilise Bootstrap to divide up our web page into different sections. Now we will bring the two examples together and assign ID selectors to sections set up with Bootstrap.

We will start with our simple two graph example (as seen on bl.ocks.org here).

We will need to make sure we have our `bootstrap.min.js` and `bootstrap.min.css` files in the appropriate place.

Then insert the code (as below) to use `bootstrap.min.css` at the start of the file (just before the `<style>` tag would be good);

<head>
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>

Then include the lines to load the `jquery.js` and `bootstrap.min.js` files just after the line that loads the `d3.js` file.

<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

What we'll do to make things simple is to create a Bootstrap layout that is made up of a single row with just two `span6` elements in it. The following code will do this nicely and should go after the `</style>` tag and before the `<body>` tag.

<div class="row">
  <div class="span6"></div>
  <div class="span6"></div>
</div>

Now we add in our ID selectors in a clever way by incorporating them into the divs that we have just entered. So remembering the code for our original two selectors...

<div id="area1"></div>
<div id="area2"></div>

... we can incorporate these into our row and spans as follows;

<div class="row">
  <div class="span6" id="area1"></div>
  <div class="span6" id="area2"></div>
</div>

The last thing we need to do is to change the `d3.select` from selecting the `body` of the web page to selecting our two new ID selectors `area1` and `area2`.

var chart1 = d3.select("#area1")
    .append("svg")

... and ...

var chart2 = d3.select("#area2")
    .append("svg")

Et viola! Our new web page has two graphs which are settled into their own specific section.

To provide another example of the flexibility of the layout schema, we can take our row / span layout section and adapt it so that our graphs are in two separate sections with a third, smaller, section in the middle describing the graphs.

If we start with our previously entered spans with their ID selectors;

<div class="row">
  <div class="span6" id="area1"></div>
  <div class="span6" id="area2"></div>
</div>

We can change the spans to `span5` and add an additional `span2` in between with some text (remember, the total number of spans has to add up to 12).

<div class="row">
  <div class="span6" id="area1"></div>
  <div class="span2"> 
    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="span6" id="area2"></div>
</div>

And the end result is...

Neither of these examples is particularly elegant in terms of it's layout.I am relying on you to bring the prettiness!

The description above (and heaps of other stuff) is in the D3 Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).