mjhea0/d3_test.py Secret

## d3_test.py
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Testing D3</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet" media="screen">
    <style>
      .container {
        padding-top: 100px;
        width:400px;
      }
      .head {
        text-align: center;
      }
      h1 {
        font-size: 50px;
      }
      .slice text {
        font-size: 16pt;
        font-family: Arial, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="container">
    <script type="text/javascript">

    //** width, height, radius, colors */
    var w = 500,
    h = 400,
    r = 200,
    color = d3.scale.category20c();

    //** data */
    data = [{"label":"yes", "value":15},
            {"label":"no", "value":28},
            {"label":"maybe", "value":55}];

    //** append to container */
    var vis = d3.select(".container")
        .append("svg:svg")
        .data([data])
            .attr("width", w)
            .attr("height", h)
        .append("svg:g")
            .attr("transform", "translate(" + r + "," + r + ")")

    var arc = d3.svg.arc()
        .outerRadius(r);

    var pie = d3.layout.pie()
        .value(function(d) { return d.value; });
    var arcs = vis.selectAll("g.slice")
        .data(pie)
        .enter()
            .append("svg:g")
                .attr("class", "slice");

        arcs.append("svg:path")
                .attr("fill", function(d, i) { return color(i); } )
                .attr("d", arc);

        arcs.append("svg:text")
                .attr("transform", function(d) {
                d.innerRadius = 0;
                d.outerRadius = r;
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d, i) { return data[i].label + " - " + data[i].value + "%"; });
    </script>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Testing D3</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css" rel="stylesheet" media="screen">
	<style>
	.container {
	padding-top: 100px;
	width:400px;
	}
	.head {
	text-align: center;
	}
	h1 {
	font-size: 50px;
	}
	.slice text {
	font-size: 16pt;
	font-family: Arial, Helvetica, sans-serif;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<script type="text/javascript">

	//** width, height, radius, colors */
	var w = 500,
	h = 400,
	r = 200,
	color = d3.scale.category20c();

	//** data */
	data = [{"label":"yes", "value":15},
	{"label":"no", "value":28},
	{"label":"maybe", "value":55}];

	//** append to container */
	var vis = d3.select(".container")
	.append("svg:svg")
	.data([data])
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	.attr("transform", "translate(" + r + "," + r + ")")

	var arc = d3.svg.arc()
	.outerRadius(r);

	var pie = d3.layout.pie()
	.value(function(d) { return d.value; });
	var arcs = vis.selectAll("g.slice")
	.data(pie)
	.enter()
	.append("svg:g")
	.attr("class", "slice");

	arcs.append("svg:path")
	.attr("fill", function(d, i) { return color(i); } )
	.attr("d", arc);

	arcs.append("svg:text")
	.attr("transform", function(d) {
	d.innerRadius = 0;
	d.outerRadius = r;
	return "translate(" + arc.centroid(d) + ")";
	})
	.attr("text-anchor", "middle")
	.text(function(d, i) { return data[i].label + " - " + data[i].value + "%"; });
	</script>
	</div>
	</body>
	</html>