1 / 20

Graph-Based Navigation of a Box Office Prediction System

This presentation discusses a graph-based approach to predicting box office ratings, utilizing D3.js and JavaScript. The project was part of the VAST Challenge and aims to visualize movie data by scraping information from available APIs. The method emphasizes dynamic data handling through object-oriented programming and custom attributes. The system handles complexities such as data sanitation and caching while working within restrictions of available data sources. The demo showcases interactive visualizations to explore movie relationships, actors, and their contributions to box office success.

darrin
Télécharger la présentation

Graph-Based Navigation of a Box Office Prediction System

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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 Universitymkelly@cs.odu.edu Presented at: IEEE VIS 2013, 16 October 2013 & CS595, Intro to Web Science, 24 October 2013

  2. What?

  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

  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

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

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

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

  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

  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

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

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

  13. Caveat! IMDB doesn’t 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

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

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

  16. So, D3.js? • -esque • Custom attrs keep nodes JS accessible • OOP abstraction used,converted to D3 nodes varr = 50*prominences[a]/maxProminence; varc = 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

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

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

  19. switchContext(newContextEntity:CE) • Converts JS Objects to nodes • Resolves references to objattrs 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

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

More Related