Got sentiments working on startpage! :)

* got sentiments working on startpagenpm startnpm startnpm start :)

* added sentiment heading and moved plod description upwards

app/components/common/AntagonistsComp/AntagonistsComp.jsx

@@ -9,7 +9,7 @@ import MapComp from '../MapComp/MapComp.jsx';
 
 export default class AntagonistsComp extends Component {
   render() {
-  let  randompair = Math.floor(Math.random() * json.length);
+  let randompair = Math.floor(Math.random() * json.length);
   let name1 = json[randompair][0];
   let name2 = json[randompair][1];
   let img1 = '/static/images/'+json[randompair][0].replace(/ /g,'_')+'.jpg';
@@ -21,8 +21,6 @@ export default class AntagonistsComp extends Component {
           <Col>
             <h1 className="text-center">Who will be the next eliminated?</h1>
             <BigBattle name1={name1} name2={name2} img1={img1} img2={img2} />
-            <p><em>PLOD</em> is the <strong>likelihood of death</strong> of a character. Learn more about how we calculate this score <a href="/machine-learning-algorithm-predict-death-game-of-thrones">here</a>.</p>
-
             <br />
             <h3>{name1}'s and {name2}'s location-history on a map:</h3>
             <MapComp character={[name1, name2]}/>

app/components/common/BigBattle/BigBattle.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 let {Component} = React;
+import d3 from 'd3';
+import $ from 'jquery';
 import './BigBattle.css';
 import {Image, Row, Col} from 'react-bootstrap';
 
@@ -8,6 +10,15 @@ export default class BigBattle extends Component {
     super(props);
   }
   render() {
+    $('head').append('<link rel="stylesheet" type="text/css" href="/d4/chart.css">');
+    let name1 = this.props.name1.replace(/ /g,'_');
+    let name2 = this.props.name2.replace(/ /g,'_');
+    $.getScript("/d4/chart.js",function(){
+      var chart1 = new characterChart(d3.select("#chart1"), "/d4/csv/" + name1 + ".csv"); /*eslint no-undef:0*/
+      d3.select(window).on('resize', chart1.resize);/*eslint no-undef:0*/
+      var chart2 = new characterChart(d3.select("#chart2"), "/d4/csv/" + name2 + ".csv"); /*eslint no-undef:0*/
+      d3.select(window).on('resize', chart2.resize);/*eslint no-undef:0*/
+    });
     return (
       <div>
         <Row className="big-battle">
@@ -22,12 +33,22 @@ export default class BigBattle extends Component {
           <Col xs={6}>
             <h3>{this.props.name1}</h3>
             <p>PLOD: 70%</p>
-            <p>[Sentiment-Placeholder]</p>
+
           </Col>
           <Col xs={6}>
             <h3>{this.props.name2}</h3>
             <p>PLOD: 50%</p>
-            <p>[Sentiment-Placeholder]</p>
+          </Col>
+        </Row>
+        <p><em>PLOD</em> is the <strong>likelihood of death</strong> of a character. Learn more about how we calculate this score <a href="/machine-learning-algorithm-predict-death-game-of-thrones">here</a>.</p>
+        <br />
+        <Row className="big-battle-info">
+          <h3>Twitter Sentiments</h3>
+          <Col xs={6}>
+            <svg id="chart1" width="100%" height="400"></svg>
+          </Col>
+          <Col xs={6}>
+            <svg id="chart2" width="100%" height="400"></svg>
           </Col>
         </Row>
       </div>

package.json

@@ -30,6 +30,7 @@
     "css-loader": "^0.23.1",
     "csslint": "^0.10.0",
     "csslint-loader": "^0.2.1",
+    "d3": "^3.5.16",
     "es6-promise": "^3.1.2",
     "eslint": "^2.2.0",
     "eslint-loader": "^1.3.0",

server/d4.js

@@ -27,21 +27,23 @@ try {
     }
   }
 }
-const ctrData = require('./controllers/data');
 
 gotsent.cfg.extend(cfg);
-gotsent.init();
 
-gotsent.update();
+gotsent.init();
+gotsent.startUpdateLoop();
 
-d4.use('/csv/:slug.csv', ctrData);
 d4.get('/chart.css', function(req,res) {
     res.sendFile(gotsent.css);
 });
 d4.get('/chart.js', function(req,res) {
     res.sendFile(gotsent.js);
 });
 
+const oneHour = 3600000;
+d4.use('/csv', express.static(__dirname + '/../csv', { maxAge: oneHour }));
+
+
 d4.get('/sentiment/:rank', function (req,res) {
   if (req.params.rank == "top") {
     gotsent.mostPopular(parseInt(req.query.number)).then(function(result){