In this multi-part tutorial I will show you how to create interactive Exhibit displays of you Drupal data using the Views, CCK, and Exhibit modules. I’ll start with a brief overview of Exhibit and how it works, then move on to explain how to get your Drupal data in a format that Exhibit can use, and finally, I’ll show you how to setup the Exhibit. If you’re already familiar with how Exhibit works, you’ll probably want to wait for part two of this series.

What is Exhibit?

Exhibit allows you to create interactive data-rich web pages with faceted browsing capabilities. The original intent of Exhibit was to allow someone without back-end programming knowledge, (e.g. PHP, MySQL, Perl, etc.) to create dynamic views of their data, like maps, timelines, scatterplots, interactive tables, etc., simply and easily. Exhibit is not a new tool. In fact, its now a few years old. However, its the kind of tool that provides the features and functionality that I think has become expected of modern web applications by today’s users. Exhibit provides the kind of interactivity and ease-of-use that we don’t see enough of on the web today.

Anatomy of an Exhibit

Let’s first begin by looking at how Exhibit’s are created. I think the best way to start understanding how to create an Exhibit is to look at an existing one and break it down. I’m going to start with CIA World Factbook example. If you haven’t already seen it, have a look and play around with it.

Now, let’s break that example down into its components. The three main components of this Exhibit are the view panel, the views within that view panel and the facets. Here’s how we break that down.

Anatomy of an Exhibit

View Panel

The first order of business for any Exhibit is the view panel. You can think of the view panel as a container for multiple views. In addition to holding the various views, it also displays the total number of records in your Exhibit database along with an Export menu. The export menu is represented by a little scissors icon that appears when you hover over the view panel. The export menu provides links that allow you to export the data within your Exhibit into various formats.

View Panel

You will also notice that for view panels that contain more than one view, the view panel adds a view selector which allows you to switch between the various views.

Views

Views are the meat of your Exhibit. They are the representation of your data. Exhibit provides support for a wide variety of these views including interactive tables, lists, maps, timelines, scatterplots, and bar charts. With a little bit of Javascript, its not very hard to make your own either. I’ve created a Calendar view that we’ll be using later on in this tutorial.

Within views, you can define what are called lenses. Lenses are sort of like views for individual records. They allow you to define a format for an individual item within your database. To see an example of a lens in the CIA World Factbook Exhibit, click on the “50 results” link where it says “50 results out of 270 cannot be plotted.” and click on one of the items that are shown in the list. A window will pop up showing a list of fields and their values for the item you clicked on. The display contained within that window is the lens. In this case, they haven’t defined a lens, so its showing you the default Exhibit defined lens.

Facets

Facets are the components that allow you to dynamically filter the data within your Exhibit. The most common facet is the list facet, but you will also see keyword search, numeric ranges, alpha ranges, date picker, and other kinds of facets within Exhibit.

A Basic Exhibit

Now that we’re familiar with the components used to create an Exhibit, its time to see the code that creates each one. Every component is defined using an HTML element with the special “ex:role” attribute. This attribute tells Exhibit what kind of component it is. In addition to the “ex:role” attriubute, each component has various options that you can use to configure it defined by using other special “ex:” attributes.

For example, the simplest Exhibit you can create would look like this:

<div ex:role="viewPanel">
  <div ex:role="view"></div>
</div>

This creates a view panel with a single view inside of it. Since we haven’t defined which kind of view, or class (using ex:viewClass), this view is, it defaults to the Tile (list) view.

I’m not going to go through every component and its configuration here, but there is a good tutorial on the Exhibit wiki that dives right in to creating Exhibits. Also, the best resource, besides looking at the code of other Exhibits, is this Exhibit wiki page.

Feeding Exhibits

Exhibits cannot live without data. They have an appetite for data which can come in several different formats including its native Exhibit JSON format, Google, Excel, and EditGrid spreadsheets, BibTex files, or JSONP data sources. Since we’re planning to use Drupal to get our data, we can rely on the Exhibit module to output the necessary data in the required format. If you’re a little more curious about how the data is formatted, check this out.

Why bring Drupal into the mix?

Drupal is a great CMS, and IMO its way more than just a CMS. To me, Drupal is a framework very much to the likes of Rails, Django or Seaside. One advantage of using these frameworks is that they provide shortcuts to the most common CRUD operations that happen in almost every traditional web application. In Drupal you can accomplish a lot of this same functionality without writing a single line of code by using the Views and CCK modules. This is where Exhibit and Drupal come together very well, they both allow non-technical people to develop powerful web applications without writing code. Obviously, this doesn’t mean that either Drupal or Exhibit are just for non-technical people, but it does go to show you the power of both.

Some will argue that in fact to create Exhibits you must write code because you have to know XHTML to create your Exhibits. This is true, but some would counter that XHTML is not code, but is instead just markup. However, this argument is beyond the scope of this tutorial. I’m of the school of thought that XHTML is simple document markup. If you can comprehend spreadsheets, you can comprehend (X)HTML. But, I digress…

The Drupal Views module is very powerful. You can mashup the data within your Drupal installation and create a myriad of useful end-user displays for it using Views. This is one area where Exhibit fits in nicely. With the help of the Drupal Exhibit module, Exhibit can turn the representation of those views into interactive client-side displays. Exhibit allows you to decouple your data from the database and the webserver where it lives and push it into the browser where it can be manipulated through the various kinds of displays and facets provided.

As a note, Exhibit currently works well for smaller sets of data. Depending on the number of fields in each record, and the amount of data within each field, Exhibit can handle anywhere from a few hundred records up to about a thousand records before it becomes noticeably bogged down. As new faster javascript engines are released (think SpiderMonkey), and core performance improvements are made to Exhibit itself (thank you David Huynh), we are bound to see this limit skyrocket over time. There are obvious workarounds you can do here using Drupal and Views arguments and such, but I’ll save that for another tutorial.

In the next episode, I’ll walk through the creation of your Exhibit data feed using the Views and Exhibit Drupal modules and show you how to setup a basic Exhibit from this feed.