Tutorial 1: Introducing Simile Exhibit

Simile Exhibit is a ‘Publishing Framework for Large-Scale Data-Rich Interactive Web Pages’. It is approachable and scales to meet your needs.

In this tutorial we we carry out a simple example based on the standard Exhibit tutorial initially developed by the SIMILE lab and has been updated and augmented subsequently for various versions. The data and and the general procedure come from the tutorial presented on the project wiki.

All the files (bundled as a zip file) to carry out this exercise are available here: ExhibitTutorialFiles. You can download them, unzip them and save them to your desktop to work with them.

The Recipe for this Hands-on Exercise

Step 1 – Combining Data with Presentation

We start some raw HTML – specifically calling for the Exhibit framework from the Simile server.

In this step we see how the very simple HTML file is combined with the javascript datafile to produce a simple but powerful online exhibit. Please take a moment to examine both these files in your text editor.

Open the two files linked below in your text editor to browse them and then open the html file in Firefox to view the result.

You should see something resembling the screen shot below.


Step 2 – Adding Facets and Search Functionality

We can now add powerful searching and browsing functionality by adding a simple set of facets to our HTML code.

In The HTML file simply paste:

<td width=”25%”>
Search:<div ex:role=”facet” ex:facetClass=”TextSearch”></div>
<div ex:role=”facet” ex:expression=”.discipline” ex:facetLabel=”Discipline”></div>
<div ex:role=”facet” ex:expression=”.relationship” ex:facetLabel=”Relationship”></div>
<div ex:role=”facet” ex:expression=”.shared” ex:facetLabel=”Shared?”></div>
<div ex:role=”facet” ex:expression=”.deceased” ex:facetLabel=”Deceased?”></div>
</td>

Into the HTML file where it currently says:

<td width=”25%”>
Facets Go Here
</td>

When you do this you will see a series of browse facets made available as in Step 2.


Step 3 – Adding a Lens to Make it More Readable

Exhibit makes it possible to control the display of your data and make it more readable by utilising what they term ‘lenses’. By adding a ‘lens’ – basically some styling cues that explain how you would like data objects made pretty – you will see the immediate results in Step 3.

This is accomplished by adding a small lens definition thusly:

<table ex:role=”lens” class=”nobelist”>
<tr>
<td><img ex:src-content=”.imageURL” /></td>
<td>
<div ex:content=”.label” class=”name”></div>
<div>
<span ex:content=”.discipline” class=”discipline”></span>, 
<span ex:content=”.nobel-year” class=”year”></span>
</div>
<div ex:if-exists=”.co-winner” class=”co-winners”>Co-winners: 
<span ex:content=”.co-winner”></span>
</div>
<div ex:content=”.relationship-detail” class=”relationship”></div>
</td>
</tr>
</table>

This code is placed before the view panels we have defined to display the data. By editing your HTML file and saving it you should be able to refresh it and see the view blow. A sight prettier.


Step 4 – Adding a Timeline

To add a timeline to your Simile Exhibit, you need to do two things:

  1. First add a simple line to the HTML head section of the html file that tells Exhibit to load the timeline functionality. This is placed underneath the script line where we call the exhibit framework:<script src=”http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js”
    type=”text/javascript”></script>Paste the following chunk of code:<script src=”http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-extension.js”
    type=”text/javascript”></script>
    This instructs Exhibit to load the functionality it needs to work with temporal data and present a an interactive timeline.
  2. Then you simply need to tell Exhibit where you wish the Timeline to go. Do this by adding a simple view panel below your single existing view panel:

<div ex:role=”view”
ex:viewClass=”Timeline”
ex:start=”.nobel-year”
ex:colorKey=”.discipline”>
</div>

These two items are all that is necessary to end up with an exhibit screen resembling the screenshot below. This screen is demonstrated on Step 4.


Step 5 – Adding a Map

To add a map to your Simile Exhibit, you need to do two things in a similar fashion to how we added the timeline above:

  1. First add a simple line to the HTML head section of the html file that tells Exhibit to load the map functionality. Underneath the existing script line where we have added the Timeline script, paste the following chunk of code:<script src=”http://api.simile-widgets.org/exhibit/2.2.0/extensions/map/map-extension.js”></script>This instructs Exhibit to load the functionality it needs to work with spatial data and present a visual map.
  2. Then you simply need to tell Exhibit where you wish the Map to go. Do this by adding a simple view panel below your existing Timeline panel:<div ex:role=”view”
    ex:label=”Birthplace”
    ex:viewClass=”Map”
    ex:latlng=”.birthplace”
    ex:shape=”square”
    ex:shapeWidth=”30″
    ex:shapeHeight=”25″
    ex:mapHeight=”600″
    >
    </div>These two items are all that is necessary to end up with an exhibit screen resembling the screenshot below .This screen is demonstrated on Step 5.


Step 6 – Customising the HTML for Display

Now that we have added all of the functional viewers and interactive facets we may want to make it look more like the rest of our website.
To do this we can modify all aspects of the CSS, Header and Footer and add additional images. In this case I have added a couple images to the html and moved the facets to the top of the display simply by tweaking the HTML (the display layer).
If you now load Step 6 you will one the aesthetic changes – the objective here is simply to demonstrate that you are only limited by your own creativity and how deeply you want to dip into the HTML code.

But wait! There’s more …