Multifaceted classifications and interactive visualization for exploratory experiences

3,056 views

Published on

My lecture for the course "Information a

Published in: Education

Multifaceted classifications and interactive visualization for exploratory experiences

  1. 1. Multifaceted classification and visualization for exploratory experiences<br />Luigi Spagnolo<br />luigi.spagnolo@polimi.it<br />1<br />Information and CommunicationQuality<br />
  2. 2. Index<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />2<br />Loooong and boring lecture! :-)<br />Part I: classifications and faceted search<br />Break<br />Part II: Advanced visualization of contents<br />Break<br />Part III: Introduction to Simile Exhibit<br />
  3. 3. 3<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences<br />Part 1 | Classifications and facetedsearch<br />(Amazon’s Diamondsearchwasone of the first e-commerce applications of facetedsearch)<br />
  4. 4. Let’s start with a scenario<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />4<br />1-2 volunteersplease!<br />Imagine to work as journalists for the Horse Illustrated magazine<br />You have to write an essay about horses in art (and in particular in painting) among the centuries. <br />Find interesting information on the website of the Louvre Museum<br />http://www.louvre.fr/llv/commun/home.jsp?bmLocale=en<br />
  5. 5. Problemswith the Louvre<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />5<br />Artworks are separated by department (internal “bureaucratic” classification) and by provenience. <br />It is not possible to search them together (regardless of their age and country of origin) by subject. <br />There is no introductory content on the subject that can guide the student in her search. <br />
  6. 6. Content-intensive websites<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />6<br />Also know as:<br />Information-intensive<br />Often Infosuasive= informative + persuasive<br />Like ancient rhetoric: inform and persuade<br />Mainly intended for:<br />Learning, understanding, discovering, comparing information<br />Leisure and entertainment<br />
  7. 7. Contents<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />7<br />Text, multimedia (audio, video, images)<br />Hypermedia = multimedia + hyperlinks<br />Information involvessubjectivejudgment<br />Depends on the author and on the user<br />Objective: “10km far from Como”, “the paintingwasmade in 1886”<br />Subjective: “Near Como”, “the paintingisimpressionist”<br />
  8. 8. Userexperiencesrequirements | 1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />8<br />From the users’ point of view:<br />Usability: usage is effective, efficient and satisfactory<br />Findability: users can locate what they are looking for<br />“At a glance” understandabity: users understand the website coverage and can make sense of information <br />Enticing explorability: users are compelled to “stay and play” and discover interesting connections among topics<br />
  9. 9. Userexperiencesrequirements | 2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />9<br />From the stakeholders’ point of view:<br />Planned serendipity: promoting most important contents so that users can stumble in them<br />E.g. “Readers that purchased this book also bought…”<br />Communication strengh and branding: the website conveys the intended “message” and “brand” of the institution behind it<br />E.g. “we have the lowest prices”, “we are very authorithative”, etc. <br />
  10. 10. Information architecture<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />10<br />Purpose: conceptually organizing information<br />Providing access to contents<br />Index navigation (a)<br />Guided navigation (b)<br />Providing the possibility of moving from a content to related ones<br />Contextual navigation (c): cross-reference links, semantic relationships<br />
  11. 11. “Traditional” structure<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />11<br />Taxonomy: hierarchy of categories and subcategories<br />Sections and group of contents are the branches of the tree<br />Contents are the leaves<br />Cross-reference links between nodes <br />
  12. 12. An example<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />12<br />Sitemap:<br />Art gallery website<br />Artworks of the month<br />Paintings<br />Top 10 masterpieces <br />By artist <br />By artistic movement<br />By subject <br />Sculptures<br />...<br />By material<br />Photographs<br />...<br />
  13. 13. Problems/1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />13<br />Whatif I wanttobrowseallartworks (regardlesstheirtype) byartist?<br />Classifications are “nested” in a fixedorder<br />Designersshouldchoosewhichclassificationshouldprevail (e.g. bytype)<br />Whatif I wanttofind “impressionistspaintingsportrainganimals”?<br />I cannot combine multiple “sibling”classifications (e.g. by style and bysubject)<br />
  14. 14. Problems/2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />14<br />As long as the website issmall a goodtaxonomy can satisfyuserrequirements<br />Forlarge websites <br />(hundreds or thousand of pages)<br />Indexed/guidednavigationdoesn’t scale<br />Users can’t easilyfindwhattheywant<br />Users can’t makesense of allsuch information<br />
  15. 15. Solutions?<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />15<br />What do users do whennavigationdoesn’t work?<br />Theyusesearch!<br />Searcharrangescontentsdynamically and automatically (in a way notpredefinedbydesigners)<br />Butkeyword-basedsearchisnotoptimal<br />No hintsforusersthathave no clear idea of whatto look<br />Weneed a betterparadigm: Exploratorysearch<br />
  16. 16. Exploratorysearch<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />16<br />The model “query  results” is too simple<br />Usually search is like “berry picking” (Bates)<br />We analyze search results and...<br />We refine query (again and again) to get better results<br />We need hints (filters) for refinements<br />Fromfinding to understanding (Marchionini)<br />
  17. 17. Facetedsearch<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />17<br /><ul><li>A exploratory search/navigation pattern based on progressive filtering of results
  18. 18. The user selects a combination of metadata values belonging to several facets
  19. 19. Each facet correspond to a particular orthogonal dimension that describes the content objects made available for search, e.g. for an artwork:
  20. 20. Subject: people portrayed, flowers and plants, abstract...
  21. 21. Medium: painting, sculpture, photography...
  22. 22. Technique: oil, watercolors, digital art...
  23. 23. Style: impressionism, expressionism, abstractism...
  24. 24. Location: Prado, Louvre, Guggenheim </li></li></ul><li>18<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />Let’s seewhatwe’re talkingabout! :)<br />Two examples: <br />http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco<br />http://www.artistrising.com<br />Try the same search we’ve seen before (volunteers again!): find horses in art<br />More examples at: http://www.flickr.com/photos/morville/collections/72157603789246885/<br />
  25. 25. How the interactionworks<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />19<br />When the user chooses a filter, the application selects:<br />The results: items that have been “tagged” with the filter and the other metadata previously chosen<br />The remaining filters: metadata that combined with the previous choices can produce results<br />The users can continue narrowing results until they options are available <br />
  26. 26. Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />20<br />Howvalues are (usually) combined<br />Filtersbelongingtodifferentfacetsare combined in conjunction<br />E.g. “technique:oil” AND “style:impressionism”<br />Filtersbelongingto the samefacetare:<br />Combined in conjunctionif the facetadmits more values at the sametimeforeachobject<br />E.g. “subject:people” AND “subject:animals” <br />(both people and animals in the samepicture)<br />Combined in disjunctionif the facetadimitsonlyonevalue<br />E.g. “location:Milan” OR “location:Como” <br />(anobjectwhichis Como or in Milan)<br />
  27. 27. Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />21<br />Type of facets<br />Single-valued vs. multi-valued<br />Flat vs. hierarchical organization of values<br />E.g. hierarchical: nation/region/province<br />Subjective/arbitrary (properly named facets) vs. objective (attributes)<br />A date, a location, a price are examples of objectivedata<br /> “Topic”, “Audience”, “Artistic movement”, “importance” are examples of subjective information<br />Assigning/using a value involves some kind of judgment and interpretation and is influenced by cultural and personal backgrounds<br />
  28. 28. Type of facetvalues<br />Sortable and comparable? <br />We can say that value1<=value2<=…<=valueN? <br />E.g. Dates, magnitudes, scales of judgment, quantitative data <br />e.g. “sufficient”<“excellent”, 10€<100€, “Monday”<“Friday”<br />Ranges [value1, value2]<br />E.g. User is allowed to search for events from 01/06 to 31/08<br />Classes of values <br />e.g. for price: 0-10€, 11-20€, 21-50€, 51-100€, …<br />The way we define classes is arbitrary and depend on domain<br />Terms (strings of text)<br />Taxonomies, controlled vocabularies<br />User-defined tags (folksonomies)<br />From data-mining<br />Numerical values and dates<br />Boolean values (yes/no)<br />E.g. “Available for buying?”, “original?”, “still living?”<br />Even shades of color, shapes, etc...<br />22<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />
  29. 29. Benefits of facetedsearch<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />23<br />Easy and naturalalmostlike “traditional” browsing<br />Withrespecttokeyword-basedsearchusershavehints recognitionraterthanrecall<br />Users can freely combine multiple classificationsaccordingtotheywishes<br />Users can more easilymakesense of information (ifsupportedbygoodinterfaces)<br />Frustrating “no resultsfound” searchesavoided<br />
  30. 30. Limitations of facetedsearch | 1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />24<br />Too more facets and facetsvaluesmay generate information overloadtoo!<br />Possiblesolution: Display only the mostrelevantfacets (and facetvalues) for the userprofile or the givencontext<br />The relevance of an item with respect to a facet value can assumes only two states:<br />Relevant (1): the item is tagged with a certain facet value<br />Not relevant (0): The item is not tagged with that facet value<br />Too poor model in some cases<br />
  31. 31. Limitations of facetedsearch | 2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />25<br />No oneexplainuswhat a certainfacetvaluesmeans<br />Possibile solutions: images and tooltips (wewilldiscusslater)<br />We can filteritems, butwe can’t filterfacetvalues!<br />E.g. paintingsfilteredbyartists<br />We can’t filter the Artistsfacetvaluesbynationality, gender, age, etc. <br />We can’t sortautomaticallyitemsbyrelevance (like “traditional” information retrievaldoes)<br />
  32. 32. Research: beyondfacetedsearch | 1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />26<br />Semanticbrowsing<br />Exploringcontents at level of setsusingsemanticrelationships, e.g.<br />The museumsthathave bronze Greekstatues<br />“Women portrayedby women”: paintingswithsubject:woman and artist:gender:female<br />Schoolsattendedby the daughters of U.S. democraticpresidents (http://www.freebase.com/labs/parallax/)<br />Challenges: effectivemodels and usable interface<br />
  33. 33. Research: beyondfacetedsearch | 2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />27<br />Fuzzyfacets<br />Multiple fuzzylevels of relevance/importancefor a facetvalue<br />E.g. a church built among the centuries may be at a 70% Romanic and at a 30% gothic as style<br />E.g. two monuments may be both Roman, but one can be more artistically important (for Roman civilization) than the other. <br />Multiple degrees of relevance could allow to calculate the ranking of results by relevance to the contexts. <br />
  34. 34. Fuzzyfacets<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />28<br />Some concepts…<br />
  35. 35. References<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />29<br />Hearst, M. A. (2009). Search User Interfaces. Cambridge: Cambridge University Press.<br />http://searchuserinterfaces.com/book/sui_ch8_navigation_and_search.htmlAvailablefor free!<br />Marchionini, G. (2006). Exploratory search: from finding to understanding. Communications of the ACM, 49, 41 – 46.<br />Tunkelang, D. (2009). Faceted Search, in Marchionini, G. (ed.), Synthesis Lectures on Information Concepts, Retrieval, and Services. San Rafael, CA: Morgan & Claypool Publishers.<br />Yee, K. P., Swearingen, K., Li, K., & Hearst, M. (2003). Faceted metadata for image search and browsing. CHI '03: Proceedings of the SIGCHI conference on Human factors in computing systems, 401–408.<br />Morville, P. and Callender, J. (2010). Search patterns. Sebastopol, CA: O'Reilly.<br />
  36. 36. Part 2 | Advancedvisualization of contents<br />30<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences<br />
  37. 37. Whyvisualization?<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />31<br />Facets are conceptuallyorthogonal, but…<br />In reality manyphenomenon are correlated<br />E.g. antiquitiesbelongingtoCelticcivilization are foundonly in Northern Italy<br />Learningisinvestigating and findingconnectionsbetweendifferentaspects<br />Weneed (intuitive) visualrepresentationsto compare information and put on evidencecorrelations<br />A goodmodelisimportant, butaneffectivevisualizationreallymakes the difference<br />
  38. 38. Visualizingwhat?<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />32<br />Facets and facetsvalues:<br />Tagclouds, hierarchicalvisualizations, etc.<br />Contentitems (exploratorysearchresults)<br />Interactivelists (allowingdinamicgrouping/sorting)<br />Thematicmaps: forgeographically-relatedfeatures<br />Statisticalgraphics<br />Turningexploratorysearchinto (intuitive) exploratory data analysis<br />
  39. 39. Let’s seeanexample<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />33<br />An interactivemapof archaeologicalvenuesin Italy:<br />From the new website of the Directorate-GeneralforAntiquities(ItalianMinistry of Culture)<br />Prototypemadebyus at the HOC-Lab<br />http://hoc5.elet.polimi.it/archeo/index.php/eng/Mappa-archeologica/Mappa-interattiva<br />
  40. 40. Tagclouds<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />34<br />Originallyconceivedfor folksonomies<br />The size of the link shows the frequency (importance) of the facetvalue inside the collection of items<br /> : number of itemstaggedwithfacetvalue<br />
  41. 41. Proportional vs. Linear scaling<br />Powerlaw: fewterms are usedtotag the highestmajority of items<br />Proportionalscaling<br />Tagsizes are directlyproportionaltotheirfrequency<br />fewwords are very big, many are veryverysmall<br />Linear scaling<br />Tagsizes are based on the logarithm of theirfrequency<br />The difference of sizeissmoother<br />35<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />
  42. 42. Calculating a tagcloud<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />36<br />Highest and lowestfrequencyfound<br />Largest and smallestsizedesired<br />Highestdifference in size<br />Wewanttodetermine the size of eachfacetvalue link <br />Proportionalscaling<br />Linear scaling<br />
  43. 43. Visualizinghierarchicalfacets<br />37<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />Tree-basedvisualization<br />Tooltips<br />
  44. 44. Conveying the meaningof facetvalues<br />38<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />Using<br />icons<br />Usingtooltips (concept)<br />
  45. 45. Conjuntive vs. disjunctive facets<br />39<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />Conjunctive (usuallyplainlinks)<br />Disjunctive (checkboxes)<br />
  46. 46. Geographical information<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />40<br />Thematicmapsvisuallyrepresentone or more featureson a geographical area<br />Digital, interactivethematicmaps<br />Users can zoom and/or adjustvisualization in some way<br />Users can filteritems<br />More features at once: multivariate thematicmap<br />Differentsigns (shapes, colors, icons) can beusedforshowing more characteristics on the samemap<br />Avoid mixing shapes, colors and iconstogether: the resultmaybeverymessy!<br />
  47. 47. Dot map<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />41<br />Simplestthematicmap<br />One placemark = one item at itsexact location (like in Google Maps), or<br />Onesign = k items in that area<br />Differentsigns (shapes, colors, icons) can beusedforshowing more characteristics on the samemap<br />May bemessyifmanyitems are concentrated in a small area<br />Expecially at low levels of zoom<br />Expecially multivariate dot maps<br />
  48. 48. Graduatedsymbolmap | 1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />42<br />AlsocalledProportionalsymbolmap<br />The mapisdividedintoareas<br />(e.g. administrativeareas)<br />Onesignforeach area (single feature)<br />Onesignforeach of N features in each area (multivariate)<br />The size of the signchangesaccordingto the number of itemswithfeature X on area Y<br />Proportial, linear, classscalings<br />Multivariate versiontendstobemessyifyou display toomuchvalues at one<br />
  49. 49. Graduatedsymbolmap | 2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />43<br />Advantages<br />Statisticaldistribution on a certain area clearlyshowed<br />(Withrespectto dot map) overlapping of signsavoided<br />Disadvantages<br />Multivariate versiontendstobemessyifyou display toomuchvalues at once (e.g. facetswithmanydistinctvalues)<br />The scalingshouldbecarefullychosentoavoidtoohuge or toosmallsigns<br />
  50. 50. Pie chart map | 1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />44<br />Similarto multivariate graduate symbolmap<br />The mapisdividedintoareas<br />(e.g. administrativeareas)<br />Onecircle (pie) foreach area<br />Each part is cut intoslices<br />The size of the sliceisproportionalto the number of itemswithfeature X on area Y<br />
  51. 51. Pie chart map | 2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />45<br /><ul><li>Withrespectto multivariate graduate symbolmap…</li></ul>Advantages <br />Lessmessywhenyouhaveto show a lotfeatures at once<br />Disadvntages<br />Featureswith low frequency are lessvisible<br />Analogouslywecouldhavehistogram chart maps<br />
  52. 52. Choroplethmap | 1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />46<br />Using colors, shades or patterns<br />The map is still divided into areas <br />Each area is colored/patterned/shaded according to the feature to show<br />High communicative strengh, but…<br />
  53. 53. Choroplethmap | 2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />47<br />A single area maybecolored/shaded/patternedaccording on mutuallyescusivevalues<br />E.g. Regionsthat are governedbyleft vs. rightparties<br />Single-valuedfacetsonly<br />
  54. 54. Choroplethmap | 3<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />48<br />The gradient of shade/color maybeproportialto the frequency of a single feature<br />E.g. number of earthquakes, population<br />To show more features at onesyoushouldoverlapcolors or patterns: toomessy<br />Youneed a mapforeachfacet vale<br />
  55. 55. Non-geographical information<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />49<br />Statisticalgraphics<br />Scatter plot charts<br />Network diagrams<br />Conceptualmaps<br />Matrix charts<br />Histograms and bar charts<br />Representationsshouldbe intuitive ifthey are conceivedfor websites<br />We can’t expectthatuserslearnhowto “read” them!<br />Itdepends on the type of users<br />
  56. 56. Scatter plot<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />50<br />Classicalstatisticaldiagram<br />Showscorrelationsbetween a feature on the x axis and a feature on the y axis<br />For quantitative data<br />Good impact onlyfor “expert” user<br />
  57. 57. Matrix chart<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />51<br />Showscorrelationsbetweenvaluesbelongingtotwofacets in row and columns<br />Valuesanalyzed in pairs<br />The size of the circleshowshowmanyitems are taggedwith the coupleof values<br />E.g. Classesparticipatingto Politecnico di Milano programsbyyear and type of schools<br />Can beread in twoways<br />Howparticipationchangedamongyearsforschool X (rows)<br />Howparticipationisdistributedamongschools in year X (columns)<br />
  58. 58. Rich interface required<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />52<br />AJAX (javaScript)<br />Adobe Flash (Actionscript)<br />Higherresponsiveness:<br />Users don’t needtowaituntil the wholepageisrefreshed<br />Only the changedelements are updated (by the script)<br />
  59. 59. References<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />53<br />Andrienko G. and Andrienko N. (1999). interactive maps for visual data exploration. Journal of Geographical Information Science, Vo. 10, 4, 335-374.<br />http://geoanalytics.net/and/papers/ijgis99.pdf<br />https://www.e-education.psu.edu/geog486/l5_p1.html<br />http://thematicmapping.org/playground/<br />http://manyeyes.alphaworks.ibm.com/manyeyes/page/Visualization_Options.html<br />Hearst, M. A. (2009). Search User Interfaces. Cambridge: Cambridge University Press.<br />http://searchuserinterfaces.com/book/sui_ch11_text_analysis_visualization.htmlAvailablefor free!<br />Smith, G. (2008). Tagging: people powered metadata for the Social web. New Riders. <br />Tunkelang, D. (2009). Faceted Search, in Marchionini, G. (ed.), Synthesis Lectures on Information Concepts, Retrieval, and Services. San Rafael, CA: Morgan & Claypool Publishers.<br />Morville, P. and Callender, J. (2010). Search patterns. Sebastopol, CA: O'Reilly.<br />
  60. 60. Part 3 | Introductionto Simile Exhibit<br />54<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences<br />
  61. 61. Simile Exhibit<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />55<br />Lightweightframeworkforweb data publishing<br />Web of data and advancedvisualizationforeverybody! :-)<br />Part of the project Simile<br />Semantic Interoperability of Metadata and Information in unLike Environments<br />Created by David Huynh et al. at the CSAIL lab of the MIT<br />Completely client-side (Javascript)<br />Doesnotrequiretowrite server-side code<br />
  62. 62. Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />56<br />Simile Exhibit<br />
  63. 63. JSON<br />A way forencoding and exchanging data<br />Nice alternative to XML for AJAX applications<br />JSON objects are easilymanaged in JavaScript and main server-side scriptinglanguages (PHP, Java, .Net, Ruby…)<br />57<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />
  64. 64. Whatauthorsneedto do<br />{ properties: { "co-winner" : <br /> { valueType: "item" } <br /> }, <br /> "items" : [ <br /> { type : "Nobelist", <br />label : "Burton Richter",<br /> discipline : "Physics", shared : "yes", <br /> ...<br /> },<br /><divex:role="view" ex:viewClass="Timeline" ex:start=".nobel-year" ex:colorKey=".discipline"> </div> <br />...<br /><divex:role="facet" ex:expression=".discipline" ex:facetLabel="Discipline"><br /></div> <br />58<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />Create/import JSON<br />Write/generate HTML code<br />
  65. 65. Exhibit data model<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />59<br />Contents/objects are calleditems<br />Eachitem has some properties<br />Special properties: id, label, type<br />Properties also specify semantic relationships between items<br />
  66. 66. Exhibitexpressions<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />60<br />Pathsusedto “navigate” items and properties<br />Evaluating .author.labelon “Da Vinci code” returns "Dan Brown”<br />Evaluating !author.labelon "Dan Brown” returns the titles of his book<br />Evaluating .attends!teaches.ageon the student of a course returns the age of the teacher<br />Paths can also start with a predefined variable:<br />value: current item or vakue<br />index: the index of the current item or value in a sequence of items or values<br />value.author.nationalityequals to .author.nationality<br />
  67. 67. Facets<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />61<br />Properties of items can beusedtofilter/searchthem<br />E.g. <divex:role="facet" ex:facetClass="Cloud" ex:expression=".subject"> </div><br />List facet<br />Tag cloud<br />Hierarchical facet<br />Slider (numerical ranges)<br />Calendar (range of dates)<br />Image facet<br />Keyword-based search<br />The values of the same facet are combined disjuctively<br />
  68. 68. Views<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />62<br />Differentwaysfordisplaying the collection of items<br />E.g. <divex:role="view" ex:viewClass="Map"  <br />ex:latlng=".latlng" > </div><br />List<br />Thumbnails<br />Table<br />Timeline (displaying according to time)<br />Scatterplot, matrix table, etc.<br />
  69. 69. Multivariate graduatedsymbolmaps<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />63<br />Multivariate graduatedsymbolmapsneed some tricks:<br />Associate itemswith a certainpropertyvalue in a given area to a certainplaceholder<br />{label: "Musei Lombardy“, type: "RegSet", <br />region: "Lombardy“, lat: "45.7791", lng: "9.84524"}<br />Use the placeholdercoordinatesto display all the associateditems in the samepoint<br />Exhibit code ismodifiedtochange the size of the markedaccordingto the number of items<br />
  70. 70. Getgeographical data from Google<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />64<br />Google GeoCoding web service<br />http://maps.google.com/maps/api/geocode/json?address=your+location&sensor=false<br />Examples<br />http://maps.google.com/maps/api/geocode/json?address=friuli+venezia+giulia&sensor=false<br />Centroid of the region (or exact location): "location": { "lat": 45.7388878, "lng": 7.4261866 }<br />Boundingrectangle: "bounds": {"southwest": {"lat": 45.4671101, "lng": 6.8008598 }, "northeast": {"lat": 45.9878767, "lng": 7.9399057 } }<br />
  71. 71. Calculatingplaceholderscoordinates | 1<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />65<br />Regionswith centroid at coordinates (long) and (lat)<br />Number of facetvalues: Rotation: Radius (constant) <br />
  72. 72. Calculatingplaceholderscoordinates | 2<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />66<br />Foreachregion<br />Foreachfacetvalue in<br />Set coordinates of the placeholder:<br />Longitude<br />Latitude<br />
  73. 73. Lenses<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />67<br />Differentwaysfordisplaying the single item preview<br /><divclass="search_collectionItem" ex:role="lens" style="display:none;"> <br /><h3><a ex:href-content=“.url"><span ex:content=".label"></span></a></h3> <br /><divclass=“item-content“><img ex:src-content=".imageURL" /><br />Civilizations and Periods: <span ex:content=".topic""></span><br />Location: <span ex:content=".inside.province""></span>, <span ex:content=".inside.superset.region""></span></div> <br /><p ex:if-exists=".abstract"><span ex:content=".abstract"></span></p> <br /></div> <br />
  74. 74. References<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />68<br />http://www.simile-widgets.org/exhibit/<br />http://simile.mit.edu/wiki/Exhibit/For_AuthorsMandatory!<br />Huynh, D. F., Karger, D. R. & Miller R. C. (2007). Exhibit: Lightweight structured data publishing. Proceedings of the 16th International WWW Conference, 737–746.<br />
  75. 75. Your project<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />69<br />Identify a smallcollection of itemsconnectedto the topic of your narrative<br />E.g. tourism in yourcountry mostimportantplaces<br />Approximately 20 itemsforeachcomponent of the group<br />Don’t focus on the content of the single item (you can retrieveitfrom the web), but…<br />Focus on multifacetedclassufication: chooseinterestingfacets<br />Decide visualization<br />At least 2 interestingviews<br />More viewsforlargergroups<br />UseExhibit (contact me forsupport)<br />
  76. 76. Interested in MS Theses? Contactus! :-)<br />Advisors: Prof. Di Blas, Prof. Paolini<br />Boththeoretical and development<br />Fuzzyfacets<br />Semanticbrowsing<br />Advancedvisualizations<br />…<br />Yourownideas! :-)<br />70<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences<br />
  77. 77. Are youstillalive/awake? <br />Thankyouforyourattention!<br />Anyfinalquestions?<br />71<br />Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo<br />

×