Skip to content

Instantly share code, notes, and snippets.

@jekkilekki jekkilekki/_.md
Last active Jan 19, 2017

Embed
What would you like to do?
D3 Pie Chart
{"description":"D3 Pie Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/gZkoAjf.png"}
var width = 400,
height = 400,
radius = Math.min(width, height) / 2;
var piedata = [
{
type: 'Business',
quantity: 12
},
{
type: 'Personal Development',
quantity: 6
},
{
type: 'Biography',
quantity: 4
},
{
type: 'Psychology',
quantity: 3
},
{
type: 'Fiction',
quantity: 2
}
];
var pie = d3.layout.pie()
.value( function(d) {
return d.quantity;
});
var arc = d3.svg.arc()
.outerRadius( radius )
.innerRadius( radius - 100 );
var pieChart = d3.select( 'svg' ).append( 'svg' )
.style( 'background', '#3399cc' )
.attr( 'width', width )
.attr( 'height', height )
.append( 'g' )
.attr( 'transform', 'translate(' + width / 2 + ',' + height / 2 + ')' )
.selectAll( 'path' ).data( pie(piedata) )
.enter().append( 'g' )
.attr( 'class', 'slice' );
var slices = d3.selectAll( 'g.slice' )
.append( 'path' )
.attr( 'fill', function(d,i) { return 'rgba(0,0,0,' + 1/(++i) + ')'; })
.attr( 'stroke', 'white' )
.attr( 'stroke-width', '3px' )
.transition().delay(function(d,i) { return i*360; }).duration(360).ease('linear')
.attrTween('d', function(d) {
var i = d3.interpolate(d.startAngle, d.endAngle);
return function(t) {
d.endAngle = i(t);
return arc(d);
}
});
var labels = d3.selectAll( 'g.slice' )
.append( 'text' ).transition().delay(function(d,i) { return i*500; })
.text( function(d,i) {
console.log(d);
return d.data.type;
})
.attr( 'text-anchor', 'middle' )
.attr( 'fill', 'white' )
.attr( 'font-size', '16px' )
.attr( 'transform', function(d) {
d.innerRadius = 0;
d.outerRadius = radius;
return 'translate(' + arc.centroid(d) + ')'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.