D3 - Circles - pack

by navinleon

HTML

<div id="viz"></div>

JavaScript

var dataset = {
	className: "root",
	children: [{
			name: "subtree-1",
			packageName: 'aa',
			value: 20
		},
		{
			name: "subtree-2",
			packageName: 'aa',
			value: 40
		},
		{
			name: "subtree-3",
			packageName: 'bb',
			value: 80
		},
		{
			name: "subtree-4",
			packageName: 'bb',
			children: [{
					name: "subtree-1",
					packageName: 'aa',
					value: 200
				}
			]
		}
	]
};

var r = 2000;
var pack = d3.layout.pack()
    .sort(null)
    .size([r, r]);


var container = d3.select("#viz").append("svg:svg")
    .attr("width", r)
    .attr("height", r)
    .attr("class", "container");

var node = container.selectAll("g.node")
    .data(pack.nodes(dataset))
    .enter().append("svg:g")
        .attr("class", "node")
        .attr("transform", function(d) {
            console.log(d);
            return "translate(" + d.x + "," + d.y + ")"; 
        });

node.append("svg:circle")
    .attr("r", function(d) { return d.value; })
    .style("fill", function(d) { return d.children ? 'blue' : 'orange'; })
    .style("fill-opacity", function(d) { return d.parent === dataset ? 0.5 : 0.1; });