avoid d3.js circles overlapping

Question

You can see in this bl.ock http://bl.ocks.org/3012590 that there are many points geo-referenced in Paris, with the big circle over the little ones:

I would like to get something similar to http://vallandingham.me/vis/gates/ , so that circles get closely appended by its border.

Sorry, I could not find the answer in this code, i am missing something I think.

Is there an easy fix to get that? tried different negative charge forces, causing problems if circle size changes (if all circles in Paris become little, then they become too far away each other)?

Solution

If your goal is to prevent overlap, then detecting collisions is a more direct way of satisfying that constraint. This will produce a more precise result than repulsive charge forces. Here’s another example:

• http://bl.ocks.org/1748247

You don't need a force layout to accomplish this, though the two are often used together. You can iterate over the nodes a fixed number of times to resolve any collisions on initialization.