d3.js Bubble Force Chart application

Question

http://jsfiddle.net/pPMqQ/146/

I'm developing a bubble chart application that is a derivative of a force chart to provide a little bit of movement.

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.

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.

                                 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();

I have the remaining issues

1. scaling is an issue

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).

2. 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.

Answer 1

I've solved the second problem by sorting the data via value.

http://jsfiddle.net/pPMqQ/149/

data = data.sort(function(a, b) {return b.value - a.value})

Currently I have a scale variable depending on the width of the chart - var scale = methods.width*.005;

but its not very scientific per say

If the chart is 150 width http://jsfiddle.net/pPMqQ/150/

the chart renders - but the bubbles no longer fit in the space.

the chart at 250 px http://jsfiddle.net/pPMqQ/151/