How to use MIT Exhibit

From Data-gov Wiki

Jump to: navigation, search
Infobox (How-To) edit with form
  • name: How to use MIT Exhibit

  • description: How to use MIT Exhibit
  • creator(s): Alvaro Graves
  • created: 2010/04/08
  • modified: 2010-5-17


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. Here we will show a few examples that illustrate the functionality of this application.

Contents

The Data

Let's assume we have information about people. In particular, we have a file called 'people.json' in JSON format.

{
 "items": [
   {"label": "Peter", "sex": "Masculine", "year": "2000", "type":"Student"},
   {"label": "John", "sex": "Masculine", "year": "2001", "type": "Student"},
   {"label": "Mary", "sex": "Feminine", "year": "2000", "type": "Student"},
   {"label": "Fran", "sex": "Feminine", "year": "2003", "type": "Professor"},
   {"label": "Andrea", "sex": "Feminine", "year": "2002", "type": "Professor"},
   {"label": "Robert", "sex": "Masculine", "year": "2001", "type": "Professor"},
  ]
}

This file contains information about people, such as year they started working in an institution, sex and name. Please notice the format of this JSON file. Also our dataset must have a "label" or "id" category to work in Exhibit.

Basic visualization

A basic visualization can be obtained by creating a webpage with the following code. The result can be seen in Figure 1.

Figure 1: A first example of data visualization using 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>
 
 </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>

First, the JSON file is loaded using the

<link href="people.json" type="application/json" rel="exhibit/data" />

We also load the Exhibit script

<script src="http://api.simile-widgets.org/exhibit/2.2.0/exhibit-api.js"></script>

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

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.

Use of Lenses

Lenses allow to display information of each record in a customized way. For example, based on the previous example we can agregate 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
 <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="sexo">
        <tr>
          <td>
            <div>
              <b>Name:</b>
              <em><span ex:content=".label" ></span></em>,
              <b>Year:</b>
              <span ex:content=".year" ></span>
            </div>
            <b>Sex:</b>
            <span ex:content=".sex" ></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 in more detail in the following code.

     <!-- BEGIN LENS -->
      <table ex:role="lens" class="sexo">
        <tr>
          <td>
            <div>
              <b>Name:</b>
              <em><span ex:content=".label"></span></em>,
              <b>Year:</b>
              <span ex:content=".year" ></span>
            </div>
            <b>Sex:</b>
            <span ex:content=".sex" ></span>
          </td>
        </tr>
      </table>
      <!-- END LENS -->

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: Visualizing data using a Timeline
<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.

Further reading

For more detailed information on Exhibit and its different features, please check the oficial documentation of the project. It includes several examples as well as a description of other functionalities.

Facts about How to use MIT ExhibitRDF feed
Dcterms:created8 April 2010  +
Dcterms:creatorAlvaro Graves  +
Dcterms:descriptionHow to use MIT Exhibit
Dcterms:modified2010-5-17
Foaf:nameHow to use MIT Exhibit
Skos:altLabelHow to use MIT Exhibit  +, how to use mit exhibit  +, and HOW TO USE MIT EXHIBIT  +
Personal tools
internal pages