title: d3.js Bubble Force Chart application
body: <p><img src="https://i.stack.imgur.com/4OQOP.jpg" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/pPMqQ/146/" rel="nofollow noreferrer">http://jsfiddle.net/pPMqQ/146/</a></p>
  
  <p>I'm developing a bubble chart application that is a derivative of a force chart to provide a little bit of movement.</p>
  
  <p>Here is some of the code. As I create the svg - I also set up the viewBox - which I think could be used to adjust the size of the chart - but I've not been able to adjust the ratios properly to get the correct scaling.</p>
  
  <p>I've also added here the code that adds the nodes - as the node size is calculated - its using a scale variable to affect the size of the orbs. </p>
  
  <pre><code>                                 var svg = d3.select(selector)
                              .append("svg")
                                  .attr("class", "bubblechart")
                                  .attr("width", parseInt(w + margin.left + margin.right,10))
                                  .attr("height", parseInt(h + margin.top + margin.bottom,10))
                                  .attr('viewBox', "0 0 "+parseInt(w + margin.left + margin.right,10)+" "+parseInt(h + margin.top + margin.bottom,10))
                                  .attr('perserveAspectRatio', "xMinYMid")
                              .append("g")
                                  .attr("transform", "translate(0,0)");
  
                              methods.force = d3.layout.force()
                                .charge(1000)
                                .gravity(100)
                                .size([methods.width, methods.height])
  
  
                              var bubbleholder = svg.append("g")
                                      .attr("class", "bubbleholder")
  
  
                              var bubbles = bubbleholder.append("g")
                                      .attr("class", "bubbles")
  
                              var labelbubble = bubbleholder.append("g")
                                      .attr("class", "labelbubble")
  
  
  
  
  
  
                          // Enter
                          nodes.enter()
                              .append("circle")
                               .attr("class", "node")
                                .attr("cx", function (d) { return d.x; })
                                .attr("cy", function (d) { return d.y; })
                                .attr("r", 1)
                                .style("fill", function (d) { return methods.fill(d.label); })
                                .call(methods.force.drag);
  
                          // Update
                          nodes
                              .transition()
                              .delay(300)
                              .duration(1000)
                                .attr("r", function (d) { return d.radius*scale; })
  
                          // Exit
                          nodes.exit()
                              .transition()
                              .duration(250)
                              .attr("cx", function (d) { return d.x; })
                              .attr("cy", function (d) { return d.y; })
                              .attr("r", 1)
                              .remove();
  </code></pre>
  
  <p>I have the remaining issues</p>
  
  <ol>
  <li>scaling is an issue</li>
  </ol>
  
  <p>I've set the width/heights via data attributes - currently I have a scaling variable set to adjust the size of the orbs depending on the width of the chart. I would like to find a more scientific way of ensuring the chart is resized accordingly and also that the elements always remain central (don't become obscured).</p>
  
  <p><img src="https://i.stack.imgur.com/MSYuo.jpg" alt="enter image description here"></p>
  
  <ol start="2">
  <li>ensuring the smaller elements are on top of the big elements 
  I've also noticed that small objects may randomly fall underneath larger orbs, is there a way to organize the rendering of the orbs dependant on size, so bigger elements always sit at the bottom layer.
  <img src="https://i.stack.imgur.com/Zzqsj.jpg" alt="enter image description here"></li>
  </ol>