Your SlideShare is downloading. ×
MPhil Lecture of Data Vis for Presentation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MPhil Lecture of Data Vis for Presentation


Published on

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. An Introduction to Structured Data Presentation New Perspectives on Old Data
  • 2. Objective To appreciate the range of structured data presentation tools available to digital humanities scholars and to be able to judge between them.
  • 3. Agenda How did you fare with the assignment? Experiences Lessons Thoughts Data Presentation versus Data Analysis? Products to be have an awareness of Hands On Install and Config Exhibit Omeka Prezi
  • 4. Structured Data Presentation Tools(a tiny subset) Webservices Prefuse TimeFlow D3 Google Fusion Tables Processing Many Eyes Dipity Hosted Omeka (Omeka) Frameworks SEASR Gephi Exhibit (Exercise) GraphViz
  • 5. TimeFlow
  • 6. Google FusionTables
  • 7. Dipity
  • 8. Many Eyes
  • 9. Hands-On Exercise: Simile Exhibit
  • 10. Setup and Preparation Opera Browser contains a server if you need; Available from; Need to install opera unite -; Need to copy datafiles: You can find instructions at: recipe.txt
  • 11. Background on ExhibitExhibit was developed at MIT to provide alightweight framework for the presentation,searching and faceted browsing of digital collections.Exhibit lets you easily create web pages withadvanced text search and filtering functionalities,with interactive maps, timelines, and othervisualizations
  • 12. So What?... Little programming (JavaScript Template); No database (JSON text); a series of useful ‘instantly interactive’ visualisations.
  • 13. Background A couple examples… Canadian Network for Economic History Comox Valley Crime Stoppers
  • 14. Exhibit in a Nutshell
  • 15. The Simplest Exhibit<html>! <head>! ! <title>MIT Nobel Prize Winners</title>! ! <link href="nobelists.js" type="application/json" rel="exhibit/data" />! ! <script src= 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>
  • 16. The Data {"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 : " physics/laureates/1976/richter_thumb.jpg" }, ……… ]}
  • 17. The Simplest View
  • 18. Add Faceted Browsing Explore data in context Filter data by attributes
  • 19. 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>
  • 20. Add Search and Sort
  • 21. Search Code <div ex:role="facet" ex:facetClass="TextSearch"></div>
  • 22. Add a Table View
  • 23. Table Code <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>
  • 24. Add a Timeline
  • 25. Timeline Code <script src=" extensions-2.0/time/time-extension.js" type="text/javascript"></script> +<div ex:role="view" ex:viewClass="Timeline" ex:start=".nobel-year" ex:colorKey=".discipline"></div>
  • 26. Add a Map View
  • 27. Wrapup: Exhibit Pros Cons Simple Limited Scalability Lightweight Some cross-browser No server required issues A host of Restrictions on Look visualisations and Feel Embeddable in other Extensive systems - customisation means ExhibitPress getting into code Here comes Exhibit 3
  • 28. Hands-On and Exercise Install and Setup Omeka
  • 29. Omeka Basics OAI/PMHExhibitMetadata Page CSVSection PageSection Page etc... PageCollection(s) Metadata Tag(s) Type Metadata Tag(s) Type Metadata Tag(s) TypeItem Item Item Representations Representations Representations
  • 30. OMEKA carlingford/day1 versus Sign-Up at:
  • 31. Hands-On: Prezi
  • 32. Prezi Scripted - Narrative driven Visual Presentation Tool Effective in skilled hands Helps audience relate to overall message Different way of imagining a presentation Challenging Not conventionally stand alone
  • 33. Further Exploration
  • 34. Where to go next DIRT (Digital Research Toolkit) Timeline Tools Visualisation in Education Visual Complexity