Add an HTML Table to Your Graph

So graphs and graphics are D3’s bread and butter? Hmm…

Well, yes and no.

Yes, D3 has extraordinary powers for presenting and manipulating images on a web page. But if you’ve read through the entirety of the D3.js’s main site (haven’t we all), you will recall that D3 actually stands for Data-Driven Documents. It’s not necessarily about the pretty pictures and the swirling cascade of color. It’s about generating something in a web browser based on data.

This transitions nicely into consideration of adding a table of information that can accompany your graph. It could just as easily (or easier) be stand-alone, but for the sake of continuity, we’ll use the graph.

What we’ll do is add the data that we’ve used to make our simple graph under the graph itself. To make sure that it’s all nicely aligned, we’ll place it in a table.

It should end up looking a little like this (and this has been cropped slightly at the bottom to avoid expanding the page with rows of numbers/dates).

HTML tables

I’m walking a fine line here since I have a remarkably small amount of knowledge on HTML tables. So I’ll try to provide a brief overview as I understand it and as I see it represented in the code below.

Tables are made up of rows, columns, and data (that goes in each cell). All you need to do to successfully place a table on a web page is to lay out the rows and columns in a logical sequence using the appropriate HTML tags and you’re away.

For example, here’s the total HTML code for a web page to display a simple table:

This will result in a table that looks a little like this:

The entire table itself is enclosed in <table> tags. Each row is ...