Make pins drop onto the map

sourceList.js

@@ -1,6 +1,7 @@
 module.exports = [
 
         "/js/jquery.sticky.js"
+    ,   "/js/jquery.easing.js"
     ,   "/js/jquery.pause.js"
     ,   "/js/internalNav.js"
     ,   "/js/pollyfill.js"

statics/js/demo/view/ClientView.js

@@ -42,8 +42,9 @@ var ClientView = (function(){
             switch(pageName){
                 case "singlePageSite":
                 case "graph":
-                case "map":
                     return SimpleClient;
+                case "map":
+                    return PinDropClient;
                 case "cartogram":
                     return PoliticalClient;
                 case "twitter":
@@ -122,9 +123,7 @@ var ClientView = (function(){
     var SimpleClient = extend(ClientView, function(client, demoView){
         ClientView.apply(this, arguments);
 
-        client.events('gotData').on(function( packet ){
-            addClass(this.jDom, 'received-' + packet.ordering.i);
-        }.bind(this));
+        client.events('gotData').on(this.newData.bind(this));
 
         client.events('reset').on(function(){
             var ele = this.jDom[0],
@@ -135,8 +134,32 @@ var ClientView = (function(){
         }.bind(this));        
     });
 
+    SimpleClient.prototype.newData = function( packet ){
+       addClass(this.jDom, 'received-' + packet.ordering.i);
+    }; 
+
     // ---------------------------------
 
+   /* like simple but animates new pins appearing */
+   var PinDropClient = extend(SimpleClient, function(client, demoView){
+      SimpleClient.apply(this, arguments);
+   });
+
+   PinDropClient.prototype.newData = function( packet ){
+
+      // random delay before dropping because for non-progressive parsing
+      // it looks odd if all drop perfectly together
+      var randomDelay = Math.random() * 400;
+
+      SimpleClient.prototype.newData.apply(this, arguments);
+
+      var jPin = this.jDom.find('.unit-' + packet.ordering.i + ' .pointer');
+      jPin.css('translateY', -20);
+      jPin.delay(randomDelay).animate({'translateY': 0}, {easing:'easeOutBounce'});
+   };   
+
+   // ---------------------------------   
+
     var PoliticalClient = extend(ClientView, function(client, demoView){
         ClientView.apply(this, arguments);
 

statics/js/jquery.easing.js

@@ -0,0 +1,49 @@
+/*
+ * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
+ *
+ * Uses the built in easing capabilities added In jQuery 1.1
+ * to offer multiple easing options
+ *
+ * TERMS OF USE - jQuery Easing
+ * 
+ * Open source under the BSD License. 
+ * 
+ * Copyright © 2008 George McGinley Smith
+ * All rights reserved.
+ * 
+ * Redistribution and use in source and binary forms, with or without modification, 
+ * are permitted provided that the following conditions are met:
+ * 
+ * Redistributions of source code must retain the above copyright notice, this list of 
+ * conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright notice, this list 
+ * of conditions and the following disclaimer in the documentation and/or other materials 
+ * provided with the distribution.
+ * 
+ * Neither the name of the author nor the names of contributors may be used to endorse 
+ * or promote products derived from this software without specific prior written permission.
+ * 
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY 
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
+ *  COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ *  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
+ *  GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED 
+ * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
+ *  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED 
+ * OF THE POSSIBILITY OF SUCH DAMAGE. 
+ *
+ */
+
+// t: current time, b: begInnIng value, c: change In value, d: duration
+jQuery.easing.easeOutBounce = function (x, t, b, c, d) {
+   if ((t/=d) < (1/2.75)) {
+      return c*(7.5625*t*t) + b;
+   } else if (t < (2/2.75)) {
+      return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
+   } else if (t < (2.5/2.75)) {
+      return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
+   } else {
+      return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
+   }
+};