Presenting Your Digital Research

50 %
50 %
Information about Presenting Your Digital Research

Published on March 11, 2014

Author: shawnday


Visualising Research
 Temporal And Textual Is it not spatial too? ! ! 11 March 2014

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.

Considering the state of things: ! "Meeks on Collaboration" "Meeks and Weingart on Topic Modeling"

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

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

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

Visualising AvailableVisualisations

A Short Guided Tutorial in Exhibit

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

Integrated Database of Text Files ‣ Simple

Combining DataViews

Remembering the first week … ‣ DHO:Discovery

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

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 (

Gadget ‣ An XML Inspector ‣ Display XML context
 in a graphical and
 browsable 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 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

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

RDF is Cool Because … Source:Wattenberg andViegas, Flickr Seasons Source: FlickCurl: <> flickr:photo <>, <>, <http://>, <http://>, <http://> ; 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 <> ; 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 ;

Referee ‣ CrawlsWeb 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 HelpWrite Screenscarpers ‣ Web <—> Piggybank

Welkin ‣ View RDF as a Graph



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

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

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

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

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 isWhereWe 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

In Its Simplest Form ‣ <html> ‣ <head> ‣ <title>MIT Nobel PrizeWinners</title> ‣ <link href="nobelists.js" type="application/json" rel="exhibit/data" /> ‣ <script src= 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

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 : " 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"

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 in
 a 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 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>

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> ! CanYou 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; } { font-weight: bold; font-size: 120%; } .discipline { } .year { font-style: italic; } .relationship { color: #888; 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

Add a Timeline <script src=" 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

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

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

The ThumbnailView index2-95.html

Add a MapView <script src=" map-extension.js"></script> ! + ! <div ex:role="view" ex:viewClass="Map" ex:latlng=".latlng" ex:pin="true"> </div>

Add MapView index2-10.html

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

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

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

Where to Go Next ! ‣ The ExhibitWiki and GitHub Pages ! ‣

Foundation Frameworks ‣ GraphViz ‣ R Programming Language ‣ JIT (JavaScript Infovis Toolkit) ‣ Protovis ‣ D3 ‣ Processing ‣ Tableau ‣ Prefuse ‣ Gephi ‣ WEAVE (http:// ! ‣ Exhibit

GraphViz ‣ An Open Source
 Framework ‣ Mature (1988) ‣ AT&T Labs ‣ Used as a basis for subsequent ‣ A great prototyping and starting point ! ! ‣

R Programming Language ‣ Geared towards statistical analysis ‣ In recent times has had developed into an engine supporting some powerful graphics frameworks ‣ Open Source ‣ Typically Command Line but a variety of GUI editors available ‣ > Jeff Rydberg-Cox: R for the Digital Humanities

JavaScript InfoVis Toolkit (JIT) ‣ JIT Demos ( ‣ The JavaScript InfoVis Toolkit is a complete set of tools to create Interactive DataVisualizations for theWeb. It includes JSON loading, animation, 2D point and graph classes and some predefined tree visualization methods. ‣ Smaller datasets in a clean form ‣ Related and Aggregated/Categorised Data

JavaScript InfoVis Toolkit (JIT)

JavaScript InfoVis Toolkit (JIT)

JavaScript InfoVis Toolkit (JIT)

ProtoVis ‣ Protovis is a visualization toolkit for JavaScript using SVG. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. ‣ Jerome Cukier: ProtoVis Tutorial ‣ Development shifted to D3 ‣ ProtoVis still very accessible and usable



D3 ‣ D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. As a trivial example, you can use D3 to generate a basic HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction. ‣ Open Source


Processing ‣ Now we are getting serious... ‣ Ben Fry ‣ Like R has a serious statistical bent ‣ Has a client and development environment, but deploys easily to the web using processing.js ‣ Large andVL datasets ‣ Good with related data ‣ Serious support for aesthetics ‣ Modelling Environment ‣ ‣

Open Processing



Tableau ‣ Commercial ‣ Offers a Free Public Application ‣ Encourages sharing and focusses on building a narrative around visualisation of your research data ‣ Education and Non-Commercial Licenses available ‣ Mature and evolving rapidly to demonstrate the newest and most exciting visualisation types ‣ And our friendsWattenberg andViegas seem to be onboard


Prefuse ‣ flare.prefuse ‣ Flash-based ‣ Great transitions and very approachable ‣ Beware of Datalocking ‣

Gephi ‣ We Looked at it a bit LastWeek ‣ Open Source ‣ Mapping andVisualising Relationships and Networks ‣ An outstandingVisual Development Environment ‣ Multiplatform ‣ Extensible!! ‣

Points of Departure ‣ DIRT (Digital Research Toolkit) ‣ Visualisation in Education ! ‣ R: A Tiny Handbook of R - Springer ‣ Using R in DH ‣ MONK ‣

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

ThankYou @iridium

Add a comment

Related presentations

Related pages

Digital Storytelling - Research & Presenting Information ...

For my Educational Technology and Design class in May 2011. This video is intended for eighth grade students in the subject of Language Arts
Read more

UTRGV | Presenting Your Research

Presenting Your Research As you advance your research, you will seek professional opportunities to present your findings to your peers, colleagues, ...
Read more

Writing and Presenting Your Thesis or Dissertation - JDL

Writing and Presenting Your Thesis or Dissertation 1 S. Joseph Levine, Ph.D. ... an excellent chance of having your research project turn out well. U5.
Read more

Presenting your positive image/ creating your "brand"

Creating and presenting your ... Research do's and don'ts! Social ... You will also strengthen your confidence level since you will be presenting from your ...
Read more

AIGA | Presenting your portfolio

Presenting your portfolio. ... , poetry or research papers. ... Your digital portfolio should be designed just like the regular portfolio with the same ...
Read more

Presenting Qualitative Data - Private Florida Research ...

Presenting Qualitative Data by Ronald J. Chenail. ... To help you with your efforts at presenting qualitative research in your papers and in your talks, ...
Read more

How to Write a Research Report & Presentation

Presenting Your Research Designing Presentation Graphics ... Microsoft Word - How to Write a Research Report & Presentation.doc Author: Danita August
Read more

Advice for Making Posters with Power Point | Undergraduate ...

Presenting Your Work . Presenting Your Work; UA Undergraduate Research and Creative Activity Conference; ... Advice for Making Posters with Power Point.
Read more

Research Presentations - Stanford University

Good scientific research involves a sound ... oral presentations can be a rewarding experience because you are the only ... Research Presentations;
Read more