Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Pie Chart example with D3.js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>
<style type="text/css">
.slice text {
font-size: 16pt;
font-family: Arial;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 300, //width
h = 300, //height
r = 100, //radius
color = d3.scale.category20c(); //builtin range of colors
data = [{"label":"one", "value":20},
{"label":"two", "value":50},
{"label":"three", "value":30}];
var vis = d3.select("body")
.append("svg:svg") //create the SVG element inside the <body>
.data([data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + r + "," + r + ")") //move the center of the pie chart from 0, 0 to radius, radius
var arc = d3.svg.arc() //this will create <path> elements for us using arc data
.outerRadius(r);
var pie = d3.layout.pie() //this will create arc data for us given a list of values
.value(function(d) { return d.value; }); //we must tell it out to access the value of each element in our data array
var arcs = vis.selectAll("g.slice") //this selects all <g> elements with class slice (there aren't any yet)
.data(pie) //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
.enter() //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
.append("svg:g") //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
.attr("class", "slice"); //allow us to style things in the slices (like text)
arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc); //this creates the actual SVG path using the associated data (pie) with the arc drawing function
arcs.append("svg:text") //add a label to each slice
.attr("transform", function(d) { //set the label's origin to the center of the arc
//we have to make sure to set these before calling arc.centroid
d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
})
.attr("text-anchor", "middle") //center the text on it's origin
.text(function(d, i) { return data[i].label; }); //get the label from our original data array
</script>
</body>
</html>
@makc

This comment has been minimized.

Copy link

commented Nov 16, 2012

tried running it on jsfiddle - dropping the link here for readers convenience :)

@lorem--ipsum

This comment has been minimized.

Copy link

commented Mar 27, 2013

Thanks makc !

@Jakobud

This comment has been minimized.

Copy link

commented Apr 8, 2013

How can you dynamically update the chart in this example? Updating charts is pretty straightforward if it's a basic dataset like [100,200,300], but in this case, since the dataset is more complex, I'm not sure how to update it.

@jrolfs

This comment has been minimized.

Copy link

commented Aug 1, 2013

@Jakobud you're gonna want to use a 'key' function: http://bost.ocks.org/mike/constancy/

@Gnocchii

This comment has been minimized.

Copy link

commented Oct 10, 2013

Hello, is there a way to put the label on multiple lines if it's quite long?

@kaanozcan

This comment has been minimized.

Copy link

commented Dec 16, 2013

what's that vis stands for?

@kellyp

This comment has been minimized.

Copy link

commented Jan 30, 2014

excellent, thanks!

@frostyfrog

This comment has been minimized.

Copy link

commented Feb 18, 2014

@kaanozcan vis stands for visual which is short for visualization

@Bloodyaugust

This comment has been minimized.

Copy link

commented Mar 5, 2014

Great stuff, thanks OP!

@frostyfrog funny to see you here.

@aemarse

This comment has been minimized.

Copy link

commented Mar 20, 2014

I modified this code a bit, and I'm getting an odd bug that maybe someone can help me out with?

I basically created a new "data" array that has 12 values (instead of the 3 that are in this example), and now the values are being switched around on the pie chart...0 becomes 6, 1 becomes 0, and 6 becomes 1.

Anybody got any ideas on why this would happen?

PS...when I make the array 10 or fewer elements, this value switching doesn't happen at all...

@dumbledad

This comment has been minimized.

Copy link

commented Apr 11, 2014

Should there be a semi-colon after .attr("transform", "translate(" + r + "," + r + ")")?

@Validyk

This comment has been minimized.

Copy link

commented Apr 24, 2014

how can i add more slices?

@MohamedAlaa

This comment has been minimized.

Copy link

commented May 14, 2014

and here is a fork to display the value in the slice: https://gist.github.com/MohamedAlaa/246b7d45e20be8680394

@scott-abrams

This comment has been minimized.

Copy link

commented Jul 1, 2014

Is there a way to customize the text that shows up in the label? color, font-size, etc?

@scott-abrams

This comment has been minimized.

Copy link

commented Jul 1, 2014

I was able to answer my own question. Some styles, like font-size you can adjust in the CSS. You can also add the border between the slices with CSS by using stroke (in Less for simplicity):

.slice {
path {
stroke:#fff;
stroke-width:0.5;
}
text {
font-size:0.9em;
}
}

But for the text color, you need to add another attribute called "fill" to the arcs as such:

.attr("fill", "white")

@stevematdavies

This comment has been minimized.

Copy link

commented Jul 30, 2014

"simple" example? I think not

@mslevin

This comment has been minimized.

Copy link

commented Aug 7, 2014

@stevematdavies The resulting pie chart is quite simple.

@nicolas-amabile

This comment has been minimized.

Copy link

commented Oct 21, 2014

How can I get the data from a Backbone model?

@bethrobson

This comment has been minimized.

Copy link

commented Aug 14, 2015

Question: why do you have to put [data] in the extra level of array when creating the outer svg element? The code doesn't work if you just pass data to the data() function:
.data(data) // fails
but
.data([data]) // works

I really don't understand this.

@ThalhaRashan

This comment has been minimized.

Copy link

commented Oct 15, 2018

How do i assign the code to a function so i can just call it on a different data set later

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.