Created
April 28, 2017 08:36
-
-
Save wrtsprt/2b0a9cc063ec0e574231d85ff9da7bad to your computer and use it in GitHub Desktop.
Chart the development of IMDB scores of Steven Seagull movies - POC
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script> | |
| <script type="text/javascript"> | |
| var realData = [{y: 3.7, x: 2016}, | |
| ,{y: 3.9, x: 2016} | |
| ,{y: 3.2, x: 2016} | |
| ,{y: 3.4, x: 2016} | |
| ,{y: 4.2, x: 2016} | |
| ,{y: 3.3, x: 2016} | |
| ,{y: 3.8, x: 2016} | |
| ,{y: 4.5, x: 2015} | |
| ,{y: 4.7, x: 2014} | |
| ,{y: 4.6, x: 2013} | |
| ,{y: 4.9, x: 2012} | |
| ,{y: 4.8, x: 2010} | |
| ,{y: 4.5, x: 2010} | |
| ,{y: 5.1, x: 2009} | |
| ,{y: 5.2, x: 2009} | |
| ,{y: 5.2, x: 2009} | |
| ,{y: 3.2, x: 2009} | |
| ,{y: 4, x: 2008} | |
| ,{y: 5.4, x: 2008} | |
| ,{y: 5.4, x: 2007} | |
| ,{y: 3.5, x: 2007} | |
| ,{y: 2.7, x: 2006} | |
| ,{y: 4.1, x: 2006} | |
| ,{y: 4.2, x: 2006} | |
| ,{y: 3.9, x: 2005} | |
| ,{y: 5.5, x: 2005} | |
| ,{y: 4.2, x: 2005} | |
| ,{y: 3.8, x: 2005} | |
| ,{y: 4.4, x: 2005} | |
| ,{y: 3.9, x: 2004} | |
| ,{y: 4.7, x: 2003} | |
| ,{y: 3.3, x: 2003} | |
| ,{y: 3.3, x: 2003} | |
| ,{y: 4.6, x: 2002} | |
| ,{y: 5.8, x: 2001} | |
| ,{y: 5.3, x: 2000} | |
| ,{y: 5.2, x: 1998} | |
| ,{y: 4.1, x: 1998} | |
| ,{y: 5, x: 1997} | |
| ,{y: 5.3, x: 1996} | |
| ,{y: 5.4, x: 1995} | |
| ,{y: 4.4, x: 1994} | |
| ,{y: 6.4, x: 1992} | |
| ,{y: 6, x: 1991} | |
| ,{y: 5.9, x: 1990} | |
| ,{y: 5.9, x: 1988}]; | |
| var labels = [ | |
| 2016, | |
| , 2016 | |
| , 2016 | |
| , 2016 | |
| , 2016 | |
| , 2016 | |
| , 2016 | |
| , 2015 | |
| , 2014 | |
| , 2013 | |
| , 2012 | |
| , 2010 | |
| , 2010 | |
| , 2009 | |
| , 2009 | |
| , 2009 | |
| , 2009 | |
| ,2008 | |
| ,2008 | |
| ,2007 | |
| ,2007 | |
| ,2006 | |
| ,2006 | |
| ,2006 | |
| ,2005 | |
| ,2005 | |
| ,2005 | |
| ,2005 | |
| ,2005 | |
| ,2004 | |
| ,2003 | |
| ,2003 | |
| ,2003 | |
| ,2002 | |
| ,2001 | |
| ,2000 | |
| ,1998 | |
| ,1998 | |
| ,1997 | |
| ,1996 | |
| ,1995 | |
| ,1994 | |
| ,1992 | |
| ,1991 | |
| ,1990 | |
| ,1988]; | |
| var values = [ | |
| 3.7, | |
| ,3.9 | |
| ,3.2 | |
| ,3.4 | |
| ,4.2 | |
| ,3.3 | |
| ,3.8 | |
| ,4.5 | |
| ,4.7 | |
| ,4.6 | |
| ,4.9 | |
| ,4.8 | |
| ,4.5 | |
| ,5.1 | |
| ,5.2 | |
| ,5.2 | |
| ,3.2 | |
| ,4, | |
| ,5.4 | |
| ,5.4 | |
| ,3.5 | |
| ,2.7 | |
| ,4.1 | |
| ,4.2 | |
| ,3.9 | |
| ,5.5 | |
| ,4.2 | |
| ,3.8 | |
| ,4.4 | |
| ,3.9 | |
| ,4.7 | |
| ,3.3 | |
| ,3.3 | |
| ,4.6 | |
| ,5.8 | |
| ,5.3 | |
| ,5.2 | |
| ,4.1 | |
| ,5, | |
| ,5.3 | |
| ,5.4 | |
| ,4.4 | |
| ,6.4 | |
| ,6, | |
| ,5.9 | |
| ,5.9]; | |
| $( document ).ready(function() { | |
| console.log('ready'); | |
| plotGraph(); | |
| }); | |
| var theData; | |
| var movieMap = {}; | |
| var storeData = function() { | |
| $.when(getData()).then(function(theDataWeGot) { | |
| console.dir(theDataWeGot); | |
| theData = theDataWeGot.data; | |
| }); | |
| }; | |
| var getData = function() { | |
| var make = $.Deferred(); | |
| var imdbId = 'nm0000219'; | |
| $.ajax({ | |
| url: 'http://imdb.wemakesites.net/api/' + imdbId, | |
| crossDomain: true, | |
| data: { | |
| api_key: 'f944db93-6274-4955-a630-6e61f11c89c8' | |
| }, | |
| dataType: 'jsonp' | |
| }).done(function(data) { | |
| console.log(data); | |
| make.resolve(data); | |
| }); | |
| return make.promise(); | |
| }; | |
| var retrieveRating = function() { | |
| $.each(theData.filmography, function(index, item){ | |
| console.log(item); | |
| var movieId = /http:\/\/www\.imdb\.com\/title\/(.*)\//.exec(item.info)[1] | |
| console.log("id: " + movieId); | |
| movieMap[movieId] = { info: item.info, title: item.title, year: item.year } | |
| $.ajax({ | |
| url: 'http://app.imdb.com/title/maindetails?tconst=' + movieId | |
| }).done(function(movie) { | |
| if(movie.data && movie.data.rating) { | |
| var movieInfo = movieMap[movie.data.tconst]; | |
| movieInfo["rating"] = movie.data.rating; | |
| movieMap[movie.data.tconst] = movieInfo; | |
| } | |
| }); | |
| }); | |
| }; | |
| var plotData = new Array(); | |
| var prepareData = function() { | |
| $.each(movieMap, function(id, movieDetails) { | |
| year = parseInt(/ (\d*)/.exec(movieDetails.year)[1]) | |
| if(movieDetails.rating && year) { | |
| plotData.push({y: movieDetails.rating, x: year }); | |
| } | |
| }); | |
| }; | |
| var plotGraph = function() { | |
| var ctx = document.getElementById("myChart"); | |
| var myChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: labels.reverse(), | |
| datasets: [ | |
| { | |
| data: values.reverse(), | |
| label: 'the real data' , | |
| spanGaps: true, | |
| cubicInterpolationMode: 'monotone' | |
| } | |
| ], | |
| options: { | |
| scales: { | |
| yAxes: [{ | |
| ticks: { | |
| beginAtZero:true | |
| } | |
| }], | |
| xAxes: [{ | |
| type: 'linear', | |
| position: 'bottom' | |
| }] | |
| } | |
| } | |
| }}); | |
| } | |
| var main = function() { | |
| $.when(storeData()) | |
| .then(retrieveRating()) | |
| .then(prepareData()) | |
| .then(plotGraph()); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <h2>Hello Steven</h2> | |
| <canvas id="myChart" width="400" height="400"></canvas> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment