javascript - D3 bubble chart / pack layout - How to make bubbles radiate out from the largest bubbles to the smallest? -

javascript - D3 bubble chart / pack layout - How to make bubbles radiate out from the largest bubbles to the smallest? -

using same code d3 gallery illustration (with own data):

http://bl.ocks.org/mbostock/4063269

i'd bubble chart circles arranged biggest in center , radiating out smallest.

here mock created in photoshop:

here when utilize illustration (the default circle packing algorithm default sort):

i tried tweaking sort (including trying d3.ascending , d3.descending). best come subverts sort constant (ha!) still far i'd like:

//... .sort( function(a, b) { homecoming -1;} ) //...

ok, chance can done without having alter actual d3 pack layout algorithm? if not, perhaps has extended or modified pack layout , tell me 5 lines alter in d3 source hack this.

in advance!

edit:

as requested, here code using. same linked sample above, few superficial changes indicated commented lines:

var diameter = 960, format = d3.format(",d"), color = d3.scale.category20c(); var bubble = d3.layout.pack() // .sort(null) // .sort(d3.ascending) // .sort(d3.descending) .sort( function(a, b) { homecoming -1;} ) // < b .size([diameter, diameter]) .padding(1.5); var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter) .attr("class", "bubble"); d3.json("data.json", function(error, root) { var node = svg.selectall(".node") .data(bubble.nodes(classes(root)) .filter(function(d) { homecoming !d.children; })) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { homecoming "translate(" + d.x + "," + d.y + ")"; }); node.append("title") .text(function(d) { homecoming d.classname + ": " + format(d.value); }); node.append("circle") .attr("r", function(d) { homecoming d.r; }) .style("fill", function(d) { // homecoming color(d.packagename); homecoming color(d.value); // gives different color every leaf node }); node.append("text") .attr("dy", ".3em") .style("text-anchor", "middle") // .text(function(d) { homecoming d.classname.substring(0, d.r / 3); }); }); // returns flattened hierarchy containing leaf nodes under root. function classes(root) { var classes = []; function recurse(name, node) { if (node.children) node.children.foreach(function(child) { recurse(node.name, child); }); else classes.push({packagename: name, classname: node.name, value: node.size}); } recurse(null, root); homecoming {children: classes}; } d3.select(self.frameelement).style("height", diameter + "px");

and data.json file:

{ "name": "root", "children": [ { "name": "leaf", "children": null, "size": 2098629 }, { "name": "leaf", "children": null, "size": 104720 }, { "name": "leaf", "children": null, "size": 5430 }, { "name": "leaf", "children": null, "size": 102096 }, { "name": "leaf", "children": null, "size": 986974 }, { "name": "leaf", "children": null, "size": 59735 }, { "name": "leaf", "children": null, "size": 1902 }, { "name": "leaf", "children": null, "size": 120 }, { "name": "leaf", "children": null, "size": 870751 }, { "name": "leaf", "children": null, "size": 36672 }, { "name": "leaf", "children": null, "size": 274338 }, { "name": "leaf", "children": null, "size": 517693 }, { "name": "leaf", "children": null, "size": 145807 }, { "name": "leaf", "children": null, "size": 476178 }, { "name": "leaf", "children": null, "size": 11771 }, { "name": "leaf", "children": null, "size": 153 }, { "name": "leaf", "children": null, "size": 2138 }, { "name": "leaf", "children": null, "size": 8436 }, { "name": "leaf", "children": null, "size": 3572 }, { "name": "leaf", "children": null, "size": 120235 }, { "name": "leaf", "children": null, "size": 210945 }, { "name": "leaf", "children": null, "size": 56033 }, { "name": "leaf", "children": null, "size": 358704 }, { "name": "leaf", "children": null, "size": 295736 }, { "name": "leaf", "children": null, "size": 26087 }, { "name": "leaf", "children": null, "size": 33110 }, { "name": "leaf", "children": null, "size": 3828 }, { "name": "leaf", "children": null, "size": 1105544 }, { "name": "leaf", "children": null, "size": 98740 }, { "name": "leaf", "children": null, "size": 80723 }, { "name": "leaf", "children": null, "size": 5766 }, { "name": "leaf", "children": null, "size": 1453 }, { "name": "leaf", "children": null, "size": 10443176 }, { "name": "leaf", "children": null, "size": 14055 }, { "name": "leaf", "children": null, "size": 1890127 }, { "name": "leaf", "children": null, "size": 404575 }, { "name": "leaf", "children": null, "size": 272777 }, { "name": "leaf", "children": null, "size": 1269763 }, { "name": "leaf", "children": null, "size": 5081 }, { "name": "leaf", "children": null, "size": 3168510 }, { "name": "leaf", "children": null, "size": 717031 }, { "name": "leaf", "children": null, "size": 88418 }, { "name": "leaf", "children": null, "size": 762084 }, { "name": "leaf", "children": null, "size": 255055 }, { "name": "leaf", "children": null, "size": 535 }, { "name": "leaf", "children": null, "size": 81238 }, { "name": "leaf", "children": null, "size": 17075 }, { "name": "leaf", "children": null, "size": 5331 }, { "name": "leaf", "children": null, "size": 74834 }, { "name": "leaf", "children": null, "size": 110359 }, { "name": "leaf", "children": null, "size": 27333 }, { "name": "leaf", "children": null, "size": 143 }, { "name": "leaf", "children": null, "size": 12721 }, { "name": "leaf", "children": null, "size": 529 }, { "name": "leaf", "children": null, "size": 115684 }, { "name": "leaf", "children": null, "size": 3990850 }, { "name": "leaf", "children": null, "size": 6045060 }, { "name": "leaf", "children": null, "size": 2445766 }, { "name": "leaf", "children": null, "size": 479865 }, { "name": "leaf", "children": null, "size": 105743 }, { "name": "leaf", "children": null, "size": 183750 }, { "name": "leaf", "children": null, "size": 661 }, { "name": "leaf", "children": null, "size": 11181 } ], "size": 41103329 }

all need specify:

.sort(function(a, b) { homecoming -(a.value - b.value); })

this different specifying .sort(d3.ascending) or .sort(d3.descending), since d3.ascending , d3.descending defined as

function(a, b) { homecoming < b ? -1 : > b ? 1 : 0; }

and

function(a, b) { homecoming b < ? -1 : b > ? 1 : 0; }

respecitevly, , pack layout affected "insensitivity" difference of info points.

this test example: (with data) jsfiddle

experimentally, applied next sort function: (it kind of hybrid)

.sort( function(a, b) { var threshold = 10000000; if ((a.value > threshold) && (b.value > threshold)) { homecoming -(a.value - b.value); } else { homecoming -1; } })

... , values threshold of 10000000, 3000000, 1000000, 300000, 100000, 30000 respectively got: jsfiddle

javascript sorting svg d3.js circle-pack