Using MIT SIMILE Exhibit

Level: 
LOGD Related Technologies
Contributor: 
Contributor: 
Description: 
A brief introduction to MIT Exhibit, showing the use of facets and timelines.
In this tutorial we will show how to use Simile Exhibit, an application for visualizing datasets on the Web. Exhibit allows developers to create web applications using data from different formats and display it using a variety of ways. Exhibit makes use of facets (different dimensions by which data can be filtered and/or classified). Here we will show a few examples that illustrate the functionality of this application.

My First Exhibit Demo

The Data

Let's assume we have a table of person information, where each row corresponds to a person record and each column describes personal information such as name, gender, and etc. The table is stored in a file called 'people.json' in JSON format. Please note that this JSON structure is specific to MIT SIMILE Exhibit, and each record must have a column "label" and a column "id" to uniquely label and identify the row.
 {
  "items": [
    {"label": "Peter", "gender": "Masculine", "year": "2000", "type":"Student"},
    {"label": "John", "gender": "Masculine", "year": "2001", "type": "Student"},
    {"label": "Mary", "gender": "Feminine", "year": "2000", "type": "Student"},
    {"label": "Fran", "gender": "Feminine", "year": "2003", "type": "Professor"},
    {"label": "Andrea", "gender": "Feminine", "year": "2002", "type": "Professor"},
    {"label": "Robert", "gender": "Masculine", "year": "2001", "type": "Professor"},
   ]
 }

The Visualization Code

A basic visualization can be obtained by creating a web page with the following code.
 <html>
 <head>
 <link href="people.json" type="application/json" rel="exhibit/data" />
 
 <script type="text/javascript" src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>
 
 </head>
 <body>
 
  <table>
   <tr>
    <td>
 
      <!-- FACETS -->
      <div ex:role="facet" ex:expression=".type" ex:facetLabel="Type"></div>
      <div ex:role="facet" ex:expression=".year" ex:facetLabel="Year of entering"></div>
      <!-- END FACETS -->
 
    </td>
 
    <!-- MAIN PANEL -->
    <td ex:role="viewPanel">
 
    </td>
   </tr>
  </table>
 </body>
 </html>

The Visualization Result

The result can be seen in Figure 1.


Figure 1: A first example of Exhibit

Step-by-step explanation

Step 1. Load data and javascript code in HTML header

The following line of code loads data from JSON file
 <link href="people.json" type="application/json" rel="exhibit/data" />
This following line of code loads Exhibit javascript code
 <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>

Embed Exhibit in Drupal

Make sure the input format is PHP (administrators need to enable the privilege of editing Drupal page in PHP), and use the following code instead of simply copying the header section.

<?php
drupal_set_html_head
('<script type="text/javascript" src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>');
drupal_set_html_head('<link href="http://logd.tw.rpi.edu/files/people.json" type="application/json" rel="exhibit/data" />');
?>

Step2. Add Facets

Finally, we create a table with two cells: The first one will contain the facets. The second cell will contain the view panel, which will allow us to visualize the data. Facets are a useful way to filter and explore data. On the previous image there are two boxes. The first "Type" contains all the possible values in the field "type" in the JSON file; In this case it includes two categories: "Student" and "Professor". We can see that there are three individuals under the category "Professor" and three under the category "Student". The second box title "Year of entering" contains all the values from the field "year" in the JSON file. In this case, there are two individuals under the category "2000", two under "2001", one under "2002" and one under "2003". It is possible to define facets for every variable available field in the JSON file. In order to do that, we need to modify the following lines.
      <!-- FACETS -->
      <div ex:role="facet" ex:expression=".type" ex:facetLabel="Type"></div>
      <div ex:role="facet" ex:expression=".year" ex:facetLabel="Year of entering"></div>
      <!-- END FACETS -->
Changing the value in the attribute '''ex:expression''' to a proper field name from the JSON file will change the facet. The attribute '''ex:facetLabel''' contains the string that will describe each facet.

Step 3. Use of Default viewPanel

Adding a viewPanel allows a default data listing, each record corresponds to a block listed in the visual panel.
    <!-- MAIN PANEL -->
    <td ex:role="viewPanel">
 
    </td>

Advanced Visualization: Use of Lenses

Lenses allow to display information of each record in a customized way. For example, based on the previous example we can aggregate a few more lines of code to customize records. An example can be seen in Figure 2. In this case, we modified the display of each record in a way that the name is of each person is displayed in italics, while the field names are in bold. We also discarded the deafult fields created by Exhibit, such as "URI" and "modified".


Figure 2: Use of lenses in Exhibit
Name: , Year:
Gender:
 <html>
 <head>
 <link href="people.json" type="application/json" rel="exhibit/data" />
 
 <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>
 
 </head>
 <body>
 
  <table>
   <tr>
    <td valign="top">
 
      <!-- FACETS -->
      <div ex:role="facet" ex:expression=".type" ex:facetLabel="Type"></div>
      <div ex:role="facet" ex:expression=".year" ex:facetLabel="Year of entering"></div>
      <!-- END FACETS -->
 
    </td>
   
    <!-- MAIN PANEL -->
    <td ex:role="viewPanel">
 
 
     <!-- BEGIN LENS -->
      <table ex:role="lens" class="gender">
        <tr>
          <td>
            <div>
              <b>Name:</b>
              <em><span ex:content=".label" ></span></em>,
              <b>Year:</b>
              <span ex:content=".year" ></span>
            </div>
            <b>Gender:</b>
            <span ex:content=".gender" ></span>
          </td>
        </tr>
      </table>
      <!-- END LENS -->
 
    </td>
   </tr>
  </table>
 </body>
 </html>
In order to do this, we created a table that contains the information that is going to be displayed, as can be seen specifically in this part of the code.
     <!-- BEGIN LENS -->
      <table ex:role="lens" class="gender">
        <tr>
          <td>
            <div>
              <b>Name:</b>
              <em><span ex:content=".label"></span></em>,
              <b>Year:</b>
              <span ex:content=".year" ></span>
            </div>
            <b>Gender:</b>
            <span ex:content=".gender" ></span>
          </td>
        </tr>
      </table>
      <!-- END LENS -->

Advanced Visualization: Use of Timeline

Exhibit can be used to visualize data using other views. For example, a user may be interested in the temporal aspect of the data. Exhibit provides extensions such as Timeline view that allow users to obtain a graphical representation of the temporal aspect of the data, as can be seen in Figure 3. The entities described are sorted by the year mentioned in the data. The colors describe the field "type" (Students or Professors).


Figure 3: Use of Timeline extension in Exhibit
<html>
 <head>
 <link href="people.json" type="application/json" rel="exhibit/data" />
 
 <script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>
 <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js" type="text/javascript"></script>
 
 </head>
 <body>
 
  <table width='75%'>
   <tr>
    <td valign="top" width='33%'>
 
      <!-- FACETS -->
      <div ex:role="facet" ex:expression=".type" ex:facetLabel="Type"></div>
      <div ex:role="facet" ex:expression=".year" ex:facetLabel="Year of entering"></div>
      <!-- END FACETS -->
 
    </td>
   
    <!-- MAIN PANEL -->
    <td ex:role="viewPanel">  
    <!-- TIMELINE VIEW -->
    <div ex:role="view" ex:viewClass="Timeline" ex:start=".year" colorKey=".type" ></div>
 
    </td>
   </tr>
  </table>
 </body>
 </html>
The main difference between this example and the previous ones is the inclusion of a file containing the code for the extension.
   <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/time/time-extension.js" type="text/javascript"></script>
Also, after the definition of the Main Panel, we need to add the Timeline
   <!-- TIMELINE VIEW -->
   <div ex:role="view" ex:viewClass="Timeline" ex:start=".year" colorKey=".type" ></div>
We defined that we wanted to use the field "year" as the temporal dimension so we included it as a value for the attribute '''ex:start'''. Also we want to be able to differentiate instances based on the "type" field so we add it as a value in the attribute '''colorKey'''.

Advanced Usages

1. handle empty value in sparql results. SPARQL query results some time contains empty strings, and we would like to replace the empty string with "n/a" in exhibit. To do so, we need to use dynamic value processing via Exhibit's functions. Since Exhibit does not support "strlen" or "empty" functions (see exhibit functions), we use "contains" to test an empty string as below
if(contains('',.publisher), 'n/a', .publisher)
Following is an example. Please also check out a real drupal demo
Here is the code of the example:
       <div ex:role="facet" ex:expression="if(contains('',.publisher), 'n/a', .publisher)" ex:facetLabel="publisher"></div> 
       <div ex:role="exhibit-viewPanel">
             <div ex:role="view"
                            ex:viewClass="Exhibit.TabularView"
                            ex:label="Table"
                            ex:columns=" .label, .publisher"
                            ex:columnLabels="dataset, publisher"
                            ex:sortColumn="0"
                            ex:sortAscending="true"
                            >
                        <table style="display: none;">
                            <tr>
                                <td><a ex:href-content=".url"><span ex:content=".label"></span></a></td>
                                <td><span ex:content="if(contains('',.publisher), 'n/a', .publisher)"></span></td>
                            </tr>
                        </table>
             </div>
        </div>

Further reading

For more detailed information on Exhibit and its different features, please check the official documentation of the project. It includes several examples as well as a description of other functionalities. Resources
AttachmentSize
people.json507 bytes
Your rating: None Average: 4.9 (12 votes)