Getting started using Bootstrap with d3.js

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 .

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

Using Bootstrap with d3.js

Visualising data on a web page is a noble pursuit in itself, but often there is a need to be able to associate the visualization with other content (I know! It came a surprise to me as well).

Developing a web page has become an activity that just about anyone can accomplish for better of for worse and I'm not going to claim to demonstrate any mastery of design or artistic flair. However, I have found using Bootstrap is a great way to make structural arrangements to a web page, it's simple to use and there is a fantastic range of features that can provide additional functionality to your pages and sometimes more importantly, a consistent 'feel' across many pages.

What is Bootstrap?

Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS based design templates for typography, forms, buttons, charts, navigation and other interface components, as well as optional JavaScript extensions.

Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. The word 'framework' is probably the best descriptive term, since it's purpose is to provide structure to content. Perhaps in a similar way that d3.js provides structure to data.

Some of Bootstrap's most important features include;

• A layout grid
• Interface components

Layout grid

A default standard 940 pixel width grid layout which allows you to quickly arrange a page structure. This allows you to plan and implement what you're going to place on the page with a minimum of fuss. You can change any of the pre-set options if you wish and you can also implement a 'fluid' row option where bootstrap will dynamically size a column's width using a percentage instead of a fixed pixel value.

It's this feature that first attracted me to using Bootstrap and while I may be using a complex tool for a simple task, it does that task very well.

Interface components

A large number of interface components are also provided. These include standard buttons, labels, pre-formatted warning and system messages, navigation controls, wizard controls, pagination, and breadcrumbs.

There is a dizzying array of options available for web designers and while I encourage you to use them, I can't promise to explain the nuances of their use, since I'm a humble journeyman in this world :-).

Incorporating Bootstrap into your html code.

Bootstrap is a remarkably flexible product. Looking at the customize page where we can configure a customized version of Bootstrap, we could be forgiven for thinking that the process of installing it would be difficult. However, in the spirit of keeping things simple, we'll make the process crude, but effective.

You could easily just follow along with the instructions on the 'getting started' page (and I recommend you do). But the following are important points.

Make sure you remember that you will need to download the appropriate scripts from the 'getting started' page.;

You will need to copy the bootstrap.js file (or the minimised version (bootstrap.min.js)) to a place where is can be reached and loaded by your script. While you're there, you will need to include a line to load the jquery.js file (which is a dependency of Bootstrap (not that it gets talked about much)) The following two lines, included with the line that loads d3.js, would do the job nicely (assuming that you've copied the bootstrap.min.js file into the js directory);

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

(Make sure that the jquery line comes before the bootstrap line, because it won't work the other way round.)
You will also need to copy the bootstrap.css (or the minimised version (bootstrap.min.css)) to a place where is can be reached and loaded by your script. The following lines show it being loaded from the css directory with the line that loads the script in the <head> section.

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

</head>

That should be all that's required! Of course as I mentioned earlier, there are plenty of other plug-in scripts that could be loaded to do fancy things with your web page, but we're going to try and keep things simple. Following blog posts will start the process of looking at how to layout separate graphs on a web page and then how to do the same thing with Bootstrap.

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 :-)).