legend for word frequency chart

matthiasn · matthiasn · commit 3fa5fe4bf02c · 2014-03-31T00:55:45.000+02:00
diff --git a/app/views/react_js.scala.html b/app/views/react_js.scala.html
@@ -135,6 +135,7 @@
                         <hr />
                         <div id="wordCloud" class="cloud" ></div>
                         <hr />
+                        <h5>word frequency</h5>
                         <div id="react-bar-chart" class="barchart" ></div>
                     </div>
 
diff --git a/public/react-js/birdwatch.js b/public/react-js/birdwatch.js
@@ -505,7 +505,7 @@ var BirdWatch = BirdWatch || {};
             return {ratioHist: [], posHist: [], lastUpdate: now(), posArrDir: "RIGHT", ratioArrDir: "RIGHT-UP"}
         },
         componentWillReceiveProps: function(props) {
-            this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), 50)});
+            this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), 100)});
             this.setState({posHist: _.last(this.state.posHist.concat(props.idx+1), 2)});
 
             // slope of the fitted position change function
@@ -548,12 +548,16 @@ var BirdWatch = BirdWatch || {};
                 var w = bar.value / arr[0].value * (barChartElem.width() - 190);
                 return Bar( {t:bar.key, y:y, w:w, key:bar.key, idx:i, val:bar.value, count:this.props.count} );
             }.bind(this));
-            return React.DOM.svg( {width:"750", height:"400"}, 
-                     React.DOM.g(null, 
-                       bars,
-                       React.DOM.line( {transform:"translate(168, 0)", y:"0", y2:"375", stroke:"#000000"})
-                     )
-                   )
+            return React.DOM.div(null, 
+                     React.DOM.svg( {width:"750", height:"380"}, 
+                       React.DOM.g(null, 
+                         bars,
+                         React.DOM.line( {transform:"translate(168, 0)", y:"0", y2:"375", stroke:"#000000"})
+                       )
+                     ),
+                    React.DOM.p( {className:"legend"}, React.DOM.strong(null, "1st trend indicator:"), " position changes in last minute"),
+                    React.DOM.p( {className:"legend"}, React.DOM.strong(null, "2nd trend indicator:"), " ratio change termCount / totalTermsCounted over last 100 tweets")
+                  )
         }
     });
 
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
@@ -1,4 +1,5 @@
 body {
+    padding-bottom: 25px;
 }
 
 a {
@@ -120,3 +121,8 @@ a {
 #tweet-count {
     font-weight: bold;
 }
+
+.legend {
+    font-size: 0.8em;
+    margin-bottom: 0;
+}
diff --git a/react-js/jsx/barchart.js b/react-js/jsx/barchart.js
@@ -42,7 +42,7 @@ var BirdWatch = BirdWatch || {};
             return {ratioHist: [], posHist: [], lastUpdate: now(), posArrDir: "RIGHT", ratioArrDir: "RIGHT-UP"}
         },
         componentWillReceiveProps: function(props) {
-            this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), 50)});
+            this.setState({ratioHist: _.last(this.state.ratioHist.concat(props.val / props.count), 100)});
             this.setState({posHist: _.last(this.state.posHist.concat(props.idx+1), 2)});
 
             // slope of the fitted position change function
@@ -85,12 +85,16 @@ var BirdWatch = BirdWatch || {};
                 var w = bar.value / arr[0].value * (barChartElem.width() - 190);
                 return <Bar t={bar.key} y={y} w={w} key={bar.key} idx={i} val={bar.value} count={this.props.count} />;
             }.bind(this));
-            return <svg width="750" height="400">
-                     <g>
-                       {bars}
-                       <line transform="translate(168, 0)" y="0" y2="375" stroke="#000000"></line>
-                     </g>
-                   </svg>
+            return <div>
+                     <svg width="750" height="380">
+                       <g>
+                         {bars}
+                         <line transform="translate(168, 0)" y="0" y2="375" stroke="#000000"></line>
+                       </g>
+                     </svg>
+                    <p className="legend"><strong>1st trend indicator:</strong> position changes in last minute</p>
+                    <p className="legend"><strong>2nd trend indicator:</strong> ratio change termCount / totalTermsCounted over last 100 tweets</p>
+                  </div>
         }
     });
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`body {`
	`2`	`+ padding-bottom: 25px;`
`2`	`3`	`}`
`3`	`4`
`4`	`5`	`a {`
`@@ -120,3 +121,8 @@ a {`
`120`	`121`	`#tweet-count {`
`121`	`122`	`font-weight: bold;`
`122`	`123`	`}`
	`124`	`+`
	`125`	`+.legend {`
	`126`	`+ font-size: 0.8em;`
	`127`	`+ margin-bottom: 0;`
	`128`	`+}`