<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
text{
font-family:sans-serif;
}
var width = 500,
height = 500,
radius = Math.min(width, height) / 2;
var arc = d3.svg.arc()
.outerRadius(radius - 100)
.innerRadius(0);
var labelArc = d3.svg.arc()
.outerRadius( 220)
.innerRadius( 0);
var color = d3.scale.ordinal()
.range(["#ff3300","#ff9933", "#ffcc00","#ff8800", "#99ff33", "#009900"]);
var data = [
{name:"Category 1",value:300+Math.random()*300},
{name:"Category 2",value:300+Math.random()*300},
{name:"Category 3",value:300+Math.random()*300},
{name:"Category 4",value:300+Math.random()*300},
{name:"Category 5",value:300+Math.random()*300},
{name:"Category 6",value:300+Math.random()*300}
];
var pie = d3.layout.pie()
.value(function(d) { return d.value; });
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g =svg.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc")
;
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.value); });
var total = d3.sum(data, function(d) {
return d.value;
});
g.append("text")
.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
.attr("dy", ".35em")
.attr("fill", "#ffffff")
.text(function(d) { return Math.round(100*d.data.value/total)+"%"; });
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.