How do I elegantly present tabular, statistical data online?

August 30, 2012 7:37 AM

How do I elegantly present tabular, statistical data online and automatically? I'd love some examples of beautifully presented tabular data online - something that works natively in a browser, ideally also on a tablet and mobile as well. Some interactivity (sorting, filtering) also OK but priority is usability and elegance like you'd find in printed statistical abstracts. Bonus points for open source web tools / frameworks that could help automate this from a database!

Right now, I find some of the most elegant presentations of tabular data seem to be locked in PDFs where folks have control of typesetting etc. Take this example from the US census bureau for instance. Or a better one - Page 188 from the World Bank's World Development Indicators print edition - they also have some reasonable online tables.

What's particularly cool about these?

- They're very information dense: In the PDF, Numbers in italics mean something (e.g estimates), they've got superscript annotation on individual data points, symbols for different types of missing values and categories of aggregation.

- They're easy to read: notice how numbers are right-aligned in vertical grid-free columns, simple bolding and highlighting delimit sections

- The space they're in provides context: In their document form, those tables are right next to notes and definitions with footnotes and references for methodologies and data sources etc.

Imagine you had a database full of statistical data along side all the metadata, sources, references, notes and presentation rules and you wanted to automatically create beautiful online statistical tables out of it - how would you do it and what are your favorite examples of it being done?

posted by tkbarbarian to computers & internet (9 answers total)

What do you mean by 'automatically'?
posted by thelonius at 7:38 AM on August 30, 2012

@thelonius - by automatically, I mean something that can be database-driven and generated dynamically rather than carefully hand-coding HTML to look like the PDF examples I've linked to. Thanks for looking!
posted by tkbarbarian at 7:42 AM on August 30, 2012

Here is an example R and googlevis generating dynamic charts and tables. THis uses RPubs which I have not used myself yet so dont know if its ready for prime time.
posted by shothotbot at 7:45 AM on August 30, 2012

@shothotbot - thanks! Looks useful but probably looking for something a little more mature / suitable for large scale use. Don't any national statistics offices do this well? All the ones I've checked just link to PDFs or XLS files.
posted by tkbarbarian at 8:03 AM on August 30, 2012

Would something like jQuery Data Tables would be useful?
posted by bcwinters at 8:51 AM on August 30, 2012 [2 favorites]

IBM has a tool called manyeyes that sounds like a good fit for you. You upload your data, and you can produce a variety of different kinds of graphs. At the end, you can embed them in a webpage. They have some very cool graph and chart types.

Caveats: any data you upload becomes public, and I haven't found a way to export the figures in any other format (e.g. PDF, something you can put in a paper). It's really geared toward sharing data publicly on the web. But it sounds like that's what you're looking for.

Their webpage also has some nice example graphs and tutorials.
posted by pompelmo at 9:28 AM on August 30, 2012

Thanks @pompelo - I'm a fan of manyeyes, but what I'm looking for is specifically online presentation of tabular data.

There's a whole bunch of reasons why it's good to have both tables and graphics online and it's a shame that there seems to be so much effort into making good online graphics but relatively little effort in making good online tables for data presentation.

Perhaps it's just not considered a "hard problem" - if so, why can't I find any really examples of data presented in tables online?
posted by tkbarbarian at 10:54 AM on August 30, 2012

A complete answer to your question is a little hard to present in AskMeFi, so here's a solution to create elegant tables that I've just written and published as an article on my blog. You might also be interested in reading this post, too.

In short: HTML 3.2 proposed a bunch of ways to neatly presentation of tables, but they were never really taken on by browsers. It's really more of a typographic issue, so the solution is largely found in using OpenType fonts and adding appropriate CSS3 to your web page.

JavaScript, as pointed out, is used for sorting table data. Typically PHP would be employed to bring the data in from the database; you'd present it on the page with some CSS3 (floating the table to the right or left to wrap text around it as appropriate) and enable user options for arranging the data with JQuery (while the datatables plugin bcwinters refers to above is very powerful, you may find it overkill, depending on circumstances: tablesorter might be a better option in some cases).

The nice part about all of this is that while it's a little complex to set up, once you have the JavaScript behaviors and CSS presentational rules written for your site you can simply hook into them over and over again to consistently display all the tables you wish.
posted by Bora Horza Gobuchul at 12:36 PM on August 30, 2012

@Borza Yes! I presume you could also set up a print-friendly style sheet for this stuff?
posted by tkbarbarian at 12:48 PM on August 30, 2012