SlideShare a Scribd company logo
An Introduction to Structured
     Data Presentation
          New Perspectives on Old Data




http://www.slideshare.net/shawnday/m-phil-lecture12
Objective



      To appreciate the range of structured data
   presentation tools available to digital humanities
   scholars and to be able to judge between them.
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
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
TimeFlow
Google FusionTables
Dipity
Many Eyes
Hands-On Exercise: Simile Exhibit
Setup and Preparation
   Opera Browser contains a server if you need;
   Available from opera.com;
   Need to install opera unite - unite.opera.com;
   Need to copy datafiles:
     http://myeye.ie/ftp1/exhibit/nobelists.js?action=raw
     http://myeye.ie/ftp1/exhibit/index1.html
     You can find instructions at: http://myeye.ie/ftp1/exhibit/
     recipe.txt
Background on Exhibit


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
So What?...
   Little programming (JavaScript Template);
   No database (JSON text);
   a series of useful ‘instantly interactive’
   visualisations.
Background
  http://www.simile-widgets.org/exhibit/
  A couple examples…
    Canadian Network for Economic History
    Comox Valley Crime Stoppers
Exhibit in a Nutshell
The Simplest Exhibit
<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>
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 :              "http://nobelprize.org/nobel_prizes/
        physics/laureates/1976/richter_thumb.jpg"
               },
               ………
    ]
}
The Simplest View
Add Faceted Browsing
   Explore data in
   context
   Filter data by
   attributes
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>
Add Search and Sort
Search Code
 <div ex:role="facet"
 ex:facetClass="TextSearch"></div>
Add a Table View
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>
Add a Timeline
Timeline Code
   <script src="http://static.simile.mit.edu/exhibit/
   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>
Add a Map View
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
Hands-On and Exercise
   Install and Setup Omeka
Omeka Basics
                                                           OAI/PMH
Exhibit
Metadata

                 Page
                                                               CSV
Section
                 Page


Section
                 Page                                          etc...
                 Page



Collection(s)

          Metadata Tag(s) Type          Metadata Tag(s) Type            Metadata Tag(s) Type
Item                             Item                          Item
          Representations               Representations                 Representations
OMEKA
  http://iridium.omeka.net/exhibits/show/
  carlingford/day1
  http://www.omeka.net/dashboard

  Omeka.org versus Omeka.net

  Sign-Up at: http://www.omeka.net
Hands-On: Prezi
Prezi
   http://prezi.com
   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
Further Exploration
   http://datajournalism.stanford.edu/
Where to go next
   DIRT (Digital Research Toolkit)
   Timeline Tools
   Visualisation in Education
   Visual Complexity

More Related Content

PDF
MPhil Lecture on Data Vis for Analysis
PPT
Bibliotheek & Onderzoek 2.0?
PDF
Digital Tools, Trends and Methodologies in the Humanities and Social Sciences
PDF
Requirements Engineering for the Humanities
PDF
The Evidence Hub: Harnessing the Collective Intelligence of Communities to Bu...
PDF
Web Data Extraction: A Crash Course
PDF
Data Science in 2016: Moving up by Paco Nathan at Big Data Spain 2015
PPTX
Intro to Data Science Concepts
MPhil Lecture on Data Vis for Analysis
Bibliotheek & Onderzoek 2.0?
Digital Tools, Trends and Methodologies in the Humanities and Social Sciences
Requirements Engineering for the Humanities
The Evidence Hub: Harnessing the Collective Intelligence of Communities to Bu...
Web Data Extraction: A Crash Course
Data Science in 2016: Moving up by Paco Nathan at Big Data Spain 2015
Intro to Data Science Concepts

What's hot (20)

PDF
Intro to Data Vis for the Humanities nov 2013
PPTX
Big Data Talent in Academic and Industry R&D
PPTX
Urban Data Science at UW
PPT
Social Search and Need-driven Knowledge Sharing in Wikis with Woogle
PPT
New information for new journalists pt2: data
PPT
Woogle4MediaWiki - From Searchers to Contributors
PDF
Tools for Digital Humanities Scholarly Innovation: Timemap, Juxtapose, Story Map
PPTX
Data Science, Data Curation, and Human-Data Interaction
PPTX
The Other HPC: High Productivity Computing
PDF
Research Knowledge Graphs at GESIS & NFDI4DataScience
PDF
Fairhair.ai – alan turing institute june '17 (public)
PPTX
Big Data Curricula at the UW eScience Institute, JSM 2013
PPT
The user, the Technology & the Library (and why to go in between)
PDF
Information Visualization for Knowledge Discovery: An Introduction
PPTX
MMDS 2014: Myria (and Scalable Graph Clustering with RelaxMap)
PPTX
Farirhair.ai: AI platform to mine competitive intelligence from billions of u...
PDF
Human-in-the-loop: the Web as Foundation for interdisciplinary Data Science M...
PDF
20180226 data driven smart governance
PDF
Rogers digitalmethods 4nov2010
Intro to Data Vis for the Humanities nov 2013
Big Data Talent in Academic and Industry R&D
Urban Data Science at UW
Social Search and Need-driven Knowledge Sharing in Wikis with Woogle
New information for new journalists pt2: data
Woogle4MediaWiki - From Searchers to Contributors
Tools for Digital Humanities Scholarly Innovation: Timemap, Juxtapose, Story Map
Data Science, Data Curation, and Human-Data Interaction
The Other HPC: High Productivity Computing
Research Knowledge Graphs at GESIS & NFDI4DataScience
Fairhair.ai – alan turing institute june '17 (public)
Big Data Curricula at the UW eScience Institute, JSM 2013
The user, the Technology & the Library (and why to go in between)
Information Visualization for Knowledge Discovery: An Introduction
MMDS 2014: Myria (and Scalable Graph Clustering with RelaxMap)
Farirhair.ai: AI platform to mine competitive intelligence from billions of u...
Human-in-the-loop: the Web as Foundation for interdisciplinary Data Science M...
20180226 data driven smart governance
Rogers digitalmethods 4nov2010
Ad

Similar to MPhil Lecture of Data Vis for Presentation (20)

PDF
Structured Data Presentation
PPTX
My XML is Alive! An Intro to XAML
PDF
Visualized Conference and jQuery Conference
PDF
Web Development for UX Designers
PPTX
No more Three Tier - A path to a better code for Cloud and Azure
PPTX
Introduction to using jQuery with SharePoint
PPT
Introduction to Semantic Web for GIS Practitioners
PPTX
FlinkForward Asia 2019 - Evolving Keystone to an Open Collaborative Real Time...
PDF
jQuery in the [Aol.] Enterprise
PPT
Building Web Hack Interfaces
PPT
Dojo - from web page to web apps
KEY
Approaches to mobile site development
PPT
Semantic Web, an introduction for bioscientists
PPTX
JavaScript and jQuery Basics
PPT
PowerPoint
PPTX
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
PDF
Presenting Your Digital Research
PDF
OSCON 2014: Data Workflows for Machine Learning
PPTX
MV* presentation frameworks in Javascript: en garde, pret, allez!
PPTX
Jquery fundamentals
Structured Data Presentation
My XML is Alive! An Intro to XAML
Visualized Conference and jQuery Conference
Web Development for UX Designers
No more Three Tier - A path to a better code for Cloud and Azure
Introduction to using jQuery with SharePoint
Introduction to Semantic Web for GIS Practitioners
FlinkForward Asia 2019 - Evolving Keystone to an Open Collaborative Real Time...
jQuery in the [Aol.] Enterprise
Building Web Hack Interfaces
Dojo - from web page to web apps
Approaches to mobile site development
Semantic Web, an introduction for bioscientists
JavaScript and jQuery Basics
PowerPoint
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
Presenting Your Digital Research
OSCON 2014: Data Workflows for Machine Learning
MV* presentation frameworks in Javascript: en garde, pret, allez!
Jquery fundamentals
Ad

More from Shawn Day (20)

PDF
Place of Irish Craft Beer - August 2018
PDF
Digital Narratives for Transylvania DH
PDF
Data Vis for Transylvania DH
PDF
Google Tools for Digital Humanities Scholars
PDF
DH In the Archives
PDF
Putting Your Data on a Map
PDF
Comparing and Considering: Exhibit vs Palladio
PPTX
Creating Narrative with Digital Objects
PDF
Digital Project Success
PDF
Sharing - Collecting our DAH Thoughts
PDF
Presenting Spatial Data: Whats so spatial about spatial?
PDF
Digital Project Management for Digital Humanities
PDF
Getting Intimate with Your Data - Working Our Way out of the Lab
PDF
Does DH Scholarship Take Place in the Lab?
PDF
How do you know what you are looking for?
PDF
ICRH Winter Institute Strand 4 Day 1 - Building Narratives with Digital Objects
PDF
New Forms of Collaboration in Humanities Research
PDF
Finding (a) Place in Time
PDF
Curation and Digital Storytelling
PDF
Exploring the DH Ecosystem from and Irish Perspective
Place of Irish Craft Beer - August 2018
Digital Narratives for Transylvania DH
Data Vis for Transylvania DH
Google Tools for Digital Humanities Scholars
DH In the Archives
Putting Your Data on a Map
Comparing and Considering: Exhibit vs Palladio
Creating Narrative with Digital Objects
Digital Project Success
Sharing - Collecting our DAH Thoughts
Presenting Spatial Data: Whats so spatial about spatial?
Digital Project Management for Digital Humanities
Getting Intimate with Your Data - Working Our Way out of the Lab
Does DH Scholarship Take Place in the Lab?
How do you know what you are looking for?
ICRH Winter Institute Strand 4 Day 1 - Building Narratives with Digital Objects
New Forms of Collaboration in Humanities Research
Finding (a) Place in Time
Curation and Digital Storytelling
Exploring the DH Ecosystem from and Irish Perspective

Recently uploaded (20)

PPTX
History, Philosophy and sociology of education (1).pptx
PDF
Computing-Curriculum for Schools in Ghana
PDF
Empowerment Technology for Senior High School Guide
PDF
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
PDF
LDMMIA Reiki Yoga Finals Review Spring Summer
PPTX
Lesson notes of climatology university.
PPTX
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
PPTX
UV-Visible spectroscopy..pptx UV-Visible Spectroscopy – Electronic Transition...
PPTX
A powerpoint presentation on the Revised K-10 Science Shaping Paper
PDF
medical_surgical_nursing_10th_edition_ignatavicius_TEST_BANK_pdf.pdf
PDF
RMMM.pdf make it easy to upload and study
PPTX
UNIT III MENTAL HEALTH NURSING ASSESSMENT
PDF
Complications of Minimal Access Surgery at WLH
DOC
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
PDF
IGGE1 Understanding the Self1234567891011
PDF
advance database management system book.pdf
PPTX
Onco Emergencies - Spinal cord compression Superior vena cava syndrome Febr...
PPTX
Introduction-to-Literarature-and-Literary-Studies-week-Prelim-coverage.pptx
PDF
A systematic review of self-coping strategies used by university students to ...
PDF
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf
History, Philosophy and sociology of education (1).pptx
Computing-Curriculum for Schools in Ghana
Empowerment Technology for Senior High School Guide
Black Hat USA 2025 - Micro ICS Summit - ICS/OT Threat Landscape
LDMMIA Reiki Yoga Finals Review Spring Summer
Lesson notes of climatology university.
Tissue processing ( HISTOPATHOLOGICAL TECHNIQUE
UV-Visible spectroscopy..pptx UV-Visible Spectroscopy – Electronic Transition...
A powerpoint presentation on the Revised K-10 Science Shaping Paper
medical_surgical_nursing_10th_edition_ignatavicius_TEST_BANK_pdf.pdf
RMMM.pdf make it easy to upload and study
UNIT III MENTAL HEALTH NURSING ASSESSMENT
Complications of Minimal Access Surgery at WLH
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
IGGE1 Understanding the Self1234567891011
advance database management system book.pdf
Onco Emergencies - Spinal cord compression Superior vena cava syndrome Febr...
Introduction-to-Literarature-and-Literary-Studies-week-Prelim-coverage.pptx
A systematic review of self-coping strategies used by university students to ...
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf

MPhil Lecture of Data Vis for Presentation

  • 1. An Introduction to Structured Data Presentation New Perspectives on Old Data http://www.slideshare.net/shawnday/m-phil-lecture12
  • 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
  • 10. Setup and Preparation Opera Browser contains a server if you need; Available from opera.com; Need to install opera unite - unite.opera.com; Need to copy datafiles: http://myeye.ie/ftp1/exhibit/nobelists.js?action=raw http://myeye.ie/ftp1/exhibit/index1.html You can find instructions at: http://myeye.ie/ftp1/exhibit/ recipe.txt
  • 11. Background on Exhibit 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
  • 12. So What?... Little programming (JavaScript Template); No database (JSON text); a series of useful ‘instantly interactive’ visualisations.
  • 13. Background http://www.simile-widgets.org/exhibit/ 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=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>
  • 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 : "http://nobelprize.org/nobel_prizes/ physics/laureates/1976/richter_thumb.jpg" }, ……… ] }
  • 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>
  • 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>
  • 25. Timeline Code <script src="http://static.simile.mit.edu/exhibit/ 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/PMH Exhibit Metadata Page CSV Section Page Section Page etc... Page Collection(s) Metadata Tag(s) Type Metadata Tag(s) Type Metadata Tag(s) Type Item Item Item Representations Representations Representations
  • 30. OMEKA http://iridium.omeka.net/exhibits/show/ carlingford/day1 http://www.omeka.net/dashboard Omeka.org versus Omeka.net Sign-Up at: http://www.omeka.net
  • 32. Prezi http://prezi.com 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 http://datajournalism.stanford.edu/
  • 34. Where to go next DIRT (Digital Research Toolkit) Timeline Tools Visualisation in Education Visual Complexity