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