A quick overview of the SIMILE offerings and a walk through using a modified version of the 2.2.0 tutorial in context.

1. Hands-On with Exhibit
Presenting Research Products in a 'Simple'
and Standards-based Fashion
!
Shawn Day
Queen’s University Library - 2 December 2013

2. Upcoming Seminars and Workshops
!
‣
‣
‣
‣
‣
9 December - Telling Stories with Data – Collections Visualisation
for Arts and Humanities Scholars (OMEKA)
January - Digital Project Management
Februrary - Hands On Workshop – Data Visualisation for
Presentation
February - Social Scholarship – Tools for Collaborative Research
March - Data Visualisation for Textual and Spatial Analysis
!
‣
More to come: http://qubdh.co.uk

3. Objective
‣
To understand through hands-on 'doing' whether Exhibit
might be of use in your research programmes
!
‣
Exhibit was developed at MIT to provide a lightweight
framework for the presentation, searching and faceted
browsing of digital collections. Exhibit lets you easily
create web pages with advanced text search and
filtering functionalities, with interactive maps, timelines,
and other visualizations

4. Integrated Database of Text Files
‣
Simple

5. Combining Data Views

6. So What can you do with it? In Education

7. And in Fact for those with us two weeks ago …
‣
DHO:Discovery

8. Who is SIMILE?
‣
‣
‣
‣
‣
Semantic Interoperability of Metadata and Information in
unLike Environments
MIT Project - 2003-2011
MIT Library,W3C, Mellon-Funded
A collection of tools to enhance inter-operatibility
between digital objects
Led to the SIMILE Widget Community

9. Others
‣
‣
‣
‣
‣
‣
Appalachian (LogIns)
Fresnel (RDF Library)
HTTPTracer (Traffic Sniffer)
jsTEX (TEX Render for Firefox)
Zotz (publish from Zotero to Exhibit)
Potluck (mixes Data from multiple Exhibits)

10. Babel
‣
Format Conversion between
!
!
!
!
!
!
!
‣
Get things ready for other tools …

11. Citeline
‣
‣
‣
‣
Exhibit custom tweaked between
CSail and MIT Libraries
Dedicated to rendering interactive bibliographies
Wizard to take from bibtex to a full Exhibit
Connectivity to Zotero (http://zotero.org)

12. Gadget
‣
‣
‣
‣
‣
An XML Inspector
Display XML context
in a graphical and
browsable manner
Open Source
Free
Approachable

13. Longwell
‣
‣
‣
‣
An RDF Data Browser
Customisable
Graphical
Comes from the Flamenco project that pioneered the
concept of faceted browsing:
"allow users to move through large information spaces in a flexible
manner without feeling lost"
"use of metadata is integrated with free-text search, allowing the user
to follow links, then add search terms, then follow more links, without
interrupting the interaction flow"

14. Piggybank
‣
‣
‣
‣
‣
‣
‣
Collect information from the Web
Save information for future use
Tag information with keywords
Search & Browse collected information
Retrieve saved information
Share information you have collected
Install screen scrapers - with SIMILE Solvent
!
‣
Similar to Evernote

15. RDFizers
‣
‣
‣
Tools to convert to RDF
RDF for interoperability Linked Open Data
Context + Content
‣
‣
‣
‣
‣
‣
JPEG -> RDF
MARC/MODS -> RDF
OAI-PMH -> RDF
EMail -> RDF
BibTEX -> RDF
RAW -> RDF
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
Flat -> RDF
Weather -> RDF
Java -> RDF
Javadoc -> RDF
Random -> RDF
iCal -> RDF
RDF -> iCal
Garmin -> RDF
XLS -> RDF
CSV -> RDF
etc…

16. RDF is Cool Because …
<http://www.flickr.com/photos/dajobe/196308964/>
flickr:photo <http://farm1.static.flickr.com/57/196308964_b34cb0af68.jpg>,
<http://farm1.static.flickr.com/57/196308964_b34cb0af68_m.jpg>, <http://
farm1.static.flickr.com/57/196308964_b34cb0af68_o.jpg>, <http://
farm1.static.flickr.com/57/196308964_b34cb0af68_s.jpg>, <http://
farm1.static.flickr.com/57/196308964_b34cb0af68_t.jpg> ;
places:place [
places:id "WM3JEXSbBZqqRtGA" ;
places:placeid "2467327" ;
places:type "location" ;
a places:Place
], [
places:id "WM3JEXSbBZqqRtGA" ;
places:name "Pacific Grove" ;
places:placeid "2467327" ;
places:type "locality" ;
a places:Place
], [
places:id "AQ4UpRqYA5l0BiyF
.A" ;
places:name "Monterey" ;
places:placeid "12587696" ;
places:type "county" ;
a places:Place
], [
places:id "SVrAMtCbAphCLAtP" ;
places:name "California" ;
places:placeid "2347563" ;
places:type "region" ;
a places:Place
], [
places:id "4KO02SibApitvSBieQ" ;
places:name "United States" ;
places:placeid "23424977" ;
places:type "country" ;
a places:Place
];
dc:subject "jellyfish" ;
dcterms:created "2006-07-22T22:28:50Z"^^xsd:dateTime ;
dcterms:creator [
a foaf:Person ;
foaf:maker <http://www.flickr.com/photos/dajobe/196308964/> ;
foaf:name "Dave Beckett" ;
foaf:nick "dajobe"
];
dcterms:dateSubmitted "2006-07-23T18:16:13Z"^^xsd:dateTime ;
dcterms:issued "2006-07-23T18:16:13Z"^^xsd:dateTime ;
dcterms:modified "2007-02-25T07:45:46Z"^^xsd:dateTime ;
Source:Wattenberg and Viegas, Flickr Seasons
Source: FlickCurl: http://librdf.org/flickcurl/

17. Referee
‣
Crawls Web Logs and Determines
Who is Referencing your site

18. Seek
‣
Adds Faceted Browsing to Thunderbird

19. Semantic Bank
‣
‣
‣
Ties Longwell <——> Piggybank
Create a Library of Linked Contextual
Information for Use in Collaborative
Environments
Publish feed as RDF

20. Solvent
‣
‣
Firefox Extension to Help Write Screenscarpers
Web <—> Piggybank

21. Welkin
‣
View RDF as a Graph

22. Timeline

23. Timeplot

24. Why
‣
‣
‣
‣
‣
‣
‣
Simple
Javascipt - Approachable - Example Based
Modular
Standards Based
Doesn’t Require Server Technology
Browser Based
Allows focus on content not on the technology

25. Why
‣
‣
‣
‣
‣
‣
‣
‣
‣
‣
Free, no cost
Easy to use
No programming skills required
Open source platform
Get involved, share your expertise, write code or add a demo
Scalable - Staged mode scales to hundreds of thousands of items
Lightweight publishing framework for building interactive web pages of
linked data
Supports search (Scripted mode), faceted navigation, interactive displays
Easy to reconfigure and extend
Supports customised data display

26. Setting the Stage
‣
What Do You need to Make the Magic Happen?
‣
‣
‣
A Text Editor - NotePad or Text Wrangler
A Web Browser - Firefox?
A Data Manipulation Tool - Excel, GoogleDocs?
!
‣
‣
‣
‣
A Dataset
An Open Mind
A Few Hours
Willingness to Play

27. Preparing your data for use in Exhibit
‣
Input Formats
‣
‣
‣
‣
‣
Output Formats
Exhibit JSON
Google Spreadsheet
Generic JSONP
From Babel
‣
‣
‣
‣
‣
‣
‣
‣
BibTex
Excel
Exhibit Page
JPEG
RDF/XML
Tab-Separated Values
‣
‣
‣
Exhibit JSON
RDF/XML
Semantic MediaWiki
Tab-Separated Values
BibTex

28. Structuring Your Data
‣
‣
‣
Rows and Columns
A Row is an object in the collection
A Column is a piece of metadata
!
‣
‣
The Header is the First Row
Let’s See an example

29. Let’s Start with our Data

30. Point Babel at your Excel Data File

31. Data Files
‣
‣
‣
‣
‣
An Array of Items
Each Item a record
Each items has properties
Each property has a value
Propeties surrounded by "" quotes
!
‣
Each Item muct have two properties:
‣
‣
Label
Type

32. Copy the Exhibit JSON produced

33. Validate the JSON produced

34. This is Where We Are Going

35. Exhibit in a Nutshell
Data
json file
Description
html file
Browsable/
Searchable/Visual
Website
'the Exhibit'

36. What Exhibit Does (Programatically)
‣
‣
‣
‣
A web page is loaded
The web page pulls in more code (the Exhibit framework)
A lightweight database is created (within the browser)
The Exhibit Object is created
‣
‣
‣
‣
It extracts from the HTML the user interface
It loads the data into memory
It ten populates the database
It waits for user interaction

37. Exercise 1
Putting Your Data on the Web

38. In Its Simplest Form
‣
‣
‣
‣
‣
‣
‣
index2-1.html
<html>
<head>
<title>MIT Nobel Prize Winners</title>
<link href="nobelists.js" type="application/json" rel="exhibit/data" />
<script src=http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js type="text/javascript"></script>
<style></style>
</head>
!
‣
‣
‣
‣
‣
‣
‣
‣
<body>
<h1>MIT Nobel Prize Winners</h1>
<table width="100%”>
<tr valign="top”>
<td ex:role="viewPanel”><div ex:role="view"></div></td><td width="25%”>browsing controls here…
</td></tr>
</table>
</body>
</html>

39. Know Your Data - Semantic
{
"items" : [
{ type :
"Nobelist",
label :
"Burton Richter",
latlng:
"42.359089,-71.093412",
discipline :
"Physics",
shared :
"yes",
"last-name" :
"Richter",
"nobel-year" :
"1976",
relationship :
"alumni",
"co-winner" :
"Samuel C.C. Ting",
"relationship-detail" : "MIT S.B. 1952, Ph.D. 1956",
imageURL :
"http://nobelprize.org/nobel_prizes/physics/laureates/1976/
richter_thumb.jpg"
},
……… ]}
nobelists.js

40. A Simple but Subtle Result
index2-1.html

41. Stepping It Up - Faceted Browsing
‣
‣
Explore data in context
Filter data by attributes
!
‣
Extract the metadata from the data

42. The Faceted Browsing Code
<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>

43. Leveraging the Context of the Data
index2-2.html

44. A Sidenote on Interchange
‣
That Little Orange Button
!
‣
‣
A Lot of Power
Regardless of how you provide
data —> Exhibit will export in
a variety of forms

45. Search Code
index2-3.html
<div ex:role="facet" ex:facetClass="TextSearch"></div>

46. Initial Sort Code
index2-4.html
<div ex:role="view" ex:orders=".discipline, .nobel-year"></
div>

47. Provide Possible Sort Options
index2-5.html
<div ex:role="view" ex:orders=".discipline, .nobel-year"
ex:possibleOrders=".label, .lastname, .discipline, .relationship, .shared, .deceased, .nobelyear"></div>

48. Add a Table 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>

49. Now There’s Some Changes!
index2-6.html

50. Table Considerations
‣
‣
‣
Header Titles - Sortable
Full table styling now available
Tables require knowing data formats

51. Working with Lenses
<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>
!
Can You See what has happened?
index2-7.html

52. Thinking Aesthetically
index2-7.html
<style>
body {
margin: 1in;
font-family: "Helvetica","Arial", "Lucida Grande","Tahoma",sans-serif;
background-color: #F7F8E0;
background-image:url('nobel-prize2.png');
background-repeat:no-repeat;
}
footer {
margin: 1in;
font-family: "Helvetica","Arial", "Lucida Grande","Tahoma",sans-serif;
background-color: #FFFFFF;
}
table.nobelist {
border: 1px solid #ddd;
padding: 0.5em;
}
div.name {
font-weight: bold;
font-size: 120%;
}
.discipline {
}
.year {
font-style: italic;
}
.relationship {
color: #888;
}
.co-winners {
}
</style>

53. To Take Stock
‣
‣
‣
‣
We have taken a datafile and created a website that
displays that data;
We have added means for the user to search, sort and
filter the data;
We have added a new view to that website so that a user
can choose different means to view the data;
We have started to style the textual presentation.
!
‣
Let’s take a quick look at our data before we go further

54. Giving Co-Winners Credit
index2-8.html
"types": {
"Nobelist" : {
"pluralLabel":
"Nobelists"
}
},

55. Being Grammatically Correct
index2-8.html
"properties": {
"co-winner": {
"valueType":
"item"
}
},

56. Exercise 2
Adding New Visual Dimensions to your Exhibit
index2-8.html
nobelists1.js

57. Add a Timeline
<script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/timeextension.js" type="text/javascript"></script>
!
+
!
<div ex:role="view"
ex:viewClass="Timeline"
ex:start=".nobel-year"
ex:colorKey=".discipline">
</div>

58. Add a Timeline
index2-9.html

59. Timeline Considerations

60. Dates
‣
‣
ISO - 8601
So What’s That?
!
‣
‣
‣
‣
At Minimum YYYY
YYYY-MM-DD or
YYYY-MM
YYYY
!
‣
hh:mm:ss

61. A Note on Exhibit and 'ViewPanels'
‣
‣
‣
‣
‣
If you change:
<td ex:role="viewPanel">
to
<td>
You get a very different (non-tabbed presentation)
index2-91.html

62. The Thumbnail View
‣
index2-95.html
Add the following ViewPanel to your html file:
!
<div ex:role="view"
ex:viewClass="Thumbnail"
ex:showAll="true"
ex:orders=".discipline"
ex:possibleOrders=".label, .lastname, .discipline, .relationship, .shared, .deceased, .nobelyear">

63. The Thumbnail View
index2-95.html

64. Exercise 3
Adding a Spatial Dimension

65. Add a Map View
<script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/
map-extension.js"></script>
!
+
!
<div ex:role="view"
ex:viewClass="Map"
ex:latlng=".latlng"
ex:pin="true">
</div>

66. Add Map View
index2-10.html

67. Geospatial Considerations
‣
‣
‣
‣
‣
Have you got an hour or two or days?
Can choose from Google versus OpenStreetMap
Multiple Location for each item
Getting the long lat data you need - geocoding
Lenses Apply to the Bubble displayed

68. What Else Can You Add?
Views
‣ Bar Charts
‣ Line Charts
‣ Calendars
‣ Scatter Plot
‣ PivotTables
‣ Timeplots
!
!
Facets
‣ Lists
‣ Numeric Range
‣ Text Search
‣ Tag Cloud
‣ Slider
‣ Image
‣ Heirarchical

69. Exhibit in a Nutshell
‣
‣
‣
‣
‣
‣
Pros
Simple
Lightweight
No server required
A host of visualisations
Embeddable in other
systems - ExhibitPress
!
!
‣
‣
‣
‣
‣
Cons
Limited Scalability
Some cross-browser
issues
Restrictions on Look and
Feel
Extensive customisation
means getting into code

70. Making Exhibit Choices
‣
‣
‣
There is a Stable Proven Choice - Exhibit 2.2
There is an all new more standards-compliant Exhibit 3
Exhibit 3 comes in Two Flavours
‣
‣
Exhibit Scripted - Like Exhibit 2 with streamlining and some
visual improvements
Exhibit Stages - Server Based, Robust, Scalable and the Future
!
‣
‣
‣
Exhibit 2.2 offers all whizzy features
Exhibit 3 is faster but not fully ported (if you need maps?)
Exhibit 3 Staged is a new, powerful, professional tool

71. Alternatives
‣
‣
‣
‣
Aeon Timeline
WordPress
Drupal
Stay Tuned for CMS…

72. Where to Go Next
‣
http://qubdh.co.uk/events/an-introduction-to-exhibit
!
‣
‣
‣
‣
Links
Examples
A different sort of tutorial:
The Exhibit Wiki and GitHub Pages
!
‣
http://www.simile-widgets.org

73. Upcoming Seminars and Workshops
!
‣
‣
‣
‣
‣
9 December - Telling Stories with Data – Collections Visualisation
for Arts and Humanities Scholars (OMEKA)
January - Digital Project Management
Februrary - Hands On Workshop – Data Visualisation for
Presentation
February - Social Scholarship – Tools for Collaborative Research
March - Data Visualisation for Textual and Spatial Analysis
!
‣
More to come: http://qubdh.co.uk

74. Thank You
Shawn Day - s.day@qub.co.uk - @iridium
!
The Library/Institute for Collaborative Research in the Humanities
18 University Square - Ground Floor
http://qubdh.co.uk