Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Structured Data Presentation

•
•
Shawn Day
Shawn Day

The document provides an overview of structured data presentation tools for digital humanities scholars. It discusses the difference between data presentation and analysis, and highlights some early pioneers of data visualization like William Playfair and Charles Minard. The document then examines challenges in using visualization for the humanities. It also profiles several structured data presentation tools, including TimeFlow, Google Fusion Tables, Many Eyes, and Omeka. Hands-on examples are provided using the Exhibit framework to create interactive visualizations like faceted browsing, searching, tables, timelines, and maps.

1 of 50
Download to read offline
An Introduction to Structured Data Presentation New Perspectives on Old Data Shawn Day Digital Humanities Observatory 14 November 2012 http://www.slideshare.net/shawnday/structured-data-presentation
Objective To appreciate the variety of structured data presentation tools available to digital humanities scholars and to be able to judge between them.
Agenda Data Presentation versus Data Analysis? The Readings Exhibit Thesis The Data Vis Challenge to the Humanities Products to be have an awareness of Hands On Install and Config Exhibit OMEKA?
The Two Faces of Data Visualisation One of the keys to good visualization is understanding what your immediate (and longer term) goals are. Are you visualizing data to understand what’s in it, or are you trying to communicate meaning to others? You - Visualisation for Data Analysis Others - Visualisation for Presentation
Information Visualisation: Challenge for the Humanities To use the vast stores of digitised data we are collecting we need to develop a digital fluency Access Exploration Visualisation Analysis Collabouration
The Challenges Developing new genres for complex info presentation creating a literacy that has same rigour and richness as current scholarship expanding text-based pedagogy to include simulation, animation and spatial and geographic representation
The Opportunity Balance complexity with conciseness Balance accuracy with essence Speak authoritatively, yet inspire exploration and personal insight
A Short History Originated in Computer Science Disseminated into broader scientific realm A late comer to the humanities Tufte: concise - clear - accurate
William Playfair (1758 - 1823) bar chart pie chart time series This is a file from the Wikimedia Commons.
John Snow (1813 - 1858) Dot Plot Spatial Analysis This is a file from the Wikimedia Commons
Charles Minard (1781 - 1870) Flow Diagram Multi-Vector Information Visualisation This is a file from the Wikimedia Commons
Tools for collection are far more successful to date than those for exploration
New Influences Simulation - 3D What if? Monitor - Real time data Collabouration - Many Eyes
The Challenges to the Use of Visualisation Too Easy to confuse, miscommunicate or downright lie Break or lack basic visual design principles Fail to understand the data, the audience or the problem being solved Fail to appreciate the visceral or emotional power of graphics Lack of technical skills in this domain
Structured Data Presentation Tools (a tiny subset) Webservices Frameworks TimeFlow Gephi Google Fusion Tables Exhibit (Exercise) Many Eyes GraphViz Prefuse Hosted D3 Omeka (Omeka) Processing
TimeFlow
Google FusionTables
Many Eyes
Hands-On Exercise: Simile Exhibit
Looking at Exhibit
Setup and Preparation Do Not Use Safari - Firefox or Chrome should be X fine You can find instructions at: http://myeye.ie/ftp1/ exhibit/recipe.txt Need to copy datafiles: http://myeye.ie/ftp1/exhibit/nobelists.js?action=raw http://myeye.ie/ftp1/exhibit/index1.html
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 Research at the DHO DHO: Discovery
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
Moving Beyond with Exhibit Ensemble Project Advanced Tutorial: http://ensemble.ljmu.ac.uk/q/calbooklet
OMEKA for Curated Collections http://omeka.net
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
Where to go next http://datajournalism.stanford.edu/ Bamboo - DIRT (Digital Research Toolkit) Timeline Tools Visualisation in Education Visual Complexity
Academic Visualisation? There’s lots of published papers out there ...what can you do with them? http://www.autodeskresearch.com/projects/citeology
The Life on An Idea through Citations
Structured Data Presentation
Data Visualisation Lessons from Tufte 1. Show the Data 2. Provoke Thought about the Subject at Hand 3. Avoid Distorting the Data 4. Present Many Numbers in a Small Space 5. Make Large Datasets Coherent 6. Encourage Eyes to Compare Data 7. Reveal Data at Several Levels of Detail 8. Serve a Reasonably Clear Purpose 9. Be Closely Integrated with Statistical and Verbal Descriptions of the Dataset
What Visual Techniques Exist? Connecting your data with the right visualisation What is your message? How do we know what we might use? Start with your Exploratory/Research/Analytical Environment (last seminar) How do visuals fit into your narrative?
What Visual Techniques Exist? Connecting your data with the right visualisation
Thanks for your attention

More Related Content

Structured Data Presentation

  • 1. An Introduction to Structured Data Presentation New Perspectives on Old Data Shawn Day Digital Humanities Observatory 14 November 2012 http://www.slideshare.net/shawnday/structured-data-presentation
  • 2. Objective To appreciate the variety of structured data presentation tools available to digital humanities scholars and to be able to judge between them.
  • 3. Agenda Data Presentation versus Data Analysis? The Readings Exhibit Thesis The Data Vis Challenge to the Humanities Products to be have an awareness of Hands On Install and Config Exhibit OMEKA?
  • 4. The Two Faces of Data Visualisation One of the keys to good visualization is understanding what your immediate (and longer term) goals are. Are you visualizing data to understand what’s in it, or are you trying to communicate meaning to others? You - Visualisation for Data Analysis Others - Visualisation for Presentation
  • 5. Information Visualisation: Challenge for the Humanities To use the vast stores of digitised data we are collecting we need to develop a digital fluency Access Exploration Visualisation Analysis Collabouration
  • 6. The Challenges Developing new genres for complex info presentation creating a literacy that has same rigour and richness as current scholarship expanding text-based pedagogy to include simulation, animation and spatial and geographic representation
  • 7. The Opportunity Balance complexity with conciseness Balance accuracy with essence Speak authoritatively, yet inspire exploration and personal insight
  • 8. A Short History Originated in Computer Science Disseminated into broader scientific realm A late comer to the humanities Tufte: concise - clear - accurate
  • 9. William Playfair (1758 - 1823) bar chart pie chart time series This is a file from the Wikimedia Commons.
  • 10. John Snow (1813 - 1858) Dot Plot Spatial Analysis This is a file from the Wikimedia Commons
  • 11. Charles Minard (1781 - 1870) Flow Diagram Multi-Vector Information Visualisation This is a file from the Wikimedia Commons
  • 12. Tools for collection are far more successful to date than those for exploration
  • 13. New Influences Simulation - 3D What if? Monitor - Real time data Collabouration - Many Eyes
  • 14. The Challenges to the Use of Visualisation Too Easy to confuse, miscommunicate or downright lie Break or lack basic visual design principles Fail to understand the data, the audience or the problem being solved Fail to appreciate the visceral or emotional power of graphics Lack of technical skills in this domain
  • 15. Structured Data Presentation Tools (a tiny subset) Webservices Frameworks TimeFlow Gephi Google Fusion Tables Exhibit (Exercise) Many Eyes GraphViz Prefuse Hosted D3 Omeka (Omeka) Processing
  • 21. Setup and Preparation Do Not Use Safari - Firefox or Chrome should be X fine You can find instructions at: http://myeye.ie/ftp1/ exhibit/recipe.txt Need to copy datafiles: http://myeye.ie/ftp1/exhibit/nobelists.js?action=raw http://myeye.ie/ftp1/exhibit/index1.html
  • 22. 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
  • 23. So What?... Little programming (JavaScript Template); No database (JSON text); a series of useful ‘instantly interactive’ visualisations.
  • 24. Background http://www.simile-widgets.org/exhibit/ A couple examples… Canadian Network for Economic History Comox Valley Crime Stoppers Research at the DHO DHO: Discovery
  • 25. Exhibit in a Nutshell
  • 26. 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>
  • 27. 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" }, ……… ] }
  • 29. Add Faceted Browsing Explore data in context Filter data by attributes
  • 30. 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>
  • 32. Search Code <div ex:role="facet" ex:facetClass="TextSearch"></div>
  • 33. Add a Table View
  • 34. 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>
  • 36. 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>
  • 37. Add a Map View
  • 38. 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
  • 39. Moving Beyond with Exhibit Ensemble Project Advanced Tutorial: http://ensemble.ljmu.ac.uk/q/calbooklet
  • 40. OMEKA for Curated Collections http://omeka.net
  • 41. 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
  • 42. 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
  • 43. Where to go next http://datajournalism.stanford.edu/ Bamboo - DIRT (Digital Research Toolkit) Timeline Tools Visualisation in Education Visual Complexity
  • 44. Academic Visualisation? There’s lots of published papers out there ...what can you do with them? http://www.autodeskresearch.com/projects/citeology
  • 45. The Life on An Idea through Citations
  • 47. Data Visualisation Lessons from Tufte 1. Show the Data 2. Provoke Thought about the Subject at Hand 3. Avoid Distorting the Data 4. Present Many Numbers in a Small Space 5. Make Large Datasets Coherent 6. Encourage Eyes to Compare Data 7. Reveal Data at Several Levels of Detail 8. Serve a Reasonably Clear Purpose 9. Be Closely Integrated with Statistical and Verbal Descriptions of the Dataset
  • 48. What Visual Techniques Exist? Connecting your data with the right visualisation What is your message? How do we know what we might use? Start with your Exploratory/Research/Analytical Environment (last seminar) How do visuals fit into your narrative?
  • 49. What Visual Techniques Exist? Connecting your data with the right visualisation
  • 50. Thanks for your attention