title: D3.js bubble cloud circles overlap in force layout even with negative charge and collision detection
body: <p>I'm working mainly from Jim Vallandingham's Bubble Chart example and I have all the data linked to the circles and the force layout running normally when I first refresh the page. I want the bubbles to be able to split and group together similar to the code running <a href="http://vallandingham.me/bubble_chart/" rel="nofollow noreferrer">here</a> but after I click on the buttons to move the bubbles they all just overlap on each other. You can see the <a href="https://jsfiddle.net/30e1dga6/" rel="nofollow noreferrer">live version</a> of what I have on JSFiddle. In Vallandingham's he writes that the main collision/bubbles not overlapping effect comes from the charge function:</p>
  
  <pre><code>function charge(d) {
    return -Math.pow(d.radius/2, 2.0) / 8;
  }
  </code></pre>
  
  <p>I used that in my code but for some reason it's not working the same way and I can't figure out why. I have also tried manual collision detection in different ways but I haven't been able to get it to work. Thanks in advance!</p>