created by livecoding - http://livecoding.gabrielflor.it

water.css

circle {
  fill: rgb(31, 119, 180);
  fill-opacity: .25;
  stroke: rgb(31, 119, 180);
  stroke-width: 1px;
}

.leaf circle {
  fill: #ff7f0e;
  fill-opacity: 1;
}

text {
  font: 10px sans-serif;
}

water.js

var w = 600,
	h = 600,
	format = d3.format(",d");

var pack = d3.layout.pack()
	.size([w - 4, h - 4])
	.value(function(d) { return d.size; });
		


var vis = d3.select("#chart").append("svg:svg")
	.attr("width", w)
    .attr("height", h)
	.attr("class", "pack")
	.append("svg:g")
	.attr("transform", "translate(2, 2)");

d3.json("data.json", function(json) {	
    
    var node = vis.data([json]).selectAll("g.node")
		.data(pack.nodes)
		.enter().append("svg:g")
		.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
		.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
			
		node.append("svg:circle")
			.attr("r", function(d) { return d.r; });
		
		node.filter(function(d) { return !d.children; }).append("svg:text")
			.attr("text-anchor", "middle")
			.attr("dy", ".3em")
			.text(function(d) { return d.name.substring(0, d.r / 3); });
			
	var dimensions = ["size", "size2"];

	var index = 0; 
	
	setInterval(function() {
	
    	var dimension = dimensions[index++]; 
    	if (index >= dimensions.length) index = 0; 
    	// update the layout's value function 
    	pack.value(function(d) { return d[dimension]; });
    	
    	node.data([json]).selectAll("g.node")
			.data(pack.nodes)
			.transition()
			.duration(1000)
			.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
			.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
			
		node.selectAll("circle")
			.transition()
			.duration(1000)
			.attr("r", function(d) { return d.r; });

  }, 1000); 


});

water.json

{
	"name": "EDF",
	"children":
	[
		{
			"name": "Stratégie et développement",
			"children":
			[
				{"name": "Univers concurrentiel", "size": 764, "size2": 1000},
				{"name": "Développement économique", "size": 283, "size2": 298},
				{"name": "Développement économique", "size": 1484, "size2": 1432},
				{"name": "Difficultés économiques", "size": 647, "size2": 654},
				{"name": "Innovation, R&D", "size": 321, "size2": 320},
				{"name": "Santé financière", "size": 3282, "size2": 3260},
				{"name": "Image boursière", "size": 988, "size2": 900}
			]
		},
		{
			"name": "Nucléaire",
			"children":
			[
				{"name": "Sûreté", "size": 2764, "size2": 3000},
				{"name": "Critiques", "size": 2764, "size2": 2890}
			]
		},
		{
			"name": "Actions pour l'environnement",
			"children":
			[
				{"name": "Préserver l'envirionnement", "size": 2284, "size2": 2100},
				{"name": "Energie renouvelables", "size": 600, "size2": 788}
			]
		},
		{
			"name": "Mission de Service public",
			"children":
			[
				{"name": "Mission de service public", "size": 6374, "size2": 6300}
			]
		},
		{
			"name": "Les métiers d'EDF",
			"children":
			[
				{"name": "qualité du service", "size": 645, "size2": 900}
			]
		},
		{
			"name": "Relation client",
			"children":
			[
				{"name": "Prix", "size": 645, "size2": 800},
				{"name": "Incident facturation", "size": 3200, "size2": 3234},
				{"name": "Qualité de la relation client", "size": 4321, "size2": 4322},
				{"name": "Optimiser la consommation", "size": 645, "size2": 780}
			]
		},
		{
			"name": "Comminucation",
			"children":
			[
				{"name": "Sponsoring / Mécénat", "size": 345, "size2": 345}
			]
		},
		{
			"name": "Climat social",
			"children":
			[
				{"name": "Institutions sociales", "size": 2284, "size2": 2345},
				{"name": "Climat social", "size": 600, "size2": 800}
			]
		}
	]
}
August 22, 2011