d3.layout.pack

by Igor Cuckovic

HTML

<div id="canvas"></div>

JavaScript

/**
	 * D3 Init
	 */
	var w = 600,
		h = 500;

	var data = {
		name: "root",
		children: [{
			label: 'RAD',
			size: 100,
			color: '#c99700'
		}, {
			label: 'BIL',
			size: 85,
			color: '#008ce6'
		}, {
			label: 'EEN',
			size: 70,
			color: '#007377'
		}, {
			label: 'FB',
			size: 55,
			color: '#002d72'
		}, {
			label: 'DRYS',
			size: 40,
			color: '#7f5920'
		}, {
			label: 'SIRI',
			size: 25,
			color: '#890c58'
		}, {
			label: 'LMS',
			size: 10,
			color: '#00bdf2'
		}, {
			label: 'INO',
			size: 10,
			color: '#b4975a'
		}, ]
	};

	var canvas = d3.select("#canvas")
		.append("svg")
		.attr('width', w)
		.attr('height', h);

	var nodes = d3.layout.pack()
		.value(function (d) {
			return d.size;
		})
		.size([w, h])
        .padding(10)
		.nodes(data);
    
    console.log(nodes);    
	// Get rid of root node
	nodes.shift();

	canvas.selectAll('circle')
		.data(nodes)
		.enter()
		.append('circle')
		.attr('cx', function (d) {
			return d.x;
		})
		.attr('cy', function (d) {
			return d.y;
		})
		.attr('r', function (d) {
			return d.r;
		})
		.attr('fill', function (d) {
			return d.color;
		});

canvas.selectAll('text')
		.data(nodes)
		.enter()
		.append('text')
		.attr('x', function (d) {
			return d.x;
		})
		.attr('y', function (d) {
			return d.y;
		})
    .attr('text-anchor', "middle")
    .attr('dy', '0.35em')
    .text(function(d) { 
      return d.label;
    });