Exhibit Transforms Your Spreadsheet into an Interactive Web Page

Turn a boring old spreadsheet into an interactive web-based map, timeline, or table with some simple HTML using the free, open source Exhibit project. Exhibit takes data sets up to about 500 rows, plots locations on a Google Map, dates on an interactive timeline, and displays images and links in a tabular or thumbnail view. The viewer can sort, search, and filter data in any Exhibit view without reloading the page. You can make Exhibit do all this with a single HTML file and a spreadsheet–no hardcore programming required.

To try it out, yesterday I threw together my first Exhibit visualization called Broadway Shows I’ve Seen in the Past 17 Years. Why? Well, I’m looking to get rid of the stack of Playbills gathering on my shelf, but I want to remember what shows I saw and when. So I photographed each Playbill cover (see this Flickr set), entered information about each show into this Google spreadsheet, and plugged the two into Exhibit using HTML and CSS ripped off from other Exhibit examples. Play with it for yourself here, or take a tour of of what it produced below.

A Few Exhibit Views in Action

To switch between views in my Broadway shows Exhibit, click on the top row of links (Table, Thumbnails, Map, Timeline, Tiles). Let’s take a look at each one.

The first and default view is a simple tabular view (“Table”), which looks a lot like your spreadsheet. Here you can click on any column title to sort items, search by keyword, or filter by “facets” I set up on the right sidebar (whether the show was a musical or play, the theater, and out of the screenshot, notable cast members).

To view the data lined up like blocks, try thumbnail view, where I used the larger version of my Playbill images to make a more visual representation of my list. By default I have the Playbills here sorted by the show type (Musical or Play) and grouped as such. Click on the “sorted by” link to change those settings.

Those two examples are common ways to represent lists. The map and timeline view is where things get really interesting.

To hook up a Google Map to your data, you’ll need to include latitude and longitude coordinates in your spreadsheet like I did. (To easily get those, copy and paste your address column into this helpful batch-geocoding web page.) Here’s what a map of the theaters I’ve attended looks like.

The timeline–which I fell in love with back in 2006–is also a super-cool way to view date information in your data. Color code the points on your timeline (orange points are musicals and blue are plays, in my case) and drag and drop the timeline back and forward to see the plotted points. Click on any point to see details about the show itself. Sweeping back in time, you can see I attended many more shows in the late ’90’s than any other period.

More Examples of Exhibit in Action

My measly Playbill collection is a very modest and self-serving use of this powerful tool. Check out a few prettier and more educational Exhibit examples in action:

• U.S. Presidents–check out a timeline of each presidency, and maps of birth and death places in the U.S.
• Billionaires in history–neat map visualization that shows you the money.
• U.S. Cities by Population–NYC has a big old circle over it.

Make Your Own Exhibit

An Exhibit consists of two files: one HTML file and one data file (which needs to be JSON in format, which Google spreadsheets supports). Right now, to make your own Exhibit, you’ve got to be pretty good at wrangling HTML (and CSS, if you want it to look nice), but there are plenty of tutorials and examples to walk you through things (and to rip off good code from).

To make your own, all the documentation you need is at the Exhibit wiki Author’s section.

Beginners, you want to step through the Getting Started Tutorial first. Then, once you’ve got your MIT Nobelists Exhibit working, start getting together your own data. I moved onto the How to make an Exhibit from data fed directly from a Google spreadsheet, then used the following tutorials to set up each view: thumbnail view, map view, timeline view, and tabular view.

Exhibit’s Advantages and Limitations

It’s pretty amazing that you can do this kind of web-based data munging without touching an actual database, but the price of convenience is a cap on the amount of data you can use. Exhibit is all JavaScript, so performance will degrade if you’ve got a large dataset, over 500 rows. For example, if someone wanted to do a visualization of their Twitter followers (available, conveniently, as JSON thanks to the Twitter API), they’d be fine as long as they had less than 500 people following them.

But for small data sets that you want to publish easily to your blog or company intranet, Exhibit is a sure way to impress your readers or boss. (Bloggers, an Exhibit WordPress plug-in is also due out in the coming weeks.) Hit up Exhibit’s web site for more examples and documentation.