Permalink
Browse files

made the population size graph animated

  • Loading branch information...
1 parent 83b44fd commit b874f4d6a55faaa6dd7d6d0a6a2985bae7fc324d @madewulf committed Sep 3, 2012
Showing with 34 additions and 34 deletions.
  1. +0 −1 static/css/base.css
  2. +33 −32 static/js/pyramid.js
  3. +1 −1 templates/index.html
View
1 static/css/base.css
@@ -151,7 +151,6 @@ a.temp_selected_link
text-decoration: none;
padding: 1px 2px;
margin: 0px -2px;
-
text-align: center;
}
View
65 static/js/pyramid.js
@@ -166,6 +166,12 @@ function getClickHandler(rect)
}
}
+function updatePopGraph()
+{
+ drawPopulationCurve();
+ drawCrossOnPopGraph(currentYear);
+}
+
function drawCrossOnPopGraph (year)
{
var currentPopValue = populations[currentCountry][year];
@@ -183,6 +189,19 @@ function drawPopulationCurve()
{
var l = years.length;
var curveString = "";
+ var minP = 20000000;
+ var maxP = 0 ;
+ for (var i=0;i<l;i++)
+ {
+ year = years[i];
+ var currentVal = populations[currentCountry][year];
+ if (currentVal < minP)
+ minP = currentVal;
+ if (currentVal > maxP)
+ maxP = currentVal;
+ }
+ spanP = maxP ;
+
for (var i=0;i<l;i++)
{
year = years[i];
@@ -195,33 +214,27 @@ function drawPopulationCurve()
curveString +="L";
curveString += x +" " + y;
}
- if (curve)
- curve.remove();
- curve = paper2.path(curveString);
- curve.attr({stroke:'#D156BF', 'stroke-width':2, 'stroke-linecap':'round'});
+ if (!curve)
+ {
+ curve = paper2.path(curveString);
+ curve.attr({stroke:'#D156BF', 'stroke-width':2, 'stroke-linecap':'round'});
+ }
+ else
+ curve.animate({path:curveString}, 1000);
}
function drawPopGraphCanvas()
{
paper2 = new Raphael(document.getElementById('canvas_container2'), curveWidth, curveHeight);
var l = years.length;
- var minP = 20000000;
- var maxP = 0 ;
- var year, x, y;
+
+
+ var year, x;
curvePadding = 3;
useableWidth = curveWidth -curvePadding*2;
useableHeight = curveHeight -curvePadding*2;
- for (var i=0;i<l;i++)
- {
- year = years[i];
- var currentVal = populations[currentCountry][year];
- if (currentVal < minP)
- minP = currentVal;
- if (currentVal > maxP)
- maxP = currentVal;
- }
- spanP = maxP ;
+
spacing = useableWidth/(l);
/*axes drawing*/
@@ -283,20 +296,6 @@ $(function () {
});
});
- $("#country_list_div ul").on("click", 'a',function (event) {
- event.preventDefault();
- $(".country_link").removeClass("selected_link");
- $(this).addClass("selected_link");
- var country = $(this).attr("id");
- currentCountry = country;
- changePyramidInfo();
- $.getJSON("/static/data/generated/" + country + ".json", function (data) {
- currentCountryData = data;
- var p2 = generatePath( );
- c.animate({path:p2}, 1000);
- changePyramidInfo();
- });
- });
$(".alphaTab a").click(function(event)
{
@@ -311,13 +310,15 @@ $(function () {
$(".country_link").click(function (event) {
event.preventDefault();
currentCountry = $(this).attr("id");
- console.log("country_link " + currentCountry);
+ $(".country_link").removeClass("selected_link");
+ $(this).addClass("selected_link");
$.getJSON("/static/data/generated/" + currentCountry + ".json", function (data) {
currentCountryData = data;
var p2 = generatePath( );
c.animate({path:p2}, 1000);
changePyramidInfo();
+ updatePopGraph();
});
});
});
View
2 templates/index.html
@@ -113,7 +113,7 @@ <h2 style="float:right;padding-bottom:0px;">
<div class="countryList" id="tabs-{{big_tuple.0}}">
{% for country_t in big_tuple.1%}
<div class="countryNameDiv">
- <a class="country_link" href="/{{country_t.0}}/{{currentYear}}/" id="{{country_t.0}}">{{country_t.1}}</a>
+ <a class="country_link {%if currentCountry == country_t.0 %}selected_link {%endif%}" href="/{{country_t.0}}/{{currentYear}}/" id="{{country_t.0}}">{{country_t.1}}</a>
</div>
{%endfor%}
</div>

0 comments on commit b874f4d

Please sign in to comment.