John HilbertPortfolioNo comments
     

I recently have been doing more and more data visualization.  Mostly I have been leaning towards open source and web-based options (my current favorite is d3.js which primarily works with SVG elements). Charts and graphs I have had little issue with.  Where I ran into problems, oddly, was with tables.

This begged the question: Do we need better web-based tables?

The options I have been primarily HTML, DIV, or SVG based.

HTML

Anyone working with HTML has at some point coded a table.  The procedure usually goes like this:

<table>
  <tr>
    <td>Row 1 Column 1</td>
    <td>Row 1 Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Column 1</td>
    <td>Row 2 Column 2</td>
  </tr>
</table>

This is fine however designing something like this becomes a bit more troublesome.

 
Column Group
Column Group
Column Group
C1
C2
C3
C1
C2
C3
C1
C2
C3
Row Group
(rotate)
1
Label
 R1C1
 
 
 
 
 
 
 
 
2
Label
 R2C1
 
 
 
 
 
 
 
 
3
Label
 
 
 
 
 
 
 
 
 
Total
 
R4C2
2
 
 
 
 
 
 
Row Group
(rotate)
1
Label
 
 
 
 
 
 
 
 
 
2
Label
 
 
 
 
 
 
 
 
 
3
Label
 
 
 
 
 
 
 
 
 
Total
 
2
3
 
 
 
 
 
 
Supplementary Row
 
1 / 2
2 / 3
 

Notice the column and row groups span multiple cells.  HTML does handle this, however keep in mind we will map data in via java script so I would have to find each cell at some point. For instance R1C1 is actually the 3rd <td> tag in the 3rd <tr>tag however R2C1 is NOT the 3rd<td>tag in the 4th <tr>.  Actually it is the 2nd <td> tag since the row group is in R1 but not R2.  Anyone want to take a guess where R4C2 is?

This does not only pose a problem for data mapping, but also CSS.  Since alternating columns are typically done by the nth-child of the <tr>tag (C1 is the 4th child in R1, but the 3rd child in R2-R3, and the 2nd in R4).  Styles would need to be mapped to each cell by java script also.

Another issue, though minor, would be rotating the ‘Row Group’ text.  It appears the way to do this is browser specific.  Not a deal breaker, but still unwanted.

The final and major gripe would deal with interactivity. Collapsing and sorting has been applied for simple tables, however a specific fix would be needed here because of the complexity.  For instance if I wanted to sort on C1, I only wanted both 1-3 groups to reorder, leaving the totals and supplementary rows in place.

DIV

Using CSS and DIV tags is very similar to the old-school HTML.  I will not post an example because it is exactly like HTML however all the tags are now <div class = "xxx">.  The class is what would set the location and style of a cell.  Because of this, specific cells are easy to locate.

This method does have its proponents, since slickGrid and CrossFilter appear to create tables this way, however I foresee some lingering issues to remain.

SVG

This route completely breaks the mold. For those not familiar with Scalable Vector Graphics you basically draw everything you need.  For example in a table you would need to create each cell which would be a rectangle and text.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect 
    width="100" 
    height="20" />
  <text 
    x="50" 
    y="10" 
    fill="white" 
    text-anchor="middle"
    dy = "5px"
    style="font-size:15px; 
           text-align:center; ">
    I love SVG</text>
</svg>

This may appear to be quite a pain, however with D3 it could easily be accomplish with java script. Of course we would have similar work to do with the other methods, so what do we gain?

Well in my opinion its all the power of the SVG – D3 combo. For instance:

  • Collapsing and sorting should be easier since I can manipulate any SVG element individually. Additionally D3 already has examples on collapsing hierarchical tree.
  • Also because of this you get animations. These include zooming a cell on hover and transitions when data is updated or sorted.
  • Finally, though not as important, is consistency. Since all the other charts in a dashboard would be SVG, why not the table too.

Your Thoughts

So why the hesitation? Well since I am a bit new to this, Google is my friend and honestly I have not really found anyone making this leap. I have found many packages to give interactivity to HTML tables but no one appears to have made a framework for tables in SVG. I was starting to think that there was actually good reason not to do what I am suggesting. That was until I saw the post, Anyone have a great data grid, or want to work on one?. This appeared to delve more into a DIV-based approach and interfacing with slickGrid. However further down the thread was Chris Viau thoughts (must see) on doing what I suggest.  Further more Mike Bostock (developer of D3) made a SVG implementation for the NYTimes. The latter I take as Mike tipping his hat to me to use SVG for tables.

What I ask is this:

  • Has anyone thought about jumping ship like me and start using SVG for tables?
  • Does anyone else have some pro/cons of doing this?
  • If anyone has begun using SVG for tables, any tips?
  • More philosophically, what is the future of web tables?

Leave a comment