d3.jsdatamaps

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


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?


Solution

  • 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