liamness/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript">
    // joint writing credits is worth half

    var data = [
        {name: 'john', amount: 81},
        {name: 'paul', amount: 79},
        {name: 'george', amount: 22},
        {name: 'ringo', amount: 2}
    ];

    var width = 460,
        height = 300,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category20();

    var pie = d3.layout.pie()
        .sort(function(a, b) { return d3.ascending(a.name, b.name); })
        .value(function(d) {return d.amount;});

    var arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 50);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var path = svg.selectAll("path")
        .data(pie(data))
        .enter()
        .append("path")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc);
    </script>
</body>

</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>

	<body>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
	// joint writing credits is worth half

	var data = [
	{name: 'john', amount: 81},
	{name: 'paul', amount: 79},
	{name: 'george', amount: 22},
	{name: 'ringo', amount: 2}
	];

	var width = 460,
	height = 300,
	radius = Math.min(width, height) / 2;

	var color = d3.scale.category20();

	var pie = d3.layout.pie()
	.sort(function(a, b) { return d3.ascending(a.name, b.name); })
	.value(function(d) {return d.amount;});

	var arc = d3.svg.arc()
	.innerRadius(radius - 100)
	.outerRadius(radius - 50);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	var path = svg.selectAll("path")
	.data(pie(data))
	.enter()
	.append("path")
	.attr("fill", function(d, i) { return color(i); })
	.attr("d", arc);
	</script>
	</body>

	</html>