Multifaceted classifications and interactive visualization for exploratory experiences

1

COMO CAMPUS

Multifaceted classification and visualization for exploratory experiencesLuigi Spagnolo

[email protected]

Information and Communication Quality

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 faceted search

(Amazon’s Diamond search was one of the first e-commerce applications of faceted search)

Let’s start with a scenario


4

1-2 volunteers please! 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

http://www.louvre.fr/llv/commun/home.jsp?bmLocale=en








Problems with 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 involves subjective judgment

Depends on the author and on the user Objective: “10km far from Como”, “the painting

was made in 1886” Subjective: “Near Como”, “the painting is

impressionist”

User experiences requirements | 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

User experiences requirements | 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

What if I want to browse all artworks (regardless their type) by artist? Classifications are “nested” in a fixed order Designers should choose which classification should

prevail (e.g. by type) What if I want to find “impressionists paintings

portraing animals”? I cannot combine multiple “sibling”classifications (e.g.

by style and by subject)

Problems/2


14

As long as the website is small a good taxonomy can satisfy user requirements

For large websites (hundreds or thousand of pages) Indexed/guided navigation doesn’t scale Users can’t easily find what they want Users can’t make sense of all such information

Solutions?


15

What do users do when navigation doesn’t work? They use search! Search arranges contents dynamically and

automatically (in a way not predefined by designers) But keyword-based search is not optimal

No hints for users that have no clear idea of what to look

We need a better paradigm: Exploratory search

Exploratory search


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 From finding to

understanding (Marchionini)

Faceted search


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

Let’s see what we’re talking about! :)18


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/

http://www.artistrising.com/




http://www.flickr.com/photos/morville/collections/72157603789246885/



http://flamenco.berkeley.edu/

http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?manage=1&managestart=1

http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco

http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?createaccount=1

http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=media2:10&group=media2










http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=location:346&group=location










http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=objects:40&group=objects










http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=built_places:1&group=built_places




http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=heaven_earth:58&group=heaven_earth







http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=shapes_colors:35&group=shapes_colors





http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=occupations:1&group=occupations





http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?q=artist:405&group=artist












http://orange.sims.berkeley.edu/cgi-bin/flamenco.cgi/famuseum/Flamenco?action=categorylist&group=artist

How the interaction works


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

How values are (usually) combined

Filters belonging to different facets are combined in conjunction E.g. “technique:oil” AND “style:impressionism”

Filters belonging to the same facet are: Combined in conjunction if the facet admits more values at

the same time for each object E.g. “subject:people” AND “subject:animals” (both people and animals in the same picture)

Combined in disjunction if the facet adimits only one value E.g. “location:Milan” OR “location:Como” (an object which is 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 objective data “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 facet values 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...

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

22


Benefits of faceted search


23

Easy and natural almost like “traditional” browsing With respect to keyword-based search users have

hints recognition rater than recall Users can freely combine multiple classifications

according to they wishes Users can more easily make sense of information

(if supported by good interfaces) Frustrating “no results found” searches avoided

Limitations of faceted search | 1


24

Too more facets and facets values may generate information overload too! Possible solution: Display only the most relevant facets (and

facet values) for the user profile or the given context 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 faceted search | 2


25

No one explain us what a certain facet values means Possibile solutions: images and tooltips (we will discuss

later) We can filter items, but we can’t filter facet values!

E.g. paintings filtered by artists We can’t filter the Artists facet values by nationality,

gender, age, etc. We can’t sort automatically items by relevance (like

“traditional” information retrieval does)

Research: beyond faceted search | 1


26

Semantic browsing Exploring contents at level of sets using

semantic relationships, e.g. The museums that have bronze Greek statues “Women portrayed by women”: paintings with

subject:woman and artist:gender:female Schools attended by the daughters of U.S. democratic

presidents (http://www.freebase.com/labs/parallax/) Challenges: effective models and usable interface

http://www.freebase.com/labs/parallax/





Research: beyond faceted search | 2


27

Fuzzy facets Multiple fuzzy levels of relevance/importance

for a facet value 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.


28

Fuzzy facets Some

concepts…

References


29

Hearst, M. A. (2009). Search User Interfaces. Cambridge: Cambridge University Press. http://searchuserinterfaces.com/book/sui_ch8_navigation_and_search.ht

ml Available for 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.

http://searchuserinterfaces.com/book/sui_ch8_navigation_and_search.html

http://searchuserinterfaces.com/book/sui_ch8_navigation_and_search.html

Part 2 | Advanced visualization of contents30


Why visualization?


31

Facets are conceptually orthogonal, but… In reality many phenomenon are correlated

E.g. antiquities belonging to Celtic civilization are found only in Northern Italy

Learning is investigating and finding connections between different aspects

We need (intuitive) visual representations to compare information and put on evidence correlations

A good model is important, but an effective visualization really makes the difference

Visualizing what?


32

Facets and facets values: Tag clouds, hierarchical visualizations, etc.

Content items (exploratory search results) Interactive lists (allowing dinamic grouping/sorting) Thematic maps: for geographically-related features Statistical graphics

Turning exploratory search into (intuitive) exploratory data analysis

Let’s see an example


33

An interactive map of archaeological venues in Italy: From the new website of the

Directorate-General for Antiquities (Italian Ministry of Culture)

Prototype made by us at the HOC-Lab

http://hoc5.elet.polimi.it/archeo/index.php/eng/Mappa-archeologica/Mappa-interattiva











http://hoc5.elet.polimi.it/archeo/index.php/eng/Mappa-archeologica

Tag clouds


34

Originally conceived for folksonomies The size of the link shows the frequency

(importance) of the facet value inside the collection of items : number of items tagged with facet valueif i

Proportional vs. Linear scaling Power law: few terms are used to tag the

highest majority of items Proportional scaling

Tag sizes are directly proportional to their frequency

few words are very big, many are very very small

Linear scaling Tag sizes are based on the logarithm of

their frequency The difference of size is smoother

35


Calculating a tag cloud


36

Highest and lowest frequency found Largest and smallest size desired Highest difference in size We want to determine the size of each facet value link

minmin

max min

ii

f fs s s

f f

min

minmax min

log log

log logi

i

f fs s s

f f

min max,f f

is

min max,s s

max mins s s

Proportional scaling

Linear scaling

Visualizing hierarchical facets37


Tree-based visualization Tooltips

Conveying the meaning of facet values38


Using

icons

Using tooltips (concept)

39


Conjuntive vs. disjunctive facets

Conjunctive (usually plain links) Disjunctive (checkboxes)

Geographical information


40

Thematic maps visually represent one or more features on a geographical area

Digital, interactive thematic maps Users can zoom and/or adjust visualization in some way Users can filter items

More features at once: multivariate thematic map Different signs (shapes, colors, icons) can be used for

showing more characteristics on the same map Avoid mixing shapes, colors and icons together: the result

may be very messy!

Dot map


41

Simplest thematic map One placemark = one item at its

exact location (like in Google Maps), or

One sign = k items in that area Different signs (shapes, colors,

icons) can be used for showing more characteristics on the same map

May be messy if many items are concentrated in a small area Expecially at low levels of zoom Expecially multivariate dot maps

Graduated symbol map | 1


42

Also called Proportional symbol map The map is divided into areas

(e.g. administrative areas) One sign for each area (single feature) One sign for each of N features in

each area (multivariate) The size of the sign changes

according to the number of items with feature X on area Y

Proportial, linear, class scalings Multivariate version tends to be messy

if you display too much values at one

Graduated symbol map | 2


43

Advantages Statistical distribution on a certain area clearly showed (With respect to dot map) overlapping of signs avoided

Disadvantages Multivariate version tends to be messy if you display too

much values at once (e.g. facets with many distinct values)

The scaling should be carefully chosen to avoid too huge or too small signs

Pie chart map | 1


44

Similar to multivariate graduate symbol map The map is divided into areas

(e.g. administrative areas) One circle (pie) for each area Each part is cut into slices The size of the slice is

proportional to the number of items with feature X on area Y

Pie chart map | 2


45

With respect to multivariate graduate symbol map… Advantages

Less messy when you have to show a lot features at once Disadvntages

Features with low frequency are less visible Analogously we could have histogram chart maps

Choropleth map | 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…

Choropleth map | 2


47

A single area may be colored/shaded/patterned according on mutually escusive values E.g. Regions that are

governed by left vs. right parties

Single-valued facets only

Choropleth map | 3


48

The gradient of shade/color may be proportial to the frequency of a single feature E.g. number of earthquakes,

population To show more features at

ones you should overlap colors or patterns: too messy

You need a map for each facet vale

Non-geographical information


49

Statistical graphics Scatter plot charts Network diagrams Conceptual maps Matrix charts Histograms and bar charts

Representations should be intuitive if they are conceived for websites We can’t expect that users learn how to “read” them! It depends on the type of users

Scatter plot


50

Classical statistical diagram Shows correlations

between a feature on the x axis and a feature on the y axis

For quantitative data Good impact only for

“expert” user

Matrix chart


51

Shows correlations between values belonging to two facets in row and columns Values analyzed in pairs The size of the circle shows how many

items are tagged with the couple of values

E.g. Classes participating to Politecnico di Milano programs by year and type of schools Can be read in two ways How participation changed among years for

school X (rows) How participation is distributed among schools

in year X (columns)

Rich interface required


52

AJAX (javaScript) Adobe Flash (Actionscript) Higher responsiveness:

Users don’t need to wait until the whole page is refreshed Only the changed elements 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.html Available for 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.

http://geoanalytics.net/and/papers/ijgis99.pdf

http://thematicmapping.org/playground/

http://thematicmapping.org/playground/

http://manyeyes.alphaworks.ibm.com/manyeyes/page/Visualization_Options.html

http://searchuserinterfaces.com/book/sui_ch11_text_analysis_visualization.html

Part 3 | Introduction to Simile Exhibit54


Simile Exhibit


55

Lightweight framework for web data publishing Web of data and advanced

visualization for everybody! :-) 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) Does not require to write server-side code

Information and Communication Quality | Multifaceted Classification and Visualization for Exploratory Experiences | L. Spagnolo56

Simile Exhibit

JSON A way for encoding

and exchanging data Nice alternative to XML

for AJAX applications JSON objects are easily

managed in JavaScript and main server-side scripting languages (PHP, Java, .Net, Ruby…)

57


What authors need to do

{ properties: { "co-winner" :

{ valueType: "item" }

},

"items" : [

{ type : "Nobelist",

label : "Burton Richter",

discipline : "Physics", shared : "yes",

...

},

<div ex:role="view" ex:viewClass="Timeline" ex:start=".nobel-year" ex:colorKey=".discipline"> </div>

...

<div ex:role="facet" ex:expression=".discipline" ex:facetLabel="Discipline">

</div>

58


Create/import JSON Write/generate HTML code

Exhibit data model


59

Contents/objects are called items

Each item has some properties Special properties:

id, label, type Properties also

specify semantic relationships between items

Exhibit expressions


60

Paths used to “navigate” items and properties Evaluating .author.label on “Da Vinci code” returns "Dan

Brown” Evaluating !author.label on "Dan Brown” returns the titles of

his book Evaluating .attends!teaches.age on 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.nationality equals to .author.nationality

Facets


61

Properties of items can be used to filter/search them E.g. <div ex: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

Different ways for displaying the collection of items E.g. <div ex:role="view" ex:viewClass="Map"

ex:latlng=".latlng" > </div> List Thumbnails Table Timeline (displaying according to time) Scatterplot, matrix table, etc.

Multivariate graduated symbol maps


63

Multivariate graduated symbol maps need some tricks: Associate items with a certain property value in

a given area to a certain placeholder{label: "Musei Lombardy“, type: "RegSet",

region: "Lombardy“, lat: "45.7791", lng: "9.84524"} Use the placeholder coordinates to display all the

associated items in the same point Exhibit code is modified to change the size of

the marked according to the number of items

Get geographical 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 }

Bounding rectangle: "bounds": {"southwest": {"lat": 45.4671101, "lng": 6.8008598 }, "northeast": {"lat": 45.9878767, "lng": 7.9399057 } }

http://maps.google.com/maps/api/geocode/json?address=your+location&sensor=false







Calculating placeholders coordinates | 1


65

Regions with centroid at coordinates (long) and (lat)

1 2, , , NA A AiX iY

Number of facet values: Rotation: Radius (constant) 2

F

F


66

Calculating placeholders coordinates | 2

For each region For each facet value in

Set coordinates of the placeholder:

Longitude

Latitude

iAkf iA

: cos2

iAk ix X k

: sin2

iAk iy Y k

Lenses


67

Different ways for displaying the single item preview

<div class="search_collectionItem" ex:role="lens" style="display:none;">

<h3><a ex:href-content=“.url"><span ex:content=".label"></span></a></h3>

<div class=“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_Aut

hors Mandatory!

Huynh, D. F., Karger, D. R. & Miller R. C. (2007). Exhibit: Lightweight structured data publishing. Proceedings of the 16th International WWW Conference, 737–746.

http://www.simile-widgets.org/exhibit/



http://simile.mit.edu/wiki/Exhibit/For_Authors

http://simile.mit.edu/wiki/Exhibit/For_Authors

Your project


69

Identify a small collection of items connected to the topic of your narrative E.g. tourism in your country most important places Approximately 20 items for each component of the group

Don’t focus on the content of the single item (you can retrieve it from the web), but… Focus on multifaceted classufication: choose interesting facets

Decide visualization At least 2 interesting views More views for larger groups

Use Exhibit (contact me for support)

Interested in MS Theses? Contact us! :-)

Advisors: Prof. Di Blas, Prof. Paolini Both theoretical and development Fuzzy facets Semantic browsing Advanced visualizations … Your own ideas! :-)

70


Are you still alive/awake?

Thank you for your attention!

Any final questions?71


Multifaceted classifications and interactive visualization for exploratory experiences

Education

Transcript of Multifaceted classifications and interactive visualization for exploratory experiences