lucasmartins/igs_pie_chart

<script type="text/javascript">

  var width = <%=@width%>,height = <%=@height%>,
  outerRadius = Math.min(width, height) / 2,
  innerRadius = outerRadius * <%= @endomargin%>,
  data = <%=@data%>,
  color = d3.scale.category20(),
  donut = d3.layout.pie(),
  arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);

var vis = d3.select("<%=@target_element%>")
.append("svg")
  .data([data])
  .attr("width", width)
  .attr("height", height);

var arcs = vis.selectAll("g.arc")
  .data(donut)
.enter().append("g")
  .attr("class", "arc")
  /*.attr("onmouseover","evt.target.setAttribute('opacity', '0.5');")
  .attr("onmouseout","evt.target.setAttribute('opacity', '1');")*/
  .attr("onmouseover","evt.target.setAttribute('opacity', '0.5');")
  .attr("onmouseout","evt.target.setAttribute('opacity', '1');")
  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

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

arcs.append("text")
  .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
  .attr("dy", ".35em")
  .attr("class", "pie-chart-text-label")
  .attr("text-anchor", "middle")
  .attr("style", "stroke-opacity:0.0;fill:#FFFFFF;font-weight:600;")
  .attr("display", function(d) { return d.value > 20 ? null : "none"; })
  .text(function(d, i) { return d.value.toFixed(1); });
  
  </script>