Multifaceted classifications and interactive visualization for exploratory experiences

Multifaceted classification and visualization for exploratory experiences
Luigi Spagnolo
luigi.spagnolo@polimi.it
1
Information and CommunicationQuality

Index
Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo
2
Loooong and boring lecture! :-)
Part I: classifications and faceted search
Break
Part II: Advanced visualization of contents
Break
Part III: Introduction to Simile Exhibit

3
Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences
Part 1 | Classifications and facetedsearch
(Amazon’s Diamondsearchwasone of the first e-commerce applications of facetedsearch)

Let’s start with a scenario
4
1-2 volunteersplease!
Imagine to work as journalists for the Horse Illustrated magazine
You have to write an essay about horses in art (and in particular in painting) among the centuries.
Find interesting information on the website of the Louvre Museum
http://www.louvre.fr/llv/commun/home.jsp?bmLocale=en

Problemswith the Louvre
5
Artworks are separated by department (internal “bureaucratic” classification) and by provenience.
It is not possible to search them together (regardless of their age and country of origin) by subject.
There is no introductory content on the subject that can guide the student in her search.

Content-intensive websites
6
Also know as:
Information-intensive
Often Infosuasive= informative + persuasive
Like ancient rhetoric: inform and persuade
Mainly intended for:
Learning, understanding, discovering, comparing information
Leisure and entertainment

Contents
7
Text, multimedia (audio, video, images)
Hypermedia = multimedia + hyperlinks
Information involvessubjectivejudgment
Depends on the author and on the user
Objective: “10km far from Como”, “the paintingwasmade in 1886”
Subjective: “Near Como”, “the paintingisimpressionist”

Userexperiencesrequirements | 1
8
From the users’ point of view:
Usability: usage is effective, efficient and satisfactory
Findability: users can locate what they are looking for
“At a glance” understandabity: users understand the website coverage and can make sense of information
Enticing explorability: users are compelled to “stay and play” and discover interesting connections among topics

Userexperiencesrequirements | 2
9
From the stakeholders’ point of view:
Planned serendipity: promoting most important contents so that users can stumble in them
E.g. “Readers that purchased this book also bought…”
Communication strengh and branding: the website conveys the intended “message” and “brand” of the institution behind it
E.g. “we have the lowest prices”, “we are very authorithative”, etc.

Information architecture
10
Purpose: conceptually organizing information
Providing access to contents
Index navigation (a)
Guided navigation (b)
Providing the possibility of moving from a content to related ones
Contextual navigation (c): cross-reference links, semantic relationships

“Traditional” structure
11
Taxonomy: hierarchy of categories and subcategories
Sections and group of contents are the branches of the tree
Contents are the leaves
Cross-reference links between nodes

An example
12
Sitemap:
Art gallery website
Artworks of the month
Paintings
Top 10 masterpieces
By artist
By artistic movement
By subject
Sculptures
...
By material
Photographs
...

Problems/1
13
Whatif I wanttobrowseallartworks (regardlesstheirtype) byartist?
Classifications are “nested” in a fixedorder
Designersshouldchoosewhichclassificationshouldprevail (e.g. bytype)
Whatif I wanttofind “impressionistspaintingsportrainganimals”?
I cannot combine multiple “sibling”classifications (e.g. by style and bysubject)

Problems/2
14
As long as the website issmall a goodtaxonomy can satisfyuserrequirements
Forlarge websites
(hundreds or thousand of pages)
Indexed/guidednavigationdoesn’t scale
Users can’t easilyfindwhattheywant
Users can’t makesense of allsuch information

Solutions?
15
What do users do whennavigationdoesn’t work?
Theyusesearch!
Searcharrangescontentsdynamically and automatically (in a way notpredefinedbydesigners)
Butkeyword-basedsearchisnotoptimal
No hintsforusersthathave no clear idea of whatto look
Weneed a betterparadigm: Exploratorysearch

Exploratorysearch
16
The model “query  results” is too simple
Usually search is like “berry picking” (Bates)
We analyze search results and...
We refine query (again and again) to get better results
We need hints (filters) for refinements
Fromfinding to understanding (Marchionini)

Facetedsearch
17
A exploratory search/navigation pattern based on progressive filtering of results
The user selects a combination of metadata values belonging to several facets
Each facet correspond to a particular orthogonal dimension that describes the content objects made available for search, e.g. for an artwork:
Subject: people portrayed, flowers and plants, abstract...
Medium: painting, sculpture, photography...
Technique: oil, watercolors, digital art...
Style: impressionism, expressionism, abstractism...
Location: Prado, Louvre, Guggenheim

18
Let’s seewhatwe’re talkingabout! :)
Two examples:
http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco
http://www.artistrising.com
Try the same search we’ve seen before (volunteers again!): find horses in art
More examples at: http://www.flickr.com/photos/morville/collections/72157603789246885/

How the interactionworks
19
When the user chooses a filter, the application selects:
The results: items that have been “tagged” with the filter and the other metadata previously chosen
The remaining filters: metadata that combined with the previous choices can produce results
The users can continue narrowing results until they options are available

20
Howvalues are (usually) combined
Filtersbelongingtodifferentfacetsare combined in conjunction
E.g. “technique:oil” AND “style:impressionism”
Filtersbelongingto the samefacetare:
Combined in conjunctionif the facetadmits more values at the sametimeforeachobject
E.g. “subject:people” AND “subject:animals”
(both people and animals in the samepicture)
Combined in disjunctionif the facetadimitsonlyonevalue
E.g. “location:Milan” OR “location:Como”
(anobjectwhichis Como or in Milan)

21
Type of facets
Single-valued vs. multi-valued
Flat vs. hierarchical organization of values
E.g. hierarchical: nation/region/province
Subjective/arbitrary (properly named facets) vs. objective (attributes)
A date, a location, a price are examples of objectivedata
“Topic”, “Audience”, “Artistic movement”, “importance” are examples of subjective information
Assigning/using a value involves some kind of judgment and interpretation and is influenced by cultural and personal backgrounds

Type of facetvalues
Sortable and comparable?
We can say that value1<=value2<=…<=valueN?
E.g. Dates, magnitudes, scales of judgment, quantitative data
e.g. “sufficient”<“excellent”, 10€<100€, “Monday”<“Friday”
Ranges [value1, value2]
E.g. User is allowed to search for events from 01/06 to 31/08
Classes of values
e.g. for price: 0-10€, 11-20€, 21-50€, 51-100€, …
The way we define classes is arbitrary and depend on domain
Terms (strings of text)
Taxonomies, controlled vocabularies
User-defined tags (folksonomies)
From data-mining
Numerical values and dates
Boolean values (yes/no)
E.g. “Available for buying?”, “original?”, “still living?”
Even shades of color, shapes, etc...
22

Benefits of facetedsearch
23
Easy and naturalalmostlike “traditional” browsing
Withrespecttokeyword-basedsearchusershavehints recognitionraterthanrecall
Users can freely combine multiple classificationsaccordingtotheywishes
Users can more easilymakesense of information (ifsupportedbygoodinterfaces)
Frustrating “no resultsfound” searchesavoided

Limitations of facetedsearch | 1
24
Too more facets and facetsvaluesmay generate information overloadtoo!
Possiblesolution: Display only the mostrelevantfacets (and facetvalues) for the userprofile or the givencontext
The relevance of an item with respect to a facet value can assumes only two states:
Relevant (1): the item is tagged with a certain facet value
Not relevant (0): The item is not tagged with that facet value
Too poor model in some cases

Limitations of facetedsearch | 2
25
No oneexplainuswhat a certainfacetvaluesmeans
Possibile solutions: images and tooltips (wewilldiscusslater)
We can filteritems, butwe can’t filterfacetvalues!
E.g. paintingsfilteredbyartists
We can’t filter the Artistsfacetvaluesbynationality, gender, age, etc.
We can’t sortautomaticallyitemsbyrelevance (like “traditional” information retrievaldoes)

Research: beyondfacetedsearch | 1
26
Semanticbrowsing
Exploringcontents at level of setsusingsemanticrelationships, e.g.
The museumsthathave bronze Greekstatues
“Women portrayedby women”: paintingswithsubject:woman and artist:gender:female
Schoolsattendedby the daughters of U.S. democraticpresidents (http://www.freebase.com/labs/parallax/)
Challenges: effectivemodels and usable interface

Research: beyondfacetedsearch | 2
27
Fuzzyfacets
Multiple fuzzylevels of relevance/importancefor a facetvalue
E.g. a church built among the centuries may be at a 70% Romanic and at a 30% gothic as style
E.g. two monuments may be both Roman, but one can be more artistically important (for Roman civilization) than the other.
Multiple degrees of relevance could allow to calculate the ranking of results by relevance to the contexts.

Fuzzyfacets
28
Some concepts…

References
29
Hearst, M. A. (2009). Search User Interfaces. Cambridge: Cambridge University Press.
http://searchuserinterfaces.com/book/sui_ch8_navigation_and_search.htmlAvailablefor free!
Marchionini, G. (2006). Exploratory search: from finding to understanding. Communications of the ACM, 49, 41 – 46.
Tunkelang, D. (2009). Faceted Search, in Marchionini, G. (ed.), Synthesis Lectures on Information Concepts, Retrieval, and Services. San Rafael, CA: Morgan & Claypool Publishers.
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.
Morville, P. and Callender, J. (2010). Search patterns. Sebastopol, CA: O'Reilly.

Part 2 | Advancedvisualization of contents
30

Whyvisualization?
31
Facets are conceptuallyorthogonal, but…
In reality manyphenomenon are correlated
E.g. antiquitiesbelongingtoCelticcivilization are foundonly in Northern Italy
Learningisinvestigating and findingconnectionsbetweendifferentaspects
Weneed (intuitive) visualrepresentationsto compare information and put on evidencecorrelations
A goodmodelisimportant, butaneffectivevisualizationreallymakes the difference

Visualizingwhat?
32
Facets and facetsvalues:
Tagclouds, hierarchicalvisualizations, etc.
Contentitems (exploratorysearchresults)
Interactivelists (allowingdinamicgrouping/sorting)
Thematicmaps: forgeographically-relatedfeatures
Statisticalgraphics
Turningexploratorysearchinto (intuitive) exploratory data analysis

Let’s seeanexample
33
An interactivemapof archaeologicalvenuesin Italy:
From the new website of the Directorate-GeneralforAntiquities(ItalianMinistry of Culture)
Prototypemadebyus at the HOC-Lab
http://hoc5.elet.polimi.it/archeo/index.php/eng/Mappa-archeologica/Mappa-interattiva

Tagclouds
34
Originallyconceivedfor folksonomies
The size of the link shows the frequency (importance) of the facetvalue inside the collection of items
: number of itemstaggedwithfacetvalue

Proportional vs. Linear scaling
Powerlaw: fewterms are usedtotag the highestmajority of items
Proportionalscaling
Tagsizes are directlyproportionaltotheirfrequency
fewwords are very big, many are veryverysmall
Linear scaling
Tagsizes are based on the logarithm of theirfrequency
The difference of sizeissmoother
35

Calculating a tagcloud
36
Highest and lowestfrequencyfound
Largest and smallestsizedesired
Highestdifference in size
Wewanttodetermine the size of eachfacetvalue link
Proportionalscaling
Linear scaling

Visualizinghierarchicalfacets
37
Tree-basedvisualization
Tooltips

Conveying the meaningof facetvalues
38
Using
icons
Usingtooltips (concept)

Conjuntive vs. disjunctive facets
39
Conjunctive (usuallyplainlinks)
Disjunctive (checkboxes)

Geographical information
40
Thematicmapsvisuallyrepresentone or more featureson a geographical area
Digital, interactivethematicmaps
Users can zoom and/or adjustvisualization in some way
Users can filteritems
More features at once: multivariate thematicmap
Differentsigns (shapes, colors, icons) can beusedforshowing more characteristics on the samemap
Avoid mixing shapes, colors and iconstogether: the resultmaybeverymessy!

Dot map
41
Simplestthematicmap
One placemark = one item at itsexact location (like in Google Maps), or
Onesign = k items in that area
Differentsigns (shapes, colors, icons) can beusedforshowing more characteristics on the samemap
May bemessyifmanyitems are concentrated in a small area
Expecially at low levels of zoom
Expecially multivariate dot maps

Graduatedsymbolmap | 1
42
AlsocalledProportionalsymbolmap
The mapisdividedintoareas
(e.g. administrativeareas)
Onesignforeach area (single feature)
Onesignforeach of N features in each area (multivariate)
The size of the signchangesaccordingto the number of itemswithfeature X on area Y
Proportial, linear, classscalings
Multivariate versiontendstobemessyifyou display toomuchvalues at one

Graduatedsymbolmap | 2
43
Advantages
Statisticaldistribution on a certain area clearlyshowed
(Withrespectto dot map) overlapping of signsavoided
Disadvantages
Multivariate versiontendstobemessyifyou display toomuchvalues at once (e.g. facetswithmanydistinctvalues)
The scalingshouldbecarefullychosentoavoidtoohuge or toosmallsigns

Pie chart map | 1
44
Similarto multivariate graduate symbolmap
The mapisdividedintoareas
(e.g. administrativeareas)
Onecircle (pie) foreach area
Each part is cut intoslices
The size of the sliceisproportionalto the number of itemswithfeature X on area Y

Pie chart map | 2
45
Withrespectto multivariate graduate symbolmap…
Advantages
Lessmessywhenyouhaveto show a lotfeatures at once
Disadvntages
Featureswith low frequency are lessvisible
Analogouslywecouldhavehistogram chart maps

Choroplethmap | 1
46
Using colors, shades or patterns
The map is still divided into areas
Each area is colored/patterned/shaded according to the feature to show
High communicative strengh, but…

Choroplethmap | 2
47
A single area maybecolored/shaded/patternedaccording on mutuallyescusivevalues
E.g. Regionsthat are governedbyleft vs. rightparties
Single-valuedfacetsonly

Choroplethmap | 3
48
The gradient of shade/color maybeproportialto the frequency of a single feature
E.g. number of earthquakes, population
To show more features at onesyoushouldoverlapcolors or patterns: toomessy
Youneed a mapforeachfacet vale

Non-geographical information
49
Statisticalgraphics
Scatter plot charts
Network diagrams
Conceptualmaps
Matrix charts
Histograms and bar charts
Representationsshouldbe intuitive ifthey are conceivedfor websites
We can’t expectthatuserslearnhowto “read” them!
Itdepends on the type of users

Scatter plot
50
Classicalstatisticaldiagram
Showscorrelationsbetween a feature on the x axis and a feature on the y axis
For quantitative data
Good impact onlyfor “expert” user

Matrix chart
51
Showscorrelationsbetweenvaluesbelongingtotwofacets in row and columns
Valuesanalyzed in pairs
The size of the circleshowshowmanyitems are taggedwith the coupleof values
E.g. Classesparticipatingto Politecnico di Milano programsbyyear and type of schools
Can beread in twoways
Howparticipationchangedamongyearsforschool X (rows)
Howparticipationisdistributedamongschools in year X (columns)

Rich interface required
52
AJAX (javaScript)
Adobe Flash (Actionscript)
Higherresponsiveness:
Users don’t needtowaituntil the wholepageisrefreshed
Only the changedelements are updated (by the script)

References
53
Andrienko G. and Andrienko N. (1999). interactive maps for visual data exploration. Journal of Geographical Information Science, Vo. 10, 4, 335-374.
http://geoanalytics.net/and/papers/ijgis99.pdf
https://www.e-education.psu.edu/geog486/l5_p1.html
http://thematicmapping.org/playground/
http://manyeyes.alphaworks.ibm.com/manyeyes/page/Visualization_Options.html
Hearst, M. A. (2009). Search User Interfaces. Cambridge: Cambridge University Press.
http://searchuserinterfaces.com/book/sui_ch11_text_analysis_visualization.htmlAvailablefor free!
Smith, G. (2008). Tagging: people powered metadata for the Social web. New Riders.
Tunkelang, D. (2009). Faceted Search, in Marchionini, G. (ed.), Synthesis Lectures on Information Concepts, Retrieval, and Services. San Rafael, CA: Morgan & Claypool Publishers.
Morville, P. and Callender, J. (2010). Search patterns. Sebastopol, CA: O'Reilly.

Part 3 | Introductionto Simile Exhibit
54

Simile Exhibit
55
Lightweightframeworkforweb data publishing
Web of data and advancedvisualizationforeverybody! :-)
Part of the project Simile
Semantic Interoperability of Metadata and Information in unLike Environments
Created by David Huynh et al. at the CSAIL lab of the MIT
Completely client-side (Javascript)
Doesnotrequiretowrite server-side code

56
Simile Exhibit

JSON
A way forencoding and exchanging data
Nice alternative to XML for AJAX applications
JSON objects are easilymanaged in JavaScript and main server-side scriptinglanguages (PHP, Java, .Net, Ruby…)
57

Whatauthorsneedto do
{ properties: { "co-winner" :
{ valueType: "item" }
},
"items" : [
{ type : "Nobelist",
label : "Burton Richter",
discipline : "Physics", shared : "yes",
...
},
<divex:role="view" ex:viewClass="Timeline" ex:start=".nobel-year" ex:colorKey=".discipline"> </div>
...
<divex:role="facet" ex:expression=".discipline" ex:facetLabel="Discipline">
</div>
58
Create/import JSON
Write/generate HTML code

Exhibit data model
59
Contents/objects are calleditems
Eachitem has some properties
Special properties: id, label, type
Properties also specify semantic relationships between items

Exhibitexpressions
60
Pathsusedto “navigate” items and properties
Evaluating .author.labelon “Da Vinci code” returns "Dan Brown”
Evaluating !author.labelon "Dan Brown” returns the titles of his book
Evaluating .attends!teaches.ageon the student of a course returns the age of the teacher
Paths can also start with a predefined variable:
value: current item or vakue
index: the index of the current item or value in a sequence of items or values
value.author.nationalityequals to .author.nationality

Facets
61
Properties of items can beusedtofilter/searchthem
E.g. <divex:role="facet" ex:facetClass="Cloud" ex:expression=".subject"> </div>
List facet
Tag cloud
Hierarchical facet
Slider (numerical ranges)
Calendar (range of dates)
Image facet
Keyword-based search
The values of the same facet are combined disjuctively

Views
62
Differentwaysfordisplaying the collection of items
E.g. <divex:role="view" ex:viewClass="Map"
ex:latlng=".latlng" > </div>
List
Thumbnails
Table
Timeline (displaying according to time)
Scatterplot, matrix table, etc.

Multivariate graduatedsymbolmaps
63
Multivariate graduatedsymbolmapsneed some tricks:
Associate itemswith a certainpropertyvalue in a given area to a certainplaceholder
{label: "Musei Lombardy“, type: "RegSet",
region: "Lombardy“, lat: "45.7791", lng: "9.84524"}
Use the placeholdercoordinatesto display all the associateditems in the samepoint
Exhibit code ismodifiedtochange the size of the markedaccordingto the number of items

Getgeographical data from Google
64
Google GeoCoding web service
http://maps.google.com/maps/api/geocode/json?address=your+location&sensor=false
Examples
http://maps.google.com/maps/api/geocode/json?address=friuli+venezia+giulia&sensor=false
Centroid of the region (or exact location): "location": { "lat": 45.7388878, "lng": 7.4261866 }
Boundingrectangle: "bounds": {"southwest": {"lat": 45.4671101, "lng": 6.8008598 }, "northeast": {"lat": 45.9878767, "lng": 7.9399057 } }

Calculatingplaceholderscoordinates | 1
65
Regionswith centroid at coordinates (long) and (lat)
Number of facetvalues: Rotation: Radius (constant)

Calculatingplaceholderscoordinates | 2
66
Foreachregion
Foreachfacetvalue in
Set coordinates of the placeholder:
Longitude
Latitude

Lenses
67
Differentwaysfordisplaying the single item preview
<divclass="search_collectionItem" ex:role="lens" style="display:none;">
<h3><a ex:href-content=“.url"><span ex:content=".label"></span></a></h3>
<divclass=“item-content“><img ex:src-content=".imageURL" />
Civilizations and Periods: <span ex:content=".topic""></span>
Location: <span ex:content=".inside.province""></span>, <span ex:content=".inside.superset.region""></span></div>
<p ex:if-exists=".abstract"><span ex:content=".abstract"></span></p>
</div>

References
68
http://www.simile-widgets.org/exhibit/
http://simile.mit.edu/wiki/Exhibit/For_AuthorsMandatory!
Huynh, D. F., Karger, D. R. & Miller R. C. (2007). Exhibit: Lightweight structured data publishing. Proceedings of the 16th International WWW Conference, 737–746.

Your project
69
Identify a smallcollection of itemsconnectedto the topic of your narrative
E.g. tourism in yourcountry mostimportantplaces
Approximately 20 itemsforeachcomponent of the group
Don’t focus on the content of the single item (you can retrieveitfrom the web), but…
Focus on multifacetedclassufication: chooseinterestingfacets
Decide visualization
At least 2 interestingviews
More viewsforlargergroups
UseExhibit (contact me forsupport)

Interested in MS Theses? Contactus! :-)
Advisors: Prof. Di Blas, Prof. Paolini
Boththeoretical and development
Fuzzyfacets
Semanticbrowsing
Advancedvisualizations
…
Yourownideas! :-)
70

Are youstillalive/awake?
Thankyouforyourattention!
Anyfinalquestions?
71

Multifaceted classifications and interactive visualization for exploratory experiences

by Luigi Spagnolo

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 11

Statistics

Multifaceted classifications and interactive visualization for exploratory experiences Presentation Transcript

http://www.slideshare.net	10
http://www.health.medicbd.com	1