title: D3 Force Layout where larger nodes cluster in center
body: <p>I've been tinkering with a force layout that will be used for a tag cloud and each tag is represented by a <code>&lt;circle&gt;</code> whose radius is proportional to the questions with that tag. My question is to determine how to make more popular tags trend toward the center of the cluster and less popular tags congregate around the edges of the tag cloud. So far my code looks like this:</p>
  
  <pre><code>function(err, results) {
    var nodes = results.tags;
    var width = 1020;
    var height = 800;
    var extent = d3.extent(nodes, function(tag) { return tag.questions.length; });
    var min = extent[0] || 1;
    var max = extent[1];
    var padding = 2;
  
    var radius = d3.scale.linear()
      .clamp(true)
      .domain(extent)
      .range([15, max * 5 / min]);
  
    // attempted to make gravity proportional?
    var gravity = d3.scale.pow().exponent(5)
      .domain(extent)
      .range([0, 200]);
  
    var minRadius = radius.range()[0];
    var maxRadius = radius.range()[1];
  
    var svg = d3.select('#question_force_layout').append('svg')
      .attr('width', width)
      .attr('height', height);
  
    var node = svg.selectAll('circle')
        .data(nodes)
      .enter().append('circle')
        .attr('class', 'tag')
        .attr('r', function(tag) { return (tag.radius = radius(tag.questions.length)); });
  
    var tagForce = d3.layout.force()
      .nodes(results.tags)
      .size([width, height])
      .charge(200) // seemed like an okay effect
      .gravity(function(tag) {
        return gravity(tag.questions.length);
      })
      .on('tick', tagTick)
      .start();
  
    function tagTick(e) {
      node
        .each(collide(.5))
        .attr('cx', function(d) { return d.x; })
        .attr('cy', function(d) { return d.y; });
    }
  
    function collide(alpha) {
      var quadtree = d3.geom.quadtree(nodes);
  
      return function(d) {
        var r = d.radius + maxRadius + padding;
        var nx1 = d.x - r;
        var nx2 = d.x + r;
        var ny1 = d.y - r;
        var ny2 = d.y + r;
  
        quadtree.visit(function(quad, x1, y1, x2, y2) {
          if (quad.point &amp;&amp; (quad.point !== d)) {
            var x = d.x - quad.point.x;
            var y = d.y - quad.point.y;
            var l = Math.sqrt(x * x + y * y);
            var r = d.radius + quad.point.radius + padding;
  
            if (l &lt; r) {
              l = (l - r) / l * alpha;
              d.x -= x *= l;
              d.y -= y *= l;
              quad.point.x += x;
              quad.point.y += y;
            }
          }
  
          return x1 &gt; nx2 || x2 &lt; nx1 || y1 &gt; ny2 || y2 &lt; ny1;
        });
      };
    }
  }
  </code></pre>
  
  <p>To give you an idea of the amount of data being dealt with, there are 52 questions and 42 tags currently. Also the output usually ends up something like this:</p>
  
  <p><img src="https://puu.sh/jRFCw/ebe0a3705e.png"/></p>
  
  <p>I'd like the larger nodes to end up in the center.</p>