Recommender Systems + uRank Multimedia Information Systems 2 - - PowerPoint PPT Presentation

▶
recommender systems urank
SMART_READER_LITE
LIVE PREVIEW

Recommender Systems + uRank Multimedia Information Systems 2 - - PowerPoint PPT Presentation

Feb 02, 2023 323 likes •802 views

Recommender Systems + uRank Multimedia Information Systems 2 Cecilia di Sciascio cdisciascio@know-center.at KTI, TU Graz April 19 th , 2016 MMIS2 Recommendation Visualization April 19th, 2016 KTI/TU Graz, Know-Center Recommender

slide-1
SLIDE 1

MMIS2 – Recommendation Visualization April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Systems + uRank

Multimedia Information Systems 2

Cecilia di Sciascio cdisciascio@know-center.at KTI, TU Graz April 19th, 2016

slide-2
SLIDE 2

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Interfaces

2

slide-3
SLIDE 3

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Motivation

Engage the user to visit recommended items

Swearingen and Sinha (2001). “Beyond Algorithms: An HCI Perspective on Recommender Systems”.

3

slide-4
SLIDE 4

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Systems

4

slide-5
SLIDE 5

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Systems

5

slide-6
SLIDE 6

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Systems

6

slide-7
SLIDE 7

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender systems

7

slide-8
SLIDE 8

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender systems

8

slide-9
SLIDE 9

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Interfaces

9

What do users expect?

  • easy to access information about recommended item,
  • easy to generate new recommendations
  • classify results by degree of confidence (e.g., best, worst)
  • understand what is driving recommendations
  • interface: more like this, new items…
slide-10
SLIDE 10

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Interfaces

10

Gretarsson et al. SmallWorlds: Visualizing Social Recommendations.

slide-11
SLIDE 11

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Interfaces

11

Devendorf, O’Donovan, Höllerer TopicLens: An Interactive Recommender System

based on Topical and Social Connections.

slide-12
SLIDE 12

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Recommender Interfaces

12

Bostandjiev, O’Donovan, Hollerer. LinkedVis: Exploring Social and Semantic Career Recommendations.

slide-13
SLIDE 13

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank

13

slide-14
SLIDE 14

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

EEXCESS RS plugin

14

slide-15
SLIDE 15

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Why uRank?

15

slide-16
SLIDE 16

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Why uRank?

16

+

Controllability Transparency

slide-17
SLIDE 17

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank UI

Web-based tool for document collection exploration

17

slide-18
SLIDE 18

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank UI

18

Tag Box

Collection Keywords Overview

slide-19
SLIDE 19

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank UI

19

Tag Box

Collection Keywords Overview

List + Ranking View

Ranked list + document similarity & term contribution

slide-20
SLIDE 20

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank UI

20

Tag Box

Collection Keywords Overview

List + Ranking View

Ranked list + document similarity & term contribution

Query Box

slide-21
SLIDE 21

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank UI

21

  • Doc. Viewer

Detailed view of document metadata + snippet

slide-22
SLIDE 22

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Keyword Extraction

22

Collection Keywords

  • Sorted by document frequency
  • Representative term selected

Tokenization POS Tagging

“women”

Singularizatio n & Lower- casing Stemming TF-IDF

“women” is a noun “women”  “woman” “woman”  “woman” “woman” = 3.5 in di

gender: 5.2 wage: 2.1 woman: 3.5 gap: 1.8

Document Vectors

slide-23
SLIDE 23

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Ranking Method

23

Score for term t in document d Rank by

  • verall score

Overall score of document d

slide-24
SLIDE 24

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Code Structure

24

Urank VisCanvas DocViewer ContentList TagBox TagCloud ranking … Urank-Loader RankingModel RankingArray KeywordExtractor

slide-25
SLIDE 25

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Code Structure

25

Urank VisCanvas DocViewer ContentList TagBox TagCloud ranking … Urank-Loader RankingModel RankingArray KeywordExtractor

entry point instance

slide-26
SLIDE 26

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Code Structure

26

Urank VisCanvas DocViewer ContentList TagBox TagCloud ranking … Urank-Loader RankingModel RankingArray KeywordExtractor

Core

slide-27
SLIDE 27

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Code Structure

27

Urank VisCanvas DocViewer ContentList TagBox TagCloud ranking … Urank-Loader RankingModel RankingArray KeywordExtractor

Model

slide-28
SLIDE 28

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Code Structure

28

Urank VisCanvas DocViewer ContentList TagBox TagCloud ranking … Urank-Loader RankingModel RankingArray KeywordExtractor

Blocks

slide-29
SLIDE 29

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Code Structure

29

Urank VisCanvas DocViewer ContentList TagBox TagCloud ranking your vis?? Urank-Loader RankingModel RankingArray KeywordExtractor

Views

slide-30
SLIDE 30

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Code Structure

30

UrankController VisCanvas DocViewer ContentList TagBox TagCloud ranking your vis? Urank RankingModel RankingArray KeywordExtractor

Vis

slide-31
SLIDE 31

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank API

Libraries

  • jQuery: core
  • D3: stacked bars rendering
  • jQuery-ui: drag & drop feature
  • Posjs + naturalJS: keyword extraction
  • underscore: operations with arrays
  • modernizr: file loader

31

slide-32
SLIDE 32

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Controller-Block Interaction

32

In urank.js (controller)

var options = { contentList: { root: s.contentListRoot,

  • nItemClicked: EVTHANDLER.onItemClicked,
  • nItemMouseEnter: EVTHANDLER.onItemMouseEnter,
  • nItemMouseLeave: EVTHANDLER.onItemMouseLeave,
  • nFaviconClicked: EVTHANDLER.onFaviconClicked,
  • nWatchiconClicked: EVTHANDLER.onWatchiconClicked,
  • nScroll: EVTHANDLER.onParallelBlockScrolled

}, ... contentList = new ContentList(options.contentList); Block options specify DOM selector for root element and callback functions contentList object initialization

slide-33
SLIDE 33

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Controller-Block Interaction

33

In contentList.js

function ContentList(arguments) { s = $.extend({ root: '',

  • nItemClicked: function(document){},
  • nItemMouseEnter: function(document){},
  • nItemMouseLeave: function(document){},
  • nFaviconClicked: function(document){},
  • nWatchiconClicked: function(document){}

}, arguments); } ... $(li).data('id', id) .on({ click: function(event){s.onItemClicked.call(this, li.data('id')); }, ... Constructor Events are bound to event handlers in “s” Object “s” extends default settings with options passed by urank.js

slide-34
SLIDE 34

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Controller-Block Interaction

34

In contentList.js

ContentList.prototype = { build: _build, reset: _reset, update: _update, hover: _hover, unhover: _unhover, selectListItem: _selectListItem, deselectAllListItems: _deselectAllListItems, highlightListItems: _highlightListItems, clearAllFavicons: _clearAllFavicons, toggleFavicon: _toggleFavicon, toggleWatchListItem: _toggleWatchListItem, clearEffects: _clearEffects, ... };

Controller (urank.js) can call any block method in its prototype

slide-35
SLIDE 35

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank Controller-Block Interaction

35

Back in urank.js EVTHANDLER.onItemClicked : function(documentId) { … contentList.selectListItem(documentId); … };

This is the method passed as callback for list item click event. The method for selecting a list item is actually invoked inside the callback function

slide-36
SLIDE 36

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank UI

36

How to use it

Create the DOM elements that will be containers for the 4 blocks (except Docviewer).

TagBox RankingView ContentList

QueryBox

slide-37
SLIDE 37

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank API

How to use it

Include in html header…

  • jquery (version 1.10.2 or higher)
  • modernizr (urank/dependencies/modernizr.js)
  • urank entry point (urank/urank-loader.js)

<script type="text/javascript" src="libs/jquery-1.10.2.js"></script> <script type="text/javascript" src="scripts/urank/dependencies/modernizr.js"></script> <script type="text/javascript" src="scripts/urank/urank-loader.js"></script>

37

slide-38
SLIDE 38

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank API

How to use it

In your code, call the UrankLoader function passing 2 arguments:

  • 1. A callback function that will receive a urank object as argument
  • 2. An object specifying initialization settings

var init = function(urank){ _this.urank = urank; … };

UrankLoader(init, urankOptions);

38

slide-39
SLIDE 39

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank API

How to use it

  • 2. An object specifying initialization settings:

Pass DOM selectors for block containers (except DocViewer).

var urankOptions = { tagCloudRoot: '#tag_cloud', tagBoxRoot: '#tag_box', contentListRoot: '#content_list', visCanvasRoot: '#vis_canvas' };

39

slide-40
SLIDE 40

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank API

How to use it

Some initialization settings (defaultInitOptions in urank.js): Callbacks to be executed after homonymous methods

  • nLoad: receives array with keywords extracted from loaded data
  • nChange: receives two parameters: ranking data array and seleced keywords array
  • nReset
  • nRankByOverallScore
  • nRankByMaximumScore
  • nItemClicked: receives document id as parameter
  • nItemMouseEnter: receives document id as parameter
  • nItemMouseLeave: receives document id as parameter
  • nTagInCloudMouseEnter: receives tag index in keywords array
  • nTagInCloudMouseLeave: receives tag index in keywords array
  • nTagInCloudClick: receives tag index in keywords array
  • nTagDeleted: receives tag index in keywords array
  • …

40

slide-41
SLIDE 41

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

uRank API

How to use it https://github.com/cecidisi/uRank See README Fork/Clone and create your own branch

41

slide-42
SLIDE 42

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Visualization Tasks

42

slide-43
SLIDE 43

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Visualization Tasks

1. New tag cloud view: new layout, show query previews, e.g. how many articles contain a keyword (see modles/tagcloud/tagCloudDefault.js)

43

slide-44
SLIDE 44

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Visualization Tasks

  • 2. Replace stacked bar with new document content

visualisations (see modules/viscanvas/ranking.js)

44

slide-45
SLIDE 45

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

  • 3. Develop a new ranking method (see model/rankingModel.js)

45

Score for term t in document d

Overall score of document d

slide-46
SLIDE 46

MMIS2 – Recommendation Visualisation April 19th, 2016 KTI/TU Graz, Know-Center

Thank you! Questions?

46