Satheesh Panduga

Pie Demo - d3

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>

CSS

.slice path {
    stroke: #fff;
    stroke-width: 1px;
}

.textTop {
    font-family: 'Segoe UI';
    font-size: 12pt;
    fill: #bbb;
}

.textBottom {
    fill: #444;
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 18pt;
}

.top {
    border: 1px solid #bbb;
    color: #777;
    font-family: 'Segoe UI';
    padding: 5px;
    text-decoration: none;
}

.top:hover {
    border: 1px solid #555;
    color: #333;
}

JavaScript

var w = 400,
    h = 400,
    r = 180,
    inner = 70,
    color = d3.scale.category20c();

data = [{"label":"Audi", "value":22}, 
        {"label":"Benz", "value":12}, 
        {"label":"Volvo", "value":16},
        {"label":"BMW", "value":6},
        {"label":"Rolce Royce", "value":12},
        {"label":"Tesla", "value":8}];

var total = d3.sum(data, function(d) {
    return d3.sum(d3.values(d));
});

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

var textTop = vis.append("text")
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .attr("class", "textTop")
    .text( "TOTAL" )
    .attr("y", -10),
textBottom = vis.append("text")
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .attr("class", "textBottom")
    .text(total.toFixed(2) + "m")
    .attr("y", 10);

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

var arcOver = d3.svg.arc()
    .innerRadius(0)
    .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);

var legend = d3.select("#chart").append("svg")
    .attr("class", "legend")
    .attr("width", r)
    .attr("height", r * 2)
    .selectAll("g")
    .data(color.domain().slice().reverse())
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", color);

legend.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .text(function(d) { 
    	return data[d].label; 
    });