Box Office Prediction System Using Graph-Based Navigation

Graph-Based Navigation of a Box
Office Prediction System
Mat Kelly
Web Science and Digital Libraries Research Group
Old Dominion University
mkelly@cs.odu.edu
Presented at: IEEE VIS 2013, 16 October 2013 &
  CS595, Intro to Web Science, 24 October 2013
What?
2
Why?
3
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/movieExplorer
demo: bit.ly/ieeevis2013
How?
4
D3.js, JavaScript,
 Canvas/SVG, HTML5
       API v. 1.1 (rate limited)
RegEx, object-ifying for                data
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
OFFICIAL SRC
How?
5
D3.js, JavaScript,
 Canvas/SVG, HTML5
       API v. 1.1 (rate limited)
RegEx, object-ifying for                data
BIG
dirty
incomplete
sentiment
  classifier required
no initial causal 
    relationship
             
UNWEILDY
!
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
How Else?
6
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
UNOFFICIAL
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
Brute Force
7
Scrape data at runtime
Sanitize data
Discarded irrelevant markup
Save id, entity name, other meta info
Cache data
Reference cache on subsequent runs
DISALLOWED
 
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
The Desired Data
MOVIE1
MOVIE2
MOVIE3
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
The Desired Data
9
MOVIE1
ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTOR
MOVIE2
MOVIE3
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
The Desired Data
10
MOVIE1
ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTOR
MOVIE2
MOVIE3
MOVIE1,1
MOVIE1,2
MOVIE1,3
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
The Desired Data
11
MOVIE1
ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTOR
MOVIE2
MOVIE3
MOVIE1,1
MOVIE1,2
MOVIE1,3
might be
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
The Desired Data
12
MOVIE1
ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTOR
MOVIE2
MOVIE3
MOVIE1,1
MOVIE1,2
MOVIE1,3
ETC
might be
ACTOR1
ACTOR2
ACTOR3
WRITER
DIRECTOR
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
Caveat! IMDB doesn’t like scraping
13
Use proxy to get over JS Same-Origin issues
Movie
Explorer
My proxy
script
cURL
HTTP GET
w/ params
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
Caveat! IMDB doesn’t like scraping
14
Use proxy to get over JS Same-Origin issues
Movie
Explorer
My proxy
script
cURL
HTTP GET
w/ params
Return webpage
Scrape
Sanitize
Cache
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
Caveat! IMDB doesn’t like scraping
15
Use proxy to get over JS Same-Origin issues
Movie
Explorer
My proxy
script
cURL
HTTP GET
w/ params
Return webpage
Scrape
Sanitize
Cache
Sanitized data
returned
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
So, D3.js?
16
                             -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/movieExplorer
demo: bit.ly/ieeevis2013
Object Model 
 D3
17
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
Object Model 
 D3
18
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
switchContext(newContextEntity:CE)
19
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/movieExplorer
demo: bit.ly/ieeevis2013
Demo
20
http://machawk1.github.io/movieExplorer/
src: bit.ly/movieExplorer
demo: bit.ly/ieeevis2013
Slide Note
Embed
Share

A study conducted by Mat Kelly from Old Dominion University presents a graph-based navigation system for predicting box office ratings. The research used Visual Analytics techniques to analyze data sourced exclusively from movie IDs and listing files. By leveraging tools like D3.js, JavaScript, and HTML5 API, the system aimed to predict box office ratings by examining sentiment classifications and removing data set restrictions. The process involved scraping data at runtime, sanitizing it, and caching relevant information for subsequent runs. Additionally, the study explored ways to extract desired data related to movies, actors, writers, and directors through official and unofficial IMDb APIs.

  • Box Office Prediction
  • Graph-Based Navigation
  • Visual Analytics
  • Web Science
  • Digital Libraries

Uploaded on Sep 17, 2024 | 0 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript


  1. Graph-Based Navigation of a Box Office Prediction System Mat Kelly Web Science and Digital Libraries Research Group Old Dominion University mkelly@cs.odu.edu Presented at: IEEE VIS 2013, 16 October 2013 & CS595, Intro to Web Science, 24 October 2013

  2. What? 2

  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/movieExplorer demo: bit.ly/ieeevis2013 3

  4. How? D3.js, JavaScript, Canvas/SVG, HTML5 API v. 1.1 (rate limited) RegEx, object-ifying for data src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 4

  5. How? D3.js, JavaScript, Canvas/SVG, HTML5 API v. 1.1 (rate limited) RegEx, object-ifying for data sentiment classifier required no initial causal relationship BIG dirty incomplete src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 5

  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 src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 6

  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 src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 7

  8. The Desired Data MOVIE1 MOVIE2 MOVIE3 src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013

  9. The Desired Data MOVIE1 ACTOR1 ACTOR2 ACTOR3 WRITER MOVIE2 DIRECTOR MOVIE3 src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 9

  10. The Desired Data MOVIE1 ACTOR1 MOVIE1,1 ACTOR2 MOVIE1,2 ACTOR3 WRITER MOVIE1,3 MOVIE2 DIRECTOR MOVIE3 src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 10

  11. The Desired Data MOVIE1 ACTOR1 MOVIE1,1 ACTOR2 MOVIE1,2 ACTOR3 WRITER MOVIE1,3 MOVIE2 DIRECTOR MOVIE3 src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 11

  12. The Desired Data MOVIE1 ACTOR1 MOVIE1,1 ACTOR2 MOVIE1,2 ACTOR3 WRITER MOVIE1,3 MOVIE2 DIRECTOR MOVIE3 src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 12

  13. Caveat! IMDB doesnt like scraping Use proxy to get over JS Same-Origin issues Movie Explorer My proxy script cURL HTTP GET w/ params src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 13

  14. Caveat! IMDB doesnt like scraping Use proxy to get over JS Same-Origin issues Movie Explorer My proxy script cURL HTTP GET w/ params Sanitize Scrape Cache Return webpage src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 14

  15. Caveat! IMDB doesnt like scraping Use proxy to get over JS Same-Origin issues Movie Explorer My proxy script cURL HTTP GET w/ params Sanitize Scrape Cache Sanitized data returned Return webpage src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 15

  16. So, D3.js? -esque 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"); Custom attrs keep nodes JS accessible OOP abstraction used, converted to D3 nodes src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 16

  17. Object Model D3 CONTEXT_ENTITY (CE) Visualization - movies : Movie[] - actors : Actor[] -canvas : DOMCanvasElement - centralNode : CE - drawBasicLayout () - setupCentralNode () - setupNodeInteraction () + switchContext : (newContextEntity : CE) MOVIE - id : String - title : String - actors : String[] - writers : String[] - directors : String{} - fetchActors (id : String) +getMoviesInThreatres () ACTOR - name : String - movies : String[] - fetchMovies () + setMovies (actorName: String) src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 17

  18. Object Model D3 CONTEXT_ENTITY (CE) Visualization - movies : Movie[] - actors : Actor[] -canvas : DOMCanvasElement - centralNode : CE - drawBasicLayout () - setupCentralNode () - setupNodeInteraction () + switchContext : (newContextEntity : CE) MOVIE - id : String - title : String - actors : String[] - writers : String[] - directors : String{} - fetchActors (id : String) +getMoviesInThreatres () ACTOR - name : String - movies : String[] - fetchMovies () + setMovies (actorName: String) src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 18

  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/movieExplorer demo: bit.ly/ieeevis2013 19

  20. Demo http://machawk1.github.io/movieExplorer/ src: bit.ly/movieExplorer demo: bit.ly/ieeevis2013 20

Related


More Related Content

giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#giItT1WQy@!-/#