andrewberls/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3 Page Template</title>
    <style>
      * { margin: 0; padding: 0; }

      body { padding: 30px; }

      h3 {
        color: #404040;
        font: 1.6em sans-serif;
        margin-bottom: 10px;
      }

      #chart {
        background-color: white;
        font: 10px sans-serif;
        margin-bottom: 30px;
        width: 150px;
        height: 150px;
      }
        #chart .label{
          fill: #ccc;
          font-size: 16px;
          font-weight: bold;
          text-transform: uppercase;
        }
        #chart .total {
          font-size: 40px;
          font-weight: bold;
        }

        .segment-animals     { fill: #1f77b4; } /* blue */
        .segment-environment { fill: #ff7f0e; } /* orange */
        .segment-politics    { fill: #2ca02c; } /* green */

    </style>
  </head>

  <body>
    <div id="chart"></div>

    <h3>Dataset</h3>
    <pre>
  [
    { "type": "animals",     "value": 72 },
    { "type": "environment", "value": 85 },
    { "type": "politics",    "value": 36 }
  ];
    </pre>
  </body>

  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript">
    // This can easily be returned by a JSON endpoint
    var dataset = [
        { "type": "animals",     "value": 72 },
        { "type": "environment", "value": 85 },
        { "type": "politics",    "value": 36 }
      ];

    var w = 150,
        h = 150,
        ringThickness = 10,
        outerRadius   = w / 2,
        innerRadius   = outerRadius - ringThickness;

    // Sum values for displayed score
    var dataSum = 0;
    for (var i=0, len=dataset.length; i<len; i++) {
      dataSum += dataset[i].value;
    }

    // Function that takes in dataset and returns dataset annotated with arc angles, etc
    var pie = d3.layout.pie()
                .value(function(d) { return d.value; })

    // arc drawing function
    var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

    // Create svg element
    var svg = d3.select("#chart")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    // Set up groups
    var arcs = svg.selectAll("g.arc")
                 .data(pie(dataset))
                 .enter()
                 .append("g")
                 .attr("class", "arc")
                 .attr("transform", "translate("+ outerRadius + "," + outerRadius +")");

    // Draw arc paths
    // A path's path description is defined in the d attribute
    // so we call the arc generator, which generates the path information
    // based on the data already bound to this group
    arcs.append("path")
          .attr("class", function(d) { return "segment-" + d.data.type })
          .attr("d", arc);


    // Group for center text
    var centerGroup = svg.append("svg:g")
                        .attr("class", "center_group")
                        .attr("transform", "translate(" + (w/2) + "," + (h/2 + 12) + ")") // Eyeballed

    var totalValue = centerGroup.append("text")
                       .attr("class", "total")
                       .attr("dy", -10)
                       .attr("text-anchor", "middle")
                       .text(dataSum);

    var totalLabel = centerGroup.append("text")
                       .attr("class", "label")
                       .attr("dy", 15)
                       .attr("text-anchor", "middle")
                       .text("impact");
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>D3 Page Template</title>
	<style>
	* { margin: 0; padding: 0; }

	body { padding: 30px; }

	h3 {
	color: #404040;
	font: 1.6em sans-serif;
	margin-bottom: 10px;
	}

	#chart {
	background-color: white;
	font: 10px sans-serif;
	margin-bottom: 30px;
	width: 150px;
	height: 150px;
	}
	#chart .label{
	fill: #ccc;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	}
	#chart .total {
	font-size: 40px;
	font-weight: bold;
	}

	.segment-animals { fill: #1f77b4; } /* blue */
	.segment-environment { fill: #ff7f0e; } /* orange */
	.segment-politics { fill: #2ca02c; } /* green */

	</style>
	</head>

	<body>
	<div id="chart"></div>

	<h3>Dataset</h3>
	<pre>
	[
	{ "type": "animals", "value": 72 },
	{ "type": "environment", "value": 85 },
	{ "type": "politics", "value": 36 }
	];
	</pre>
	</body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
	// This can easily be returned by a JSON endpoint
	var dataset = [
	{ "type": "animals", "value": 72 },
	{ "type": "environment", "value": 85 },
	{ "type": "politics", "value": 36 }
	];

	var w = 150,
	h = 150,
	ringThickness = 10,
	outerRadius = w / 2,
	innerRadius = outerRadius - ringThickness;

	// Sum values for displayed score
	var dataSum = 0;
	for (var i=0, len=dataset.length; i<len; i++) {
	dataSum += dataset[i].value;
	}

	// Function that takes in dataset and returns dataset annotated with arc angles, etc
	var pie = d3.layout.pie()
	.value(function(d) { return d.value; })

	// arc drawing function
	var arc = d3.svg.arc()
	.innerRadius(innerRadius)
	.outerRadius(outerRadius);

	// Create svg element
	var svg = d3.select("#chart")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	// Set up groups
	var arcs = svg.selectAll("g.arc")
	.data(pie(dataset))
	.enter()
	.append("g")
	.attr("class", "arc")
	.attr("transform", "translate("+ outerRadius + "," + outerRadius +")");

	// Draw arc paths
	// A path's path description is defined in the d attribute
	// so we call the arc generator, which generates the path information
	// based on the data already bound to this group
	arcs.append("path")
	.attr("class", function(d) { return "segment-" + d.data.type })
	.attr("d", arc);


	// Group for center text
	var centerGroup = svg.append("svg:g")
	.attr("class", "center_group")
	.attr("transform", "translate(" + (w/2) + "," + (h/2 + 12) + ")") // Eyeballed

	var totalValue = centerGroup.append("text")
	.attr("class", "total")
	.attr("dy", -10)
	.attr("text-anchor", "middle")
	.text(dataSum);

	var totalLabel = centerGroup.append("text")
	.attr("class", "label")
	.attr("dy", 15)
	.attr("text-anchor", "middle")
	.text("impact");
	</script>
	</html>