made orders of magnitude a computed value, cleaned up animations

eduardofv · Jun 21, 2011 · 2db694b · 2db694b
1 parent 5183cb2
commit 2db694b
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 35 deletions.
diff --git a/css/sass/screen.scss b/css/sass/screen.scss
@@ -70,7 +70,7 @@ aside {
   }
 
   p.github {
-    background: transparent url(/images/octocat.png) 0% 50% no-repeat;
+    background: transparent url(/images/octocat.png) 0% 20% no-repeat;
     padding-left: 1.7em;
   }
 }
@@ -223,7 +223,7 @@ screen and (max-device-width: 480px) {
 }
 
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 700px) {
   aside, section { 
     float: none; 
     width: auto;

diff --git a/css/screen.css b/css/screen.css
@@ -127,7 +127,7 @@ aside p {
 }
 /* line 72, sass/screen.scss */
 aside p.github {
-  background: transparent url(/images/octocat.png) 0% 50% no-repeat;
+  background: transparent url(/images/octocat.png) 0% 20% no-repeat;
   padding-left: 1.7em;
 }
 
@@ -308,7 +308,7 @@ screen and (max-device-width: 480px) {
     -webkit-text-size-adjust: none;
   }
 }
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 700px) {
   /* line 227, sass/screen.scss */
   aside, section {
     float: none;

diff --git a/js/app.js b/js/app.js
@@ -1,5 +1,5 @@
 (function() {
-  var BENFORD_VALUES, MAX_CHART_WIDTH_PERCENTAGE, adjustFooter, drawChart, getDataset, getMultiplierForDataset, initChart, observeDatasetOptions, placeBenfordMarkers, populateDatasetOptions, zeroChart;
+  var BENFORD_VALUES, MAX_CHART_WIDTH_PERCENTAGE, adjustFooter, drawChart, getDataset, getMultiplierForDataset, getOrdersOfMagnitudeBetween, initChart, observeDatasetOptions, placeBenfordMarkers, populateDatasetOptions, zeroChart;
   BENFORD_VALUES = {
     1: 30.1,
     2: 17.6,
@@ -61,36 +61,40 @@
   zeroChart = function(nextDataset) {
     $('table#stats td:nth-child(2)').fadeOut('fast');
     $('#data-source').fadeOut('fast');
-    $('ol#chart li').each(function(index) {
+    return $('ol#chart li').each(function(index) {
       $(this).find('.fill').next('span').fadeOut('fast');
       $(this).find('b').fadeOut('fast');
       return $(this).find('.fill').animate({
         width: 0
       }, {
-        duration: 400
+        duration: 400,
+        complete: function() {
+          if (index === 8) {
+            return getDataset(nextDataset);
+          }
+        }
       });
     });
-    return getDataset(nextDataset);
   };
   drawChart = function(data, multiplier) {
-    $('ol#chart li').each(function(index) {
+    return $('ol#chart li').each(function(index) {
       var value;
       value = data.values[index + 1];
       return $(this).find('.fill').animate({
         width: value * multiplier + '%'
       }, {
         duration: 400,
         complete: function() {
-          return $(this).next('span').html(value + '%');
+          $(this).next('span').html(value + '%');
+          if (index === 8) {
+            $('ol#chart li .fill').next('span').fadeIn('fast');
+            $('table#stats td:nth-child(2)').fadeIn('fast');
+            $('#data-source').fadeIn('fast');
+            return placeBenfordMarkers(multiplier);
+          }
         }
       });
     });
-    return setTimeout(function() {
-      $('ol#chart li .fill').next('span').fadeIn('fast');
-      $('table#stats td:nth-child(2)').fadeIn('fast');
-      $('#data-source').fadeIn('fast');
-      return placeBenfordMarkers(multiplier);
-    }, 1000);
   };
   getDataset = function(name) {
     return $.getJSON('/js/datasets/' + name + '.json', function(data) {
@@ -104,7 +108,7 @@
       $('#num-records').text(data.num_records);
       $('#min-value').text(data.min_value);
       $('#max-value').text(data.max_value);
-      $('#orders-of-magnitude').text(data.magnitude);
+      $('#orders-of-magnitude').text(getOrdersOfMagnitudeBetween(data.min_value, data.max_value));
       $('#data-source').text(data.source).attr('href', data.source);
       return drawChart(data, multiplier);
     });
@@ -119,4 +123,9 @@
     });
     return MAX_CHART_WIDTH_PERCENTAGE / max;
   };
+  getOrdersOfMagnitudeBetween = function(min, max) {
+    min = parseInt(min.replace(/,/g, ""));
+    max = parseInt(max.replace(/,/g, ""));
+    return Math.floor(Math.LOG10E * Math.log(max - min));
+  };
 }).call(this);
diff --git a/js/coffee/app.coffee b/js/coffee/app.coffee
@@ -66,11 +66,10 @@ zeroChart = (nextDataset) ->
       width: 0
     }, {
       duration: 400
+      complete: ->
+        getDataset nextDataset if index == 8
     })
 
-  getDataset nextDataset
-
-
 drawChart = (data, multiplier) ->
   $('ol#chart li').each (index) ->
     value = data.values[index + 1]
@@ -80,16 +79,13 @@ drawChart = (data, multiplier) ->
       duration: 400
       complete: ->
         $(@).next('span').html(value+'%')
+        if index == 8
+          $('ol#chart li .fill').next('span').fadeIn('fast')
+          $('table#stats td:nth-child(2)').fadeIn('fast')
+          $('#data-source').fadeIn('fast')
+          placeBenfordMarkers multiplier
     })
 
-  setTimeout ->
-    $('ol#chart li .fill').next('span').fadeIn('fast')
-    $('table#stats td:nth-child(2)').fadeIn('fast')
-    $('#data-source').fadeIn('fast')
-    placeBenfordMarkers multiplier
-  , 1000
-
-
 getDataset = (name) ->
   $.getJSON '/js/datasets/'+name+'.json', (data) ->
     # Set the chart description
@@ -107,18 +103,21 @@ getDataset = (name) ->
     $('#num-records').text(data.num_records)
     $('#min-value').text(data.min_value)
     $('#max-value').text(data.max_value)
-    $('#orders-of-magnitude').text(data.magnitude)
+    $('#orders-of-magnitude').text(getOrdersOfMagnitudeBetween(data.min_value, data.max_value))
 
     # Update the data source
     $('#data-source').text(data.source).attr('href', data.source)
 
     drawChart(data, multiplier)
 
-
 getMultiplierForDataset = (dataset) ->
   max = 0
   $.each dataset.values, (key, val) ->
     max = val if val > max
 
   return MAX_CHART_WIDTH_PERCENTAGE/max
 
+getOrdersOfMagnitudeBetween = (min, max) ->
+  min = parseInt(min.replace(/,/g, ""))
+  max = parseInt(max.replace(/,/g, ""))
+  return Math.floor(Math.LOG10E * Math.log(max - min))
diff --git a/js/datasets/kiva.json b/js/datasets/kiva.json
@@ -13,6 +13,5 @@
   "num_records": "165,450",
   "min_value": "25",
   "max_value": "10,000",
-  "magnitude": "3",
   "source": "http://build.kiva.org/docs/data/snapshots"
 }
diff --git a/js/datasets/library.json b/js/datasets/library.json
@@ -13,6 +13,5 @@
   "num_records": "9241",
   "min_value": "10",
   "max_value": "21,611,832",
-  "magnitude": "7",
   "source": "http://explore.data.gov/Social-Insurance-and-Human-Services/Public-Libraries-Survey-Fiscal-Year-2008/nmjm-cdkr"
 }
diff --git a/js/datasets/spain.json b/js/datasets/spain.json
@@ -13,6 +13,5 @@
   "num_records": "8114",
   "min_value": "5",
   "max_value": "3,255,944",
-  "magnitude": "6",
   "source": "http://www.infochimps.com/datasets/all-villages-and-cities-in-spain-with-population-and-area-in-squ"
 }
diff --git a/js/datasets/stars.json b/js/datasets/stars.json
@@ -13,6 +13,5 @@
   "num_records": "300",
   "min_value": "4",
   "max_value": "3000",
-  "magnitude": "3",
   "source": "http://www.atlasoftheuniverse.com/stars.html"
 }
diff --git a/js/datasets/twitter.json b/js/datasets/twitter.json
@@ -13,6 +13,5 @@
   "num_records": "38,670,514",
   "min_value": "1",
   "max_value": "4,706,631",
-  "magnitude": "6",
   "source": "http://www.infochimps.com/datasets/twitter-census-twitter-users-by-friends-count"
 }