cflavs/index.html

## index.html
<!doctype html>

<html>

<head>
	<title> D3 Tutorial </title>
	<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
	<script>

	var width = 800, height = 600;

	var canvas = d3.select("body").append("svg")
		.attr("width", width)
		.attr("height",height)
		.append("g")
			.attr("transform", "translate(50,50");
		var pack = d3.layout.pack()
			.size([width, height -50])
			.padding(10);

		d3.json("mydata.json", function(data){
			var nodes = pack.nodes(data);

			var node = canvas.selectAll(".node")
				.data(nodes)
				.enter()
				.append("g")
					.attr("class", "node")
					.attr("transform", function(d){
						return "translate("+ d.x + "," + d.y + ")";});
			node.append("circle")
				.attr("r", function (d) {return d.r;})
				.attr("fill", function(d){return d.children ? "#fff" : "steelblue"})
				.attr("opacity", 0.25)
				.attr("stroke", function(d){return d.children ? "#fff" : "#ADADAD"})
				.attr("stroke-width", "2");

			node.append("text")
				.text(function (d) { return d.children ? "" : d.name})
		});
	</script>
</body>
</html>

## mydata.json
{

	"name": "Linguagens",
	"value": 100,
	"children": [
	{"name": "C++", "value": 100},
	{"name": "Java", "value": 125},
	{"name": "C", "value": 50},
	{"name": "Python", "value": 78},
	{"name": "R", "value": 24},
	{"name": "JavaScript", "value": 210},
	{"name": "Pascal", "value": 140},
	{"name": "C#", "value": 90}
	]
}
	<!doctype html>

	<html>

	<head>
	<title> D3 Tutorial </title>
	<script src="//d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script>

	var width = 800, height = 600;

	var canvas = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height",height)
	.append("g")
	.attr("transform", "translate(50,50");
	var pack = d3.layout.pack()
	.size([width, height -50])
	.padding(10);

	d3.json("mydata.json", function(data){
	var nodes = pack.nodes(data);

	var node = canvas.selectAll(".node")
	.data(nodes)
	.enter()
	.append("g")
	.attr("class", "node")
	.attr("transform", function(d){
	return "translate("+ d.x + "," + d.y + ")";});
	node.append("circle")
	.attr("r", function (d) {return d.r;})
	.attr("fill", function(d){return d.children ? "#fff" : "steelblue"})
	.attr("opacity", 0.25)
	.attr("stroke", function(d){return d.children ? "#fff" : "#ADADAD"})
	.attr("stroke-width", "2");

	node.append("text")
	.text(function (d) { return d.children ? "" : d.name})
	});
	</script>
	</body>
	</html>
	{

	"name": "Linguagens",
	"value": 100,
	"children": [
	{"name": "C++", "value": 100},
	{"name": "Java", "value": 125},
	{"name": "C", "value": 50},
	{"name": "Python", "value": 78},
	{"name": "R", "value": 24},
	{"name": "JavaScript", "value": 210},
	{"name": "Pascal", "value": 140},
	{"name": "C#", "value": 90}
	]
	}