fixed slides, updated enthusiast

src/pyDataVizDay.py

@@ -81,15 +81,10 @@ def enthusiast():
 @app.route('/slides')
 def slides():
     
-    slide_body = render_template('slide_body.html', filters=filters)
+    slide_body = render_template('slide_body.html')
     return render_template('slides.html', body=slide_body)
 
-@api.route('/keywords')
+def filter_with_args(args):
-@api.expect(parser)
-class keywords(Resource):
-  def get(self):
-    args = parser.parse_args()
-
     try:
       args['genre'] = args['genre'].split(',')
     except:
@@ -103,31 +98,56 @@ class keywords(Resource):
     except:
       pass
 
-    # try:
+    data_filtered = data.filter(start_year=args['start_year'],
-    #   args['start_year'] = int(args['start_year'].strip())
+                       end_year=args['end_year'],
-    # except:
+                       genre=args['genre'],
-    #   args['start_year'] = 1900   
+                       country=args['country'],
+                       language=args['language'],
+                       top=args['top']
+                       )
 
-    # try:
+    return data_filtered
-    #   args['end_year'] = int(args['end_year'].strip())
-    # except:
-    #   args['end_year'] = 3000
 
-    keyword_data = data.filter(start_year=args['start_year'],
-                               end_year=args['end_year'],
-                               genre=args['genre'],
-                               country=args['country'],
-                               language=args['language'],
-                               top=args['top']
-                               )
 
-    print(len(keyword_data.movie))
+@api.route('/keywords')
+@api.expect(parser)
+class keywords(Resource):
+  def get(self):
+    args = parser.parse_args()
+    keyword_data = filter_with_args(args)
     
     c = Counter(keyword_data.keyword.plot_keywords.values.tolist())
     words = [{'text': word[0], 'weight': word[1]} for word in c.most_common(50)]
 
     return jsonify(words)
 
+@api.route('/score_timeseries')
+@api.expect(parser)
+class score_timeseries(Resource):
+  def get(self):
+    args = parser.parse_args()
+    score_data = filter_with_args(args)
+
+    df = (score_data
+      .movie
+      .sort_values('imdb_score', ascending=False)
+     .head(500)
+     .groupby(['title_year'])
+      .mean()[['imdb_score', 'gross']]
+      .rolling(3).mean()
+      .dropna()
+      .ewm(5).mean()
+      .round(3)
+      .rename(columns={'imdb_score': 'IMDB Score'})
+      )
+    df['DATE'] = df.index
+    print(df.head())
+    score_timeseries = {'columns':[['IMDB Score'] + df['IMDB Score'].values.tolist(),
+                                    ['gross'] + df['gross'].values.tolist(),
+                                    ['x'] + df.index.values.tolist()]}
+
+    return jsonify(score_timeseries)
+
 if __name__ == '__main__':
     port = int(os.environ.get("PORT", 5000))
     app.run(host='0.0.0.0', port=port, debug=True)

src/static/js/enthusiast.js

@@ -1,17 +1,117 @@
+var score_timeseries = document.getElementById('timeseries');
+var data = {
+  'size': {
+    'height': 300
+  },
+  'data': {
+    'x': 'x',
+    'axes': {
+      'IMDB Score': 'y2',
+      'gross': 'y',
+      'x': 'y'
+    },
+    'columns': [
+    [
+    'IMDB Score'
+    ],
+    [
+    'gross'
+    ],
+    [
+    'x'
+    ]
+    ],
+    'colors': {
+      'IMDB Score': '#6998A6',
+      'gross': '#966001',
+      'x': '#08414C'
+    }
+  },
+  'subchart': {
+    'show': false
+  },
+  'point': {
+    'show': false
+  },
+  'grid': {
+    'x': {
+      'show': false
+    },
+    'y': {
+      'show': false
+    }
+  },
+  'axis': {
+    'rotated': false,
+    'x': {
+      'tick': {
+        'count': 10,
+        'values': false,
+        'culling': {},
+        'format': '%Y-%m-%d'
+      }
+    },
+    'y': {
+      'tick': {
+        'format': ''
+      }
+    },
+    'y2': {
+      'tick': {},
+      'show': true
+    }
+  },
+  'zoom': {}
+};
+data['axis']['y']['tick']['format'] = d3.format('$.3s')
+data['axis']['y2']['tick']['format'] = d3.format('.3s')
+data['bindto']='#timeseries-chart'
 
-$('#top').change(function(){update_words()})
+
-$('#language').change(function(){update_words()})
+$('#top').change(function(){update_all()})
-$('#country').change(function(){update_words()})
+$('#language').change(function(){update_all()})
-$('#genre').change(function(){update_words()})
+$('#country').change(function(){update_all()})
-$('#start_year').change(function(){update_words()})
+$('#genre').change(function(){update_all()})
-$('#end_year').change(function(){update_words()})
+$('#start_year').change(function(){update_all()})
+$('#end_year').change(function(){update_all()})
 
 jQuery(document).ready(function(){
   jQuery(".chosen").chosen();
-  update_words()
+  score_timeseries = c3.generate(data);
+  update_all()
 
 });
 
+function update_all(){
+  update_words()
+  update_ts()
+}
+
+function update_ts(){
+  var _top = $('#top').val()
+  var language = $('#language').val()
+  var country = $('#country').val()
+  var genre = $('#genre').val()
+  var start_year = $('#start_year').val()
+  var end_year = $('#end_year').val()
+
+  url = '/api/score_timeseries?'
+
+  if (_top.length>0){url = url + 'top=' + _top + '&'}
+  if (language.length>0){url = url + 'language=' + language + '&'}
+  if (country.length>0){url = url + 'country=' + country + '&'}
+  if (genre.length>0){url = url + 'genre=' + genre + '&'}
+  if (start_year.length>0){url = url + 'start_year=' + start_year + '&'}
+  if (end_year.length>0){url = url + 'end_year=' + end_year + '&'}
+
+  var updatedData = $.get(url);
+  updatedData.done(function(results){
+    console.log(updatedData.responseJSON)
+    score_timeseries.load(updatedData.responseJSON)
+  });
+
+}
+
 function update_words(){
   var _top = $('#top').val()
   var language = $('#language').val()
@@ -46,4 +146,3 @@ function update_words(){
   })
 }
 
-

src/templates/enthusiast.html

@@ -19,6 +19,17 @@
 {% block body %}
     {{ super ()}}
     {{ form | safe }}
-    <div id='word_cloud'></div>
+    <div class="container" padding:50px>
+        <div class="row" min-height:150px>
+            <div class='col-sm-6'>
+                <div id='timeseries-chart'></div>
+            </div>
+        </div>
+        <div class="row" min-height:150px>
+            <div class='col-sm-6'>
+                <div id='word_cloud'></div>
+            </div>
+        </div> 
+    </div>
     <script src='static/js/enthusiast.js'></script>
 {% endblock %}