title: avoid d3.js circles overlapping
body: <p>You can see in this bl.ock <a href="http://bl.ocks.org/3012590" rel="noreferrer">http://bl.ocks.org/3012590</a> that there are many points geo-referenced in Paris, with the big circle over the little ones:</p>
  
  <p><img src="https://i.stack.imgur.com/XMxfQ.gif" alt="enter image description here"></p>
  
  <p>I would like to get something similar to <a href="http://vallandingham.me/vis/gates/" rel="noreferrer">http://vallandingham.me/vis/gates/</a> , so that circles get closely appended by its border.</p>
  
  <p><img src="https://i.stack.imgur.com/3qlT1.gif" alt="enter image description here"></p>
  
  <p>Sorry, I could not find the answer in this code, i am missing something I think.</p>
  
  <p>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)?</p>