datamaps.js - How to smoothly transition between bubble sizes?

Question

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 (ie grow or shrink) between sizes instead of replacing them?

Answer 1

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

Answer 2

Suppose you have your bubble data in a list called Nodes .

When you transition from 1990 to 2000 (or vice-versa), you can update the radii of the data in Nodes and then redraw them by calling map.bubbles(Nodes) . I tried it and it smoothly transitioned into the new radius and not redrawing them.