mtandre/index.html

## index.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>doughnut chart</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://d3js.org/d3.v4.min.js"></script>
        <style type="text/css">
            text { text-anchor:middle; font-family:monospace; font-size:11px; }
        </style>
    </head>
    <body>
      <svg></svg>
      <script type="text/javascript">

        var w = 400,
            h = 400;
        var dataset = [ {gb: 3.4,  label: 'docs'},
                        {gb: 2.9,  label: 'code'},
                        {gb: 8.9,  label: 'apps'},
                        {gb: 16.1, label: 'music'},
                        {gb: 37.2, label: 'system'},
                        {gb: 50.7, label: 'photos'} ];
        var outerR = w / 2,
            innerR = w / 4;

        var color = d3.scaleOrdinal(d3.schemeCategory20);
        var pie = d3.pie()
                    .value(function(d){return d.gb;})
                    .startAngle(180);
        var arc = d3.arc()
                    .innerRadius(innerR)
                    .outerRadius(outerR);

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

        var arcs = svg.selectAll('g.arc')
                      .data(pie(dataset))
                      .enter()
                      .append('g')
                      .attr('class', 'arc')
                      .attr('transform', 'translate(' + outerR + ', ' + outerR + ')');

        arcs.append('path')
            .attr('fill', function(d, i){
                return color(i);
            })
            .attr('d', arc)
            .append('title')
            .text(function(d){
                return d.value + '%';
            });

        arcs.append('text')
            .attr('transform', function(d){
                return 'translate(' + arc.centroid(d) + ')';
            })
            .text(function(d){
                return d.data.label;
            })
            .attr('fill', '#fff');

        svg.append('text')
            .attr('x', w / 2)
            .attr('y', h / 2 - 6)
            .text('my computer');
        svg.append('text')
            .attr('x', w / 2)
            .attr('y', h / 2 + 6)
            .text('contents');

        </script>
    </body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>doughnut chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style type="text/css">
	text { text-anchor:middle; font-family:monospace; font-size:11px; }
	</style>
	</head>
	<body>
	<svg></svg>
	<script type="text/javascript">

	var w = 400,
	h = 400;
	var dataset = [ {gb: 3.4, label: 'docs'},
	{gb: 2.9, label: 'code'},
	{gb: 8.9, label: 'apps'},
	{gb: 16.1, label: 'music'},
	{gb: 37.2, label: 'system'},
	{gb: 50.7, label: 'photos'} ];
	var outerR = w / 2,
	innerR = w / 4;

	var color = d3.scaleOrdinal(d3.schemeCategory20);
	var pie = d3.pie()
	.value(function(d){return d.gb;})
	.startAngle(180);
	var arc = d3.arc()
	.innerRadius(innerR)
	.outerRadius(outerR);

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

	var arcs = svg.selectAll('g.arc')
	.data(pie(dataset))
	.enter()
	.append('g')
	.attr('class', 'arc')
	.attr('transform', 'translate(' + outerR + ', ' + outerR + ')');

	arcs.append('path')
	.attr('fill', function(d, i){
	return color(i);
	})
	.attr('d', arc)
	.append('title')
	.text(function(d){
	return d.value + '%';
	});

	arcs.append('text')
	.attr('transform', function(d){
	return 'translate(' + arc.centroid(d) + ')';
	})
	.text(function(d){
	return d.data.label;
	})
	.attr('fill', '#fff');

	svg.append('text')
	.attr('x', w / 2)
	.attr('y', h / 2 - 6)
	.text('my computer');
	svg.append('text')
	.attr('x', w / 2)
	.attr('y', h / 2 + 6)
	.text('contents');

	</script>
	</body>
	</html>