More d3.js table madness: sorting, prettifying and adding columns

The following post is a portion of the D3 Tips and Tricks document which is free to download. To use this post in context, consider it with the others in the blog or just download the pdf  and / or the examples from the downloads page:-)

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

When we last left our tables they were happily producing a faithful list of the data points that we had in our graph.

But what if we wanted more?

From the original contributors that bought you tables (Shawn Allen (http://jsfiddle.net/7WQjr/) on Google Groups (http://stackoverflow.com/questions/9268645/d3-creating-a-table-linked-to-a-csv-file)) and some neat additions from Christophe Viau (http://christopheviau.com/d3_tutorial/) comes extra coolness that I didn't include in the previous example :-).

Add another column of information:

Firstly, lets add another column of data to our table. To do this we want to have something extra in our tsv file to use, so let's resurrect our old friend data2.tsv that we have used for the graph with two lines previously. All we have to do to make this a reality is change the reference that loads `data.tsv` to `data2.tsv` here;

d3.tsv("data/data2.tsv", function(error, data) {

(this makes the assumption that you still have the data2.tsv file in place. If not, rush away and get it from d3noob.org's downloads page)

From here (and as promised in the previous chapter), it's just a matter of adding in the extra column you want (in this case it's the `open` column) like so;

var peopleTable = tabulate(data, ["date", "close", "open"]);

(and yes, if you're wondering, I have cheated slightly and changed the table indent to make it look slightly prettier)

So can we go further?

You know we can...

In the section where we get our data and format it, lets add another column to our array in the form of a difference between the `close` value and the `open` value (and we'll call it `diff`).

d3.tsv("data/data2.tsv", function(error, data) { 
        data.forEach(function(d) {
                d.date1 = parseDate(d.date);
                d.close = +d.close;
                d.open = +d.open;                                 //  <= added this for tidy house keeping
                d.diff = Math.round(( d.close - d.open ) * 100 ) / 100;  // <= The new diff column
        });

(the `Math.round` function is to make sure we get a reasonable figure to display, otherwise it tends to get carried away with decimal places)

So now we add in our new column to be tabulated;

var peopleTable = tabulate(data, ["date", "close", "open", "diff"]);

… and viola!

(And yes, I changed the table indent again. I am a serial offender and will continue to change it to suit)

Sorting on a column

So now with our four columns of awesome data, it turns out that we're really interested in the ones that have the highest `close` values. So we can sort on the `close` column and display by adding the following lines directly after the line where we declare the `peopleTable` function (which I will include in the code snipped below for reference).

var peopleTable = tabulate(data, ["date", "close", "open", "diff"]); 

peopleTable.selectAll("tbody tr") 
        .sort(function(a, b) {
                return d3.descending(a.close, b.close);
        });

Which works magnificently;

Prettifying (actually just capitalising the header for each column)

Just a little snippet that capitalises the headers for each row to make them look slightly more authoritative.

Add the following lines of code directly below the block that you just added for sorting the table;

 peopleTable.selectAll("thead th")
        .text(function(column) {
                return column.charAt(0).toUpperCase() + column.substr(1);
        });

This is quite a tidy little piece of script. You can see it selecting the headers (`selectAll("thead th")`), then the first character in each header (`column.charAt(0)`), changing it to upper-case (`.toUpperCase()`) and adding it back to the rest of the string (`+ column.substr(1)`).

With the ultimate result...

Add borders

Sure our table looks nice and neatly arranged, but would a border look better?

Well, here's one way to do it;

All we need to do is add a border style to our table by adding in this line here;

function tabulate(data, columns) {
    var table = d3.select("body").append("table")
            .attr("style", "margin-left: 200px")   // <= Remove the comma
            .style("border", "2px black solid"),   // <= Add this line in
        thead = table.append("thead"),
        tbody = table.append("tbody");

(don't forget to move the comma from the end of the `margin-left` line)

And the result is a tidy black border.

OK, so what about the individual cells?

No problem.

If we remember back to our CSS that we added in, we'll just tell each cell that we want a 1 pixel border buy amending the CSS for our table to this;

td, th {
    padding: 1px 4px;
    border: 1px black solid;
}

So now each cell has a slightly more subtle border like this;

Yikes! Not quite as subtle as I would have expected. I suppose it's another example of the code actually doing what you asked it to do. No problem, `border-collapse` to the rescue. Add the following line into here;

function tabulate(data, columns) {
    var table = d3.select("body").append("table")
            .attr("style", "margin-left: 200px")
            .style("border-collapse", "collapse")         // <= Add this line in.
            .style("border", "2px black solid"),
        thead = table.append("thead"),
        tbody = table.append("tbody");

How does that look?

Ahh.... Much more refined.

The `border-collapse` style tells the table to overlap each cells borders, rather than treat them as discrete entities. So in this case it looks a bit better.

This file has been saved as table-plus-addins.html and has been added into the downloads section on d3noob.org with the general examples files.

The above description (and heaps of other stuff) is in the D3 Tips and Tricks document that can be accessed from the downloads page of d3noob.org.