1. Visualising Research
Temporal, Textual and Numeric
Is it not 'spatial' too?
!
!
11 March 2014

2. Objectives
‣ Consider best practices in sharing research findings
using visualisation tools;
‣ Identify and judge between publicly available tools to
create and deploy humanities visualisation research
products;
‣ Consider data visualisation as part of a larger research
discussion.

3. Considering the state of things:
!
"Meeks on Collaboration"

4. "Digitization makes the most traditional forms of humanistic
scholarship more necessary, not less.
But the differences mean that we need to reinvent, not
reaffirm, the way we engage with the humanities."

5. So, why do we turn to visualisation for
presentation?
‣ Open Up Large Datasets
‣ Increase density of observable data
‣ Reduce Complexity
‣ Aestheticise Data
‣ Illustrate an Interpretation
‣ Make an Argument

6. Who is Edward Tufte andWhat Does He Teach Us?
‣ Show the Data
‣ Provoke Thought about the Subject at
Hand
‣ Avoid Distorting the Data
‣ Present Many Numbers in a Small
Space
‣ Make Large Datasets Coherent
‣ Encourage Eyes to Compare Data
‣ Reveal Data at Several Levels of Detail
‣ Serve a Reasonably Clear Purpose
‣ Be Closely Integrated with Statistical /Verbal Descriptions of the
Dataset

8. Visualising AvailableVisualisations

9. A Short Guided Tutorial in Exhibit

10. Background
‣ To understand with a quick and dirty tour 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 visualisations

11. Integrated Database of Text Files
‣ Simple

12. Combining DataViews

13. Remembering the first week …
‣ DHO:Discovery

14. 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 SIMILEWidget Community

15. 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)

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

17. 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)

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

19. 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"

20. Piggybank
‣ Collect information from theWeb
‣ 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

21. 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

22. RDF is Cool Because …
Source:Wattenberg andViegas, 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 ;

23. Referee
‣ CrawlsWeb Logs and Determines
Who is Referencing your site

24. Seek
‣ Adds Faceted Browsing to Thunderbird

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

26. Solvent
‣ Firefox Extension to HelpWrite Screenscarpers
‣ Web <—> Piggybank

27. Welkin
‣ View RDF as a Graph

28. Timeline

29. Timeplot

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

31. 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

32. Setting the Stage
‣ What DoYou need to Make the Magic Happen?
‣ A Text Editor - NotePad or TextWrangler
‣ AWeb Browser - Firefox?
‣ A Data Manipulation Tool - Excel, GoogleDocs?
!
‣ A Dataset
‣ An Open Mind
‣ A Few Hours
‣ Willingness to Play

33. 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-SeparatedValues
‣ Output Formats
‣ Exhibit JSON
‣ RDF/XML
‣ Semantic MediaWiki
‣ Tab-SeparatedValues
‣ BibTex

34. StructuringYour 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

35. Let’s Start with our Data

36. Point Babel at your Excel Data File

37. 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

38. Copy the Exhibit JSON produced

39. Validate the JSON produced

40. This isWhereWe Are Going

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

42. 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

43. In Its Simplest Form
‣ <html>
‣ <head>
‣ <title>MIT Nobel PrizeWinners</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 PrizeWinners</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

44. KnowYour 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

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

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

47. 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>

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

49. 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

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

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

52. 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

53. Add a TableView
<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>

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

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

56. 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>
!
CanYou See what has happened?
index2-7.html

57. 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;
index2-7.html

58. 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

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

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

61. 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>

62. Add a Timeline index2-9.html

63. Dates
‣ ISO - 8601
‣ SoWhat’s That?
!
‣ At MinimumYYYY
‣ YYYY-MM-DD or
‣ YYYY-MM
‣ YYYY
!
‣ hh:mm:ss

64. The ThumbnailView
‣ Add the followingViewPanel 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">
</div>
index2-95.html

65. The ThumbnailView index2-95.html

66. Add a MapView
<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>

67. Add MapView index2-10.html

68. Geospatial Considerations
‣ 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

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

70. 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

71. 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

72. Where to Go Next
!
‣ The ExhibitWiki and GitHub Pages
!
‣ http://www.simile-widgets.org

73. for Next Lecture (18 March):
Sharing
Please take a look at:
!
"The digital humanities is not about building,
it’s about sharing"

74. ThankYou
shawn.day@ucc.ie @iridium