Permalink
Browse files

SWP

  • Loading branch information...
hdemers committed Jan 24, 2014
1 parent fbfc340 commit cae7104872f9fb97ee7c128c4923382d0fe19c78
@@ -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 {
View
@@ -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();
});
/**
@@ -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")
@@ -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;
+});
+
@@ -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">

0 comments on commit cae7104

Please sign in to comment.