Simile Exhibit

SIMILE: Semantic interoperability of Metadata and Information in unLike Environments

The SIMILE project is sponsored by the MIT Libraries and MIT CSAIL and has developed open-source applications for manipulating information. Their Exhibit project is a AJAX-based DHTML web program for displaying/sorting lightweight structured information. (e.g., information structured as JSON - JavaScript Simple Object Notation). It lets you create web pages with support for sorting, filtering, and rich visualizations by writing only HTML and optionally some CSS and Javascript code. There is no database and no web application technologies involved.

SIMILE Exhibit is an example of a web tool. One embeds a call to the SIMILE server for the necessary JavaScript include file. This JavaScript file comes down and handles your structured data file and presents you with a web page where you can manipulate/sort/display your data.

"Actually, there is nothing to download—you didn't have to download Google Maps, did you?! Exhibit is also a Web API. All you need is reference its Javascript. Nothing to download; nothing to install. Welcome to a new era of software development."

A peek at the Exhibit code

 
//The JSON local file to be transformed 
<link href="nobelists.js" type="application/json" rel="exhibit/data" />
 
// The call to the SIMILE JavaScript file 
<script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js"
       type="text/javascript"></script>
       
// Another call to a timeline JavaScript file 
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js"
       type="text/javascript"></script>
       
 
//Everything resides in a table 
<table width="100%">
   <tr valign="top">
       <td ex:role="viewPanel">
       
       // An embedded table that hosts a "lens" of the list of nobelists 
           <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>
           // Setting a tabular view 
           <div ex:role="exhibit-view"
               ex:viewClass="Exhibit.TabularView"
               ex:columns=".label, .imageURL, .discipline, .nobel-year, .relationship-detail"
               ex:columnLabels="name, photo, discipline, year, relationship with MIT"
               ex:columnFormats="list, image, list, list, list"
               ex:sortColumn="3"
               ex:sortAscending="false">
           </div>
           // Setting a timeline view 
          <div ex:role="view"
               ex:viewClass="Timeline"
               ex:start=".nobel-year"
               ex:colorKey=".discipline">
           </div>
           // Sort orders 
           <div ex:role="view"
               ex:orders=".discipline, .nobel-year"
               ex:possibleOrders=".label, .last-name, .discipline, .relationship, .shared, .deceased, .nobel-year">
           </div>
        </td>
        // Engineering a search function 
       <td width="25%">
           <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>
   </tr>

</table>
 
 
 

SIMILE exhibit nobelists