Pie Charts

Pie charts using d3.js

by johndilworth

HTML

<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.5.0"></script>


      <div id="pie" style="">    </div>
    <script type="text/javascript">
function pieChart(piedata, width, height){
       
var data = piedata

var w = width,
    h = height,
    r = Math.min(w, h) / 2,
    color = d3.scale.category20c(),
    donut = d3.layout.pie().sort(null),
    arc = d3.svg.arc().innerRadius(r - 50).outerRadius(r - 0);

var svg = d3.select("#pie").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g")
    .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
        
     var arcs = svg.selectAll("path")
    .data(donut(data))
    .enter().append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

 }
        
        pieChart([27, 10,3,20]);

    </script>

CSS

#pie{
    margin:auto;
    background: transparent;
    width:200px;
    height: 200px;
    padding:10px;
    border: 1px solid #eee;
}