I am using datamaps' bubbles to show data that changes slightly from year to year:
http://jsbin.com/goqeve/edit?html,output
(Click between the '1990' and '2000' buttons on the bottom)
When I replace the bubbles with map.bubbles([...])
, the default animation is for new bubbles to grow from the center, which obscures the small changes in size. How can I get the bubbles to transition smoothly (i.e. grow or shrink) between sizes instead of replacing them?
Looking at the datamaps source I noticed it does a transition on the circles, but it uses JSON.stringify
on the bubble object as the key for the selection. If any attribute changes it’s considered new data and has its initial radius set to 0. I added an option to only use the lat/lng as the key so I don’t need to re-write the transition: https://github.com/markmarkoh/datamaps/pull/225