(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.