title: D3js map marker collision detection
body: <p>Is there an example floating around of collision detection that avoids collision by manipulating radius rather than x,y coordinates? I'm aware of the examples Mike Bostock and others have put together, but I'm not using a force graph and my points are geographic and can't have their coordinates manipulated.</p>
  
  <p>My best-guess implementation would be to begin with circles of radius 0, iterate over them and increase their individual radii as long as they don't collide with another circle. I think this would make a fantastic visualization, but I'm not sure how to efficiently determine whether one circle collides with another.</p>
  
  <hr>
  
  <p>JSBin of my map with inline D3js (JavaScript tab is simply holding a 600kb GeoJSON dataset): <a href="http://jsbin.com/tapuhefamu/1/edit?html,output" rel="nofollow">http://jsbin.com/tapuhefamu/1/edit?html,output</a></p>
  
  <p>Notice how the markers overlap when zoomed, it doesn't seem like a big deal in the fiddle (just zoom in further, right?) but the map I'm working with has ~2,000 pins clustered in only a few counties which need to display an informative DIV when clicked. Some pins are almost completely obscured and aren't able to be interacted with because of the overlap.</p>