(view source)Animated Symbols

How to do it

To change symbols after you added them you need to call symbolgroup.update().

var key = 'Violence';

// a simple function that returns symbol attributes
function symbolAttrs(city) {
   return {
      r: Math.sqrt(scale(city[key])) * 30,  // radius in pixel
      fill: colscale(scale(city[key]))  // color using chroma.js
   };
}

// initialize symbols
symbols = map.addSymbols({
   type: kartograph.Bubble,
   data: crimeCities,
   location: function(d) { return d.ll },
   attrs: symbolAttrs
});

// a function to update the symbols..
updateMap = function() {
   key = $('.crime-type').val();
   scale = kartograph.scale.linear(crimeCities, key);

   symbols.update({
      attrs: symbolAttrs
   }, 500, 'backOut');
}

// ..which gets called as the user requests it
$('.crime-type').change(updateMap);

For more details please check the source of this page or look up the Kartograph.js documentation.