Arranging more than one d3.js graph on a web page

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 .

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

Arranging more than one graph on a web page.

We'll start with the presumption that we want to be able to display two separate graphs on the same web page. The example we will use is clearly contrived, but we should remember that it's the process we're interested in in this case, not the content.

First make a page with two graphs

This is surprisingly easy. If you start with the simple graph that we initially used as our learning example at the start of the book, and duplicate the section that looks like the following, you are 99% of the way there.

// Adds the svg canvas
var chart2 = d3.select("body")
    .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("data2.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);

});

For simplicity, I have generated an example you can use as a starting point on bl.ocks.org here.
The differences from the original simple graph example are;

• The graphs are slightly smaller (to make it easier to display the graphs as they move about).
• I have used *.csv files for the data and there are two different data files so that they look different and we can differentiate between the graphs.
• Most importantly, I have declared the two charts with different variable names (one as chart1 and the other as chart2).

The different variable names are important, because if you leave them with the same identifier, the web page decides that what you're trying to do is to put all your drawing data into the same space. The end result is two graphs trying to occupy the same space and looks a bit like this...

The example with the correct (different) variable labels should look a little like this...

The first thing I want to point out about how the graphs are presented is that they are both 'attached' to the same point on our web page. Both of the graphs select the body of the web page and then append a svg element to it;

var chart2 = d3.select("body")
    .append("svg")

This has the effect of appending the graphs to the same anchor point. Interestingly, if we narrow the window of our web browser to less that the width of both of our graphs side by side, the browser will automatically move one of the graphs to a position below the first in much the same way that text will wrap on a page.

For a very simple mechanism of putting two graphs (or any two d3.js generated images) on a single page, this will work, but we don't have a lot of control over the positioning.

Arrange the graphs with separate anchors

To gain a little more control over where the graphs are placed we will employ ID selectors.

An ID selector is a way of naming an anchor point on an HTML page. They can be defined as "*a unique identifier to an element*". This means that we can name a position on our web page and then we can assign our graphs to those positions.

This can be done simply by placing div tags in our html file in an appropriate place (here I've put them in between the<style> section and the <body>).

</style>

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

<body>

Remembering that the tag defines a division or a section in an HTML document. Therefore we are labelling specific sections in our web page .

Now all we need to do is to tell each graph to append itself to either of these ID selectors. We do this by replacing the selected section in our JavaScript code with the appropriate ID selector as follows;

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

.. .and...

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

A couple of points to note:
When we reference our ID selectors in the code (other than when we we set them with id="area1") we need to put a hash (#) in front of the selector for the HTML to recognise it.
We can only use a single ID selector in a single place. This might sound like common sense, but whatever the temptation, don't go trying to assign the same ID selector to more than one place (You can certainly assign more than one item to an ID selector (for instance, you could append chart2 to area1 (var chart2 = d3.select("#area1")) but an ID selector is a unique identifier of a position.).

With these divs added, when you browse to the file, you will find that it looks like this;

This looks the same as when the two graphs were wrapping when the browser was narrowed. However, this time the browser is wide enough to support the two side by side, but they won't position themselves that way. This is because each div *di*vides the web page. The top graph is in the div with the ID selector area1 and the bottom graph is in the div with the ID selector area2. These divs effectively extend for the width of the web page.

The situation that we now find ourselves in is that we have control over where the graphs will be anchored, but we don't have much flexibility for arranging those anchors. This is where Bootstrap comes in.

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