climyao/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>d3.js pie!</title>

  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type='text/javascript' src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>

  <style type='text/css'>
  </style>

</head>
<body>
  <div id="counts">
  </div>


  <script>
    var w = 200;
    var h = 200;
    var r = Math.min(w, h) / 2;
    var color = d3.scale.category20();
    var arc = d3.svg.arc().innerRadius(r - 50).outerRadius(r - 10);
    var dataset = {"values":[113, 245, 77], "types": ["hirings", "changes", "terminations"]};
    var pie = d3.layout.pie();

    var svg = d3.select("#counts")
      .append("svg:svg")
        .attr("width", w * 2)
        .attr("height", h * 2)
        .append("svg:g")
        .attr("transform", "translate(" + w /* / 2*/ + "," + h /* / 2 */ + ")");

    var arcs = svg.selectAll("path")
      .data(pie(dataset.values, dataset.types))
      .enter()
      .append("svg:path")
        .attr("id", function(d,i) { return dataset.types[i];})
        .attr("fill", function(d,i) { return color(i); })
        .attr("d", arc)
        .on("mouseover", function(d, i) {
          d3.select("#what").text(d.value + " " + dataset.types[i]);
          var current_i = i;
          arcs.each(function(d, i) {
            if (current_i != i) {
              d3.select(this).attr("fill-opacity", 0.2);
            }
          });
          // d3.select(this)
            // .style("stroke", "#333")
            // .style("stroke-width", "5px");
            // .transition()
            // .attr("transform", function(d) { return "translate(" + arc.centroid(d).map(function(e){ return e/20;}) + ")"; });
        })
        .on("mouseout", function(d, i) {
          d3.select("#what").text("435 total");
          var current_i = i;
          arcs.each(function(d, i) {
            if (current_i != i) {
              d3.select(this).attr("fill-opacity", 1);
            }
          });
          // d3.select(this).style("stroke", "none");
          // d3.select(this)
          //   .transition()
          //   .attr("transform", function(d) { return "translate(" + 0 + ")"; })
        });

    svg.append("svg:text")
      .attr("id", "what")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .attr("font-family", "sans-serif")
      .attr("font-size", "12px")
      .text("435 total");
  </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>d3.js pie!</title>

	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
	<script type='text/javascript' src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>

	<style type='text/css'>
	</style>

	</head>
	<body>
	<div id="counts">
	</div>


	<script>
	var w = 200;
	var h = 200;
	var r = Math.min(w, h) / 2;
	var color = d3.scale.category20();
	var arc = d3.svg.arc().innerRadius(r - 50).outerRadius(r - 10);
	var dataset = {"values":[113, 245, 77], "types": ["hirings", "changes", "terminations"]};
	var pie = d3.layout.pie();

	var svg = d3.select("#counts")
	.append("svg:svg")
	.attr("width", w * 2)
	.attr("height", h * 2)
	.append("svg:g")
	.attr("transform", "translate(" + w /* / 2/ + "," + h / / 2 */ + ")");

	var arcs = svg.selectAll("path")
	.data(pie(dataset.values, dataset.types))
	.enter()
	.append("svg:path")
	.attr("id", function(d,i) { return dataset.types[i];})
	.attr("fill", function(d,i) { return color(i); })
	.attr("d", arc)
	.on("mouseover", function(d, i) {
	d3.select("#what").text(d.value + " " + dataset.types[i]);
	var current_i = i;
	arcs.each(function(d, i) {
	if (current_i != i) {
	d3.select(this).attr("fill-opacity", 0.2);
	}
	});
	// d3.select(this)
	// .style("stroke", "#333")
	// .style("stroke-width", "5px");
	// .transition()
	// .attr("transform", function(d) { return "translate(" + arc.centroid(d).map(function(e){ return e/20;}) + ")"; });
	})
	.on("mouseout", function(d, i) {
	d3.select("#what").text("435 total");
	var current_i = i;
	arcs.each(function(d, i) {
	if (current_i != i) {
	d3.select(this).attr("fill-opacity", 1);
	}
	});
	// d3.select(this).style("stroke", "none");
	// d3.select(this)
	// .transition()
	// .attr("transform", function(d) { return "translate(" + 0 + ")"; })
	});

	svg.append("svg:text")
	.attr("id", "what")
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.attr("font-family", "sans-serif")
	.attr("font-size", "12px")
	.text("435 total");
	</script>

	</body>
	</html>