CODEWITHSUNDEEP
d3.jsdatamaps
thebenedict
thebenedict

Reputation: 2589

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?

Upvotes: 0

Views: 929

Answers (2)

Luigi Sacco
Luigi Sacco

Reputation: 31

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.

Upvotes: 1

thebenedict
thebenedict

Reputation: 2589

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

Upvotes: 1

Related Questions