View
3.237
Download
1
Category
Preview:
DESCRIPTION
A quick overview of the SIMILE offerings and a walk through using a modified version of the 2.2.0 tutorial in context.
Citation preview
Hands-On with ExhibitPresenting Research Products in a 'Simple'
and Standards-based Fashion !
Shawn Day Queen’s University Library - 2 December 2013
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
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
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
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)
Babel‣ Format Conversion between
!
!
!
!
!
!
!
‣ Get things ready for other tools …
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)
Gadget‣ An XML Inspector ‣ Display XML context
in a graphical andbrowsable manner
‣ Open Source ‣ Free ‣ Approachable
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"
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
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…
RDF is Cool Because …
Source: Wattenberg and Viegas, Flickr Seasons Source: FlickCurl: http://librdf.org/flickcurl/
<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 ; dcterms:rights <http://creativecommons.org/licenses/by-nc-sa/2.0/> ;
Referee‣ Crawls Web Logs and Determines
Who is Referencing your site
Seek‣ Adds Faceted Browsing to Thunderbird
Semantic Bank‣ Ties Longwell <——> Piggybank ‣ Create a Library of Linked Contextual
Information for Use in Collaborative Environments
‣ Publish feed as RDF
Solvent‣ Firefox Extension to Help Write Screenscarpers ‣ Web <—> Piggybank
Welkin‣ View RDF as a Graph
Timeline
Timeplot
Why‣ Simple ‣ Javascipt - Approachable - Example Based ‣ Modular ‣ Standards Based ‣ Doesn’t Require Server Technology ‣ Browser Based ‣ Allows focus on content not on the technology
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
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
Preparing your data for use in Exhibit‣ Input Formats ‣ Exhibit JSON ‣ Google Spreadsheet ‣ Generic JSONP ‣ From Babel ‣ BibTex ‣ Excel ‣ Exhibit Page ‣ JPEG ‣ RDF/XML ‣ Tab-Separated Values
‣ Output Formats ‣ Exhibit JSON ‣ RDF/XML ‣ Semantic MediaWiki ‣ Tab-Separated Values ‣ BibTex
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
Let’s Start with our Data
Point Babel at your Excel Data File
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
Copy the Exhibit JSON produced
Validate the JSON produced
This is Where We Are Going
Exhibit in a Nutshell
Data json file
Description html file
Browsable/Searchable/Visual
Website 'the Exhibit'
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
Exercise 1Putting Your Data on the Web
In Its Simplest Form‣ <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>
index2-1.html
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
A Simple but Subtle Result index2-1.html
Stepping It Up - Faceted Browsing‣ Explore data in context ‣ Filter data by attributes
!
‣ Extract the metadata from the data
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>
Leveraging the Context of the Data index2-2.html
A Sidenote on Interchange‣ That Little Orange Button
!
‣ A Lot of Power ‣ Regardless of how you provide
data —> Exhibit will export ina variety of forms
Search Code<div ex:role="facet" ex:facetClass="TextSearch"></div>
index2-3.html
Initial Sort Code<div ex:role="view" ex:orders=".discipline, .nobel-year"></div>
index2-4.html
Provide Possible Sort Options<div ex:role="view" ex:orders=".discipline, .nobel-year" ex:possibleOrders=".label, .last-name, .discipline, .relationship, .shared, .deceased, .nobel-year"></div>
index2-5.html
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>
Now There’s Some Changes! index2-6.html
Table Considerations‣ Header Titles - Sortable ‣ Full table styling now available ‣ Tables require knowing data formats
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
Thinking Aesthetically <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>
index2-7.html
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
Giving Co-Winners Credit"types": { "Nobelist" : { "pluralLabel":
"Nobelists" } },
index2-8.html
Being Grammatically Correct"properties": { "co-winner": { "valueType":
"item" } },
index2-8.html
Exercise 2Adding New Visual Dimensions to your Exhibit
index2-8.html nobelists1.js
Add a Timeline<script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/time-
extension.js" type="text/javascript"></script> !
+ !
<div ex:role="view" ex:viewClass="Timeline" ex:start=".nobel-year" ex:colorKey=".discipline"> </div>
Add a Timeline index2-9.html
Timeline Considerations
Dates‣ ISO - 8601 ‣ So What’s That?
!
‣ At Minimum YYYY ‣ YYYY-MM-DD or ‣ YYYY-MM ‣ YYYY
!
‣ hh:mm:ss
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
The Thumbnail View‣ Add the following ViewPanel to your html file:
!
<div ex:role="view" ex:viewClass="Thumbnail" ex:showAll="true" ex:orders=".discipline" ex:possibleOrders=".label, .last-name, .discipline, .relationship, .shared, .deceased, .nobel-year">
index2-95.html
The Thumbnail View index2-95.html
Exercise 3Adding a Spatial Dimension
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>
Add Map View index2-10.html
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
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
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
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
Alternatives‣ Aeon Timeline ‣ WordPress ‣ Drupal ‣ Stay Tuned for CMS…
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
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
Thank YouShawn Day - s.day@qub.co.uk - @iridium
!
The Library/Institute for Collaborative Research in the Humanities18 University Square - Ground Floor
http://qubdh.co.uk
Recommended