Posted:January 22, 2007

Five Easy Steps to Embed Exhibit in a Blog

My earlier post gushed about the new Exhibit lightweight, structured data publishing system for Web pages from MIT’s Simile project. Because I was so impressed with the project’s examples, I decided to convert my existing 350+ semantic Web tools listing, Sweet Tools, to an online database. I also wanted to maintain the Google spreadsheet listing for others to make new tools suggestions.

Please see the NEW and IMPROVED Sweet Tools here, and now in database format! (And now updated to 378 tools!)

The remainder of this posting describes how I did this, following the online Exhibit tutorials. To my knowledge, this is the first time that an “exhibit” has been embedded within a blog system (WordPress in my example).

Five Easy Steps

  1. Though one can start with a standalone spreadsheet or other simple data structure, I began with a Google online spreadsheet (of the 350+ tools). I only needed to make a few changes in terms of {bracket identifiers} as column heads and to make explicit some other data features (such as ‘new’) that I had been handling before as formatting (see tutorials below). (I should mention that Exhibit seems to handle OK datasets as large as the one used here.) If you have a Google account, you can see the original, older version of the spreadsheet (which will no longer be updated or maintained) with its slightly modified new Google sibling
  2. I then followed the excellent “Getting Started” Exhibit tutorial, making all modifications locally. I worked with this local system until I got the display and presentation working the way I wanted it to with the various styles (I also decided to add thumbnails at this point; see thumbshots.org for examples and code)
  3. Within WordPress I created a new page template, in which I embedded the Javascript, the body onLoad call, and the embedded table as described above in Step 2. IMPORTANT: You need to have system administration access to WordPress to make these modifications; hosted services might be difficult. IMPORTANT: Though not indicated in any of the tutorials, I also had to embed references to the Exhibit style sheets in the page template, since my existing blog styles were apparently not allowing the inheritance of the remote Exhibit styles. (I also chose to embed my local styles via link reference as well.) Please copy these references carefully! Thus, the top of my page template (with differences shown in bolded maroon) became:
  4. Then, via the Write Page function within the WordPress admin center, I created a new page post referencing this new page template. I embedded some lead-in paragraphs in the page itself (but that is not necessary), and
  5. Finally, I updated my local spreadsheet (and will continue to do so periodically), uploaded it to Google, and made sure that I removed any extraneous rows and columns from the data to be displayed. Then, I manually re-published the site, and published it, again according to the excellent Exhibit tutorial on working with Google spreadsheets, and viola!

General Observations

The remote data feed from Google spreadsheets is a very nice feature that also removes one further step from the standard (though simple!) Exhibit set-up.

You can used mixed case in your attribute descriptors (but no spaces!) for better label displays (such as capitalization). However, for some reason (I suspect it’s an early bug) you can not use mixed case on the first Google field, which also defaults to “label”.

The remote Exhibit styles should probably be called out separately and better commented. I’m still seeing some squirrelly styles behavior. (For example, the right-margin browse and filter selection box has some overlapping characters.) Though I can inspect the styles with tools like Web Developer, it is tricky to make local changes.

Like Tim Isenheim’s Timeline plug-in for WordPress, it probably makes sense for someone with PHP experience (not me!) to make an Exhibit plug-in as well.

Lastly, the existing Exhibit tutorials are very helpful, but more would also help. (Hint, hint David!) More examples of filtering, lenses, and layout templates would be especially helpful.

However, the most important observation is that Exhibit is a much more useful and flexible presentation format than simple spreadsheets. Though as a first-time experience it took me some trial-and-error to work out the details, it is really very easy and straightforward to add such capabilities to a WordPress blog.

MIT’s Exhibit Continues the Simile Project’s Long String of Innovative Tools

I have just come across a new innovative Web development, and its simplicity and elegance have literally taken my breath away! Exhibit, from the Simile project at MIT and its lead author David Huynh, whose contributions include the stellar Piggy Bank (semantic Web Firefox extension), Sifter (little known, but excellent automatic Web data extractor), Babel (data format translator), Timeline (Javascript timeline creator), Ajax (toolset), Solvent (Web data extractor used by Piggy Bank) and Longwell (web-based RDF-powered faceted browser). David is the lead author on the first five tools listed. As a Ph.D. student at MIT, David is truly becoming one of the leading lights in practical semantic Web tool development. Exhibit only reinforces that reputation.

According to its Web site:

Exhibit is a lightweight structured data publishing framework that lets you create web pages with support for sorting, filtering, and rich visualizations by writing only HTML and optionally some CSS and Javascript code.

It’s like Google Maps and Timeline, but for structured data normally published through database-backed web sites. Exhibit essentially removes the need for a database or a server side web application. Its Javascript-based engine makes it easy for everyone who has a little bit of knowledge of HTML and small data sets to share them with the world and let people easily interact with them. . . .

“No Database, No Web Application” means that you can create your own exhibits using just a text editor. . . It’s quite easy to make exhibits. We even let you copy data straight out of a boring spreadsheet and convert it into an exhibit automatically. . . .

Exhibit consists of a bunch of Javascript files that you include in your web page. At load time, this Javascript code reads in one or more JSON data files that you link from within your web page and constructs a database implemented in Javascript right inside the browser of whoever visits your web page. It then dynamically re-constructs the web page as the visitor sorts and filters through the data. . . .

The advantages of Exhibit are as follows:

  • No traditional database technology involved even though Exhibit-embedding web pages appear as if they are backed by databases. So you don’t have to design any database, configure it, and maintain it. After all, if you only have a few dozens of things to publish rather than thousands, why would you spend so much effort in dealing with database technologies?
  • No server-side code required even though Exhibit-embedding web pages are heavily templated. So, there is no need to learn ASP, PHP, JSP, CGI, Velocity, etc. There is no need to worry which server-side scripting technology your hosting provider supports.
  • No need for web server if you only want to create exhibits and keep them on your own computer for your own use. They work straight from the file system.

We also provide a complementary service called Babel that lets you convert data from various sources, including tab-separated values (copied straight from spreadsheets) and Bibtex files, into formats that Exhibit understands.

The Exhibit Web site offers a growing list of helpful tutorials and some live examples of database-related “exhibits,” one of which is this U.S. Presidents’ example that shows maps, timelines, thumbnails and other nifty displays (see the actual site for the interactive displays):

You can get Exhibit today and embed it in your own Web site (more on this to come!).

To learn more about the background to this project, please see the submitted paper, Exhibit: Lightweight Structured Data Publishing, submitted to WWW, 2007, by David Huynh, Robert Miller, and David Karger.

Gentlemen, on behalf of the community, let me say, “Thanks! Most excellent work!” It’s discoveries like these that make the Internet so worthwhile.