2000-03. Graph Visualization and Navigation in Information Visualization
Graph-Based Navigation of a Box Office Prediction System
description
Transcript of Graph-Based Navigation of a Box Office Prediction System
![Page 1: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/1.jpg)
Graph-Based Navigation of a Box Office Prediction System
Mat KellyWeb Science and Digital Libraries Research Group
Old Dominion [email protected]
Presented at: IEEE VIS 2013, 16 October 2013 & CS595, Intro to Web Science, 24 October 2013
![Page 2: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/2.jpg)
2
What?
![Page 3: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/3.jpg)
3
Why?
• VAST Challenge• Weigle’s Visual Analytics class (Spring ‘13)• Data: IDs, .list files• No other data sources allowed
• Predict Box Office Rating and Take
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 4: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/4.jpg)
4
How?
• D3.js, JavaScript, Canvas/SVG, HTML5• API v. 1.1 (rate limited)• RegEx, object-ifying for data
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 5: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/5.jpg)
5OFF
ICIA
L SR
C
How?
• D3.js, JavaScript, Canvas/SVG, HTML5• API v. 1.1 (rate limited)• RegEx, object-ifying for data
BIGdirty
incomplete
sentiment classifier requiredno initial causal relationship
UN
WEI
LDY!
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 6: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/6.jpg)
6
How Else?
• Remove data set restriction ( cannot VAST)• Targeted VIS conf instead
• Utilize official/unofficial IMDB API• Only certain info available through official• Unofficial occasionally got C&D’d, went
down
UN
OFF
ICIA
L
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 7: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/7.jpg)
7
Brute Force
• Scrape data at runtime• Sanitize data• Discarded irrelevant markup• Save id, entity name, other meta info
• Cache data• Reference cache on subsequent runs
DISA
LLO
WED
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 8: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/8.jpg)
The Desired Data
MOVIE1
MOVIE2
MOVIE3
…src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 9: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/9.jpg)
9
The Desired Data
MOVIE1 ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTORMOVIE2
MOVIE3
…src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 10: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/10.jpg)
10
The Desired Data
MOVIE1 ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTORMOVIE2
MOVIE3
MOVIE1,1
MOVIE1,2
MOVIE1,3
…src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 11: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/11.jpg)
11
The Desired Data
MOVIE1 ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTORMOVIE2
MOVIE3
MOVIE1,1
MOVIE1,2
MOVIE1,3
might be
…src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 12: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/12.jpg)
12
The Desired Data
MOVIE1 ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTORMOVIE2
MOVIE3
MOVIE1,1
MOVIE1,2
MOVIE1,3
ETC
might be
ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTOR
…src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 13: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/13.jpg)
13
Caveat! IMDB doesn’t like scraping
• Use proxy to get over JS Same-Origin issues
MovieExplorer
My proxyscript
cURLHTTP GETw/ params
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 14: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/14.jpg)
14
Caveat! IMDB doesn’t like scraping
• Use proxy to get over JS Same-Origin issues
MovieExplorer
My proxyscript
cURLHTTP GETw/ params
Return webpageScra
peSa
nitiz
eCa
che
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 15: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/15.jpg)
15
Caveat! IMDB doesn’t like scraping
• Use proxy to get over JS Same-Origin issues
MovieExplorer
My proxyscript
cURLHTTP GETw/ params
Return webpageScra
peSa
nitiz
eCa
che
Sanitized datareturned
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 16: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/16.jpg)
16
So, D3.js?
• -esque
• Custom attrs keep nodes JS accessible
• OOP abstraction used,converted to D3 nodes
var r = 50*prominences[a]/maxProminence; var c = viz.svg.insert("circle") .attr("stroke","blue") .attr("stroke-width","2") .attr("class", "node actor") .attr("context", "movie") .attr("id","actorCircle"+a) .attr("fill","blue") .attr("alt",names[a]) .attr("cx",viz.centralNode.mCircleX) .attr("cy",viz.centralNode.mCircleY) .attr("r",1) .transition() .duration(2000) .attr("cx",pos[a][0]) .attr("cy",pos[a][1]) .attr("r", r) .ease("elastic");
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 17: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/17.jpg)
17
Object Model D3
ACTOR- name : String- movies : String[]
- fetchMovies ()+ setMovies (actorName: String)
MOVIE- id : String- title : String- actors : String[]- writers : String[]- directors : String{}- fetchActors (id : String)+getMoviesInThreatres ()
Visualization- movies : Movie[]- actors : Actor[]-canvas : DOMCanvasElement- centralNode : CE- drawBasicLayout ()- setupCentralNode ()- setupNodeInteraction ()+ switchContext : (newContextEntity : CE)
CONTEXT_ENTITY (CE)
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 18: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/18.jpg)
18
Visualization- movies : Movie[]- actors : Actor[]-canvas : DOMCanvasElement- centralNode : CE- drawBasicLayout ()- setupCentralNode ()- setupNodeInteraction ()+ switchContext : (newContextEntity : CE)
Object Model D3
ACTOR- name : String- movies : String[]
- fetchMovies ()+ setMovies (actorName: String)
MOVIE- id : String- title : String- actors : String[]- writers : String[]- directors : String{}- fetchActors (id : String)+getMoviesInThreatres ()
CONTEXT_ENTITY (CE)
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 19: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/19.jpg)
19
switchContext(newContextEntity:CE)
• Converts JS Objects to nodes• Resolves references to obj attrs by IDs• Fires off D3 functions• Setup – hide old objects, remove from mem• Drawing – write SVG DOM elems to canvas• Interaction – hover/click FX, re-binding to
switchContext() for new elements
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013
![Page 20: Graph-Based Navigation of a Box Office Prediction System](https://reader035.fdocuments.us/reader035/viewer/2022062812/56816360550346895dd42bfd/html5/thumbnails/20.jpg)
20
Demo
• http://machawk1.github.io/movieExplorer/
src: bit.ly/movieExplorerdemo: bit.ly/ieeevis2013