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 canvas = d3.select("body").append("svg")
			.attr("width", 500)
			.attr("height", 500)
			.append("g")
				.attr("transform", "translate(50,50)");


		var tree = d3.layout.tree()
			.size([400,400]);

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


			var node = canvas.selectAll(".node")
				.data(nodes)
				.enter()
				.append("g")
					.attr("class", "node")
					.attr("transform", function(d){return "translate(" + d.y + "," + d.x + ")";})

			node.append("circle")
				.attr("r", 5)
				.attr("fill", "steelblue");
			node.append("text")
				.text(function(d) {return d.name;})

			var diagonal = d3.svg.diagonal()
				.projection(function(d){return [d.y, d.x];});
			canvas.selectAll(".link")
				.data(links)
				.enter()
				.append("path")
				.attr("class", "link")
				.attr("fill", "none")
				.attr("stroke", "#ADADAD")
				.attr("d", diagonal);
		})
	</script>
</body>
</html>

## mydata.json
{

	"name": "Max",
	"children": [
	{
		"name": "Sylvia",
		"children": [
			{"name": "Craig"},
			{"name": "Robin"},
			{"name": "Anna"}
		]
	},
	{
		"name": "David",
		"children":[
			{"name": "Jeff", "size":3534},
			{"name": "Buffy", "size": 5731}
		]
	}
	]
}
	<!doctype html>

	<html>

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

	<body>
	<script>
	var canvas = d3.select("body").append("svg")
	.attr("width", 500)
	.attr("height", 500)
	.append("g")
	.attr("transform", "translate(50,50)");


	var tree = d3.layout.tree()
	.size([400,400]);

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


	var node = canvas.selectAll(".node")
	.data(nodes)
	.enter()
	.append("g")
	.attr("class", "node")
	.attr("transform", function(d){return "translate(" + d.y + "," + d.x + ")";})

	node.append("circle")
	.attr("r", 5)
	.attr("fill", "steelblue");
	node.append("text")
	.text(function(d) {return d.name;})

	var diagonal = d3.svg.diagonal()
	.projection(function(d){return [d.y, d.x];});
	canvas.selectAll(".link")
	.data(links)
	.enter()
	.append("path")
	.attr("class", "link")
	.attr("fill", "none")
	.attr("stroke", "#ADADAD")
	.attr("d", diagonal);
	})
	</script>
	</body>
	</html>
	{

	"name": "Max",
	"children": [
	{
	"name": "Sylvia",
	"children": [
	{"name": "Craig"},
	{"name": "Robin"},
	{"name": "Anna"}
	]
	},
	{
	"name": "David",
	"children":[
	{"name": "Jeff", "size":3534},
	{"name": "Buffy", "size": 5731}
	]
	}
	]
	}