SWP

hdemers · Jan 24, 2014 · cae7104 · cae7104
1 parent fbfc340
commit cae7104
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 32 deletions.
diff --git a/birdwtch/static/css/app.less b/birdwtch/static/css/app.less
@@ -25,7 +25,8 @@
 @forest: #077500;
 @white: white;
 
-@sidemenuwidth: 280px;
+@menuwidth: 280px;
+@graphwidth: 280px;
 
 body {
     background-color: @background;
@@ -36,12 +37,9 @@ a {
     color: @blue;
 }
 
-.sidemenu {
+.sidebar {
     position: absolute;
-    left: -(@sidemenuwidth - 20px);
-    width: @sidemenuwidth;
     height: 100%;
-    padding: 20px;
     overflow: auto;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -58,11 +56,17 @@ a {
     display: none;
 }
 
-.sidemenu:hover {
+.menu {
+    left: -(@menuwidth - 20px);
+    width: @menuwidth;
+    padding: 20px;
+}
+
+.menu:hover {
     left: 0px;
 }
 
-.sidemenu h4 {
+.menu h4 {
     margin-top: 50px;
 }
 
@@ -195,20 +199,30 @@ footer {
 .dot-und {
 }
 
+.bar {
+    fill-opacity: 0.9;
+}
+
 // Graph related style
 
-.graph .languages {
-    position: absolute;
-    bottom: 32%;
-    right: 38%;
-    font-size: 18px;
+.graph-container {
+    right: -(@graphwidth - 20px);
+    width: @graphwidth;
+    background-color: transparent;
+    padding-left: 10px;
 }
 
-.graph .countries {
-    position: absolute;
-    bottom: 32%;
-    right: 50%;
-    font-size: 18px;
+.graphs {
+    background-color: @dot;
+    height: 100%;
+}
+
+.graph-container:hover {
+    right: 0px;
+}
+
+.language-graph {
+    height: 100%;
 }
 
 .axis text {

diff --git a/birdwtch/static/js/app.js b/birdwtch/static/js/app.js
@@ -12,7 +12,7 @@ define([
   "worldmap",
   "moment",
   "pseudort",
-  "barchart"
+  "stackedbar"
 ],
 function ($, _, ko, viewmodel, websocket, worldmap, moment, pseudort, barchart) {
   var exports = {}, makeDot, world, receive_tweets, deburst, metadata,
@@ -80,14 +80,16 @@ function ($, _, ko, viewmodel, websocket, worldmap, moment, pseudort, barchart)
     }, 1000);
 
     setTimeout(function () {
-      $(".sidemenu").css("left", "-100px");
+      $(".menu").css("left", "-100px");
+      $(".graph-container").css("right", "-100px");
       setTimeout(function () {
-        $(".sidemenu").css("left", "");
-      }, 250);
-    }, 3000);
+        $(".menu").css("left", "");
+        $(".graph-container").css("right", "");
+      }, 400);
+    }, 4000);
 
     // Create a bar chart for showing language frequencies.
-    language_chart = barchart.create(".graph .languages");
+    language_chart = barchart.create(".language-graph");
     // Create a bar chart for showing country frequencies.
     //country_chart = barchart.create(".graph .countries");
   };
@@ -243,6 +245,7 @@ function ($, _, ko, viewmodel, websocket, worldmap, moment, pseudort, barchart)
   $(window).resize(function () {
     $("#worldmap").height($(window).height());
     world.redraw();
+    language_chart.redraw();
   });
 
   /**

diff --git a/birdwtch/static/js/barchart.js b/birdwtch/static/js/barchart.js
@@ -11,7 +11,7 @@ function ($, _, d3) {
     var that = {},
       margin = {top: 10, right: 10, bottom: 120, left: 40},
       width = 300 - margin.left - margin.right,
-      height = 250 - margin.top - margin.bottom,
+      height = 550 - margin.top - margin.bottom,
       xAxis, yAxis, formatPercent,
       x = d3.scale.ordinal().rangeRoundBands([0, width], 0.85, 1.5),
       y = d3.scale.linear().range([height, 0]),
@@ -23,8 +23,12 @@ function ($, _, d3) {
         .attr("width", width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
         .attr("class", "bar-lang")
-        .on("mouseover", function () {d3.selectAll(".axis").classed({hide: false}); })
-        .on("mouseout", function () {d3.selectAll(".axis").classed({hide: true}); })
+        .on("mouseover", function () {
+          d3.selectAll(".axis").classed({hide: false});
+        })
+        .on("mouseout", function () {
+          d3.selectAll(".axis").classed({hide: true});
+        })
       .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
@@ -73,14 +77,15 @@ function ($, _, d3) {
       bars.enter().append("rect")
         .attr("class", function (d) {return "bar " + d.class; })
         .attr("x", function (d) { return x(d.name); })
-        .attr("width", x.rangeBand())
         .attr("y", function (d) { return y(d.frequency); })
+        .attr("width", x.rangeBand())
         .attr("height", function (d) { return height - y(d.frequency); });
 
       bars.transition()
         .duration(700)
         .attr("x", function (d) { return x(d.name); })
         .attr("y", function (d) { return y(d.frequency); })
+        .attr("width", x.rangeBand())
         .attr("height", function (d) { return height - y(d.frequency); });
 
       svg.select(".x.axis")

diff --git a/birdwtch/static/js/stackedbar.js b/birdwtch/static/js/stackedbar.js
@@ -0,0 +1,73 @@
+/*global */
+define([
+  "jquery",
+  "underscore",
+  "d3"
+],
+function ($, _, d3) {
+  var exports = {};
+
+  var sum = function (array) {
+    return _.reduce(array, function (memo, num) { return memo + num; }, 0);
+  };
+
+  exports.create = function (selector) {
+    var that = {}, margin, width, height, y, svg, barWidth;
+
+    that.init = function () {
+      barWidth = 20;
+      margin = {top: 0, right: 100, bottom: 0, left: 0};
+      width = barWidth + margin.left + margin.right;
+      height = $(selector).height() - margin.top - margin.bottom;
+      y = d3.scale.linear().rangeRound([height, 0]);
+
+      svg = d3.select(selector).append("svg")
+          .attr("width", width)
+          .attr("height", height + margin.top + margin.bottom)
+          .attr("class", "bar-lang")
+        .append("g");
+    };
+
+    that.draw = function (data) {
+      var bars, total = sum(_.pluck(data, 'frequency')), y0 = 0;
+
+      y.domain([0, total]);
+
+      data.forEach(function (d) {
+        d.y0 = y0;
+        d.y1 = y0 + d.frequency;
+        y0 = d.y1;
+      });
+
+      bars = svg.selectAll(".bar")
+        .data(data);
+
+      bars.enter().append("rect")
+        .attr("class", function (d) {return "bar " + d.class; })
+        .attr("x", 0)
+        .attr("y", function (d) { return y(d.y1); })
+        .attr("width", barWidth)
+        .attr("height", function (d) { return y(d.y0) - y(d.y1); });
+
+      bars.transition()
+        .duration(700)
+        .attr("y", function (d) { return y(d.y1); })
+        .attr("height", function (d) { return y(d.y0) - y(d.y1); });
+
+    };
+
+    that.redraw = function () {
+      if ($(selector).width() !== width) {
+        // Remove everything under `selector`.
+        $(selector).children().remove();
+        that.init();
+      }
+    };
+
+    that.init();
+    return that;
+  };
+
+  return exports;
+});
+
diff --git a/birdwtch/templates/index.html b/birdwtch/templates/index.html
@@ -13,7 +13,7 @@
 {% endblock headscripts %}
 
 {% block content %}
-<div class="sidemenu hidden-xs">
+<div class="sidebar menu hidden-xs">
   <h4> Showing tweets having geographic coordinates </h4>
 
   <p>Sometime tweets come with geographic coordinates attached as metadata.
@@ -40,6 +40,11 @@ <h4> Showing tweets having geographic coordinates </h4>
 
 </div>
 
+<div class="sidebar graph-container hidden-xs">
+  <div class="graphs">
+    <div class="language-graph"></div>
+  </div>
+</div>
 
 <div class="container-fluid">
 
@@ -53,10 +58,6 @@ <h1 class="col-md-12">birdwtch
     </div>
   </div>
 
-  <div class="graph">
-    <div class="languages"></div>
-    <div class="countries"></div>
-  </div>
 
   <div class="metadata">