Non-overlapping bubbles instead of countries + GRAVITY

OK, so you can easily create a bubble map with amCharts, where bubble is placed in the middle of a country area and the size of a bubble depends on some value in your data. That is nice, however what if I want to have those fancy maps which you can find in National Geographic or some other magazine, where the whole map is created of such bubbles and they don’t overlap, giving a much more clear and beautiful picture? Can we do that? Yes!

To solve bubble overlapping, we need collision detection. And not only to detect collision, but to move bubbles apart so that they would not overlap. It’s not as trivial task as it might seem – if you try it yourself, most likely you will end up with endless loops which will eat all the CPU of your computer. Luckily, we have ready to go solutions – physics libraries. Preventing objects from overlapping is bread and butter for physic engines. Plus, they would allow adding more fancy animations and effects to our maps, not just solve overlapping.

So we picked the first phys engine which came to our mind – box2d, one of the JavaScript ports – box2dweb and started coding. And here is the result.

See the Pen Bubbles instead of countries + Gravity by amCharts (@amcharts) on CodePen.

Without bubble data, it’s just 300 lines of JavaScript! What we did is created a box2d world and added the same size bubbles to it. Created static sensors at the middle of each country and attached bubbles to those sensors. The box2d world follos physics rules and we simply observe positions of bubbles and adjust bubbles on map – that’s it. When you press “Release bubbles” button, we simply destroy joints and restore them when “Attach bubbles” button is clicked. Imagine endless possibilities of this combination!