Simple D3 Pie Chart with Magnitudes in Arcs and Legends Outside and Along Arcs
<!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.4.5"></script> | |
<!-- Source for example located at: http://bl.ocks.org/1203641 --> | |
<style type="text/css"> | |
.slice text { | |
font-size: 16pt; | |
font-family: Arial; | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var canvasWidth = 300, //width | |
canvasHeight = 300, //height | |
outerRadius = 100, //radius | |
color = d3.scale.category20(); //builtin range of colors | |
var dataSet = [ | |
{"legendLabel":"One", "magnitude":20}, | |
{"legendLabel":"Two", "magnitude":40}, | |
{"legendLabel":"Three", "magnitude":50}, | |
{"legendLabel":"Four", "magnitude":16}, | |
{"legendLabel":"Five", "magnitude":50}, | |
{"legendLabel":"Six", "magnitude":8}, | |
{"legendLabel":"Seven", "magnitude":30}]; | |
var vis = d3.select("body") | |
.append("svg:svg") //create the SVG element inside the <body> | |
.data([dataSet]) //associate our data with the document | |
.attr("width", canvasWidth) //set the width of the canvas | |
.attr("height", canvasHeight) //set the height of the canvas | |
.append("svg:g") //make a group to hold our pie chart | |
.attr("transform", "translate(" + 1.5*outerRadius + "," + 1.5*outerRadius + ")") // relocate center of pie to 'outerRadius,outerRadius' | |
// This will create <path> elements for us using arc data... | |
var arc = d3.svg.arc() | |
.outerRadius(outerRadius); | |
var pie = d3.layout.pie() //this will create arc data for us given a list of values | |
.value(function(d) { return d.magnitude; }) // Binding each value to the pie | |
.sort( function(d) { return null; } ); | |
// Select all <g> elements with class slice (there aren't any yet) | |
var arcs = vis.selectAll("g.slice") | |
// Associate the generated pie data (an array of arcs, each having startAngle, | |
// endAngle and value properties) | |
.data(pie) | |
// 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 | |
.enter() | |
// Create a group to hold each slice (we will have a <path> and a <text> | |
// element associated with each slice) | |
.append("svg:g") | |
.attr("class", "slice"); //allow us to style things in the slices (like text) | |
arcs.append("svg:path") | |
//set the color for each slice to be chosen from the color function defined above | |
.attr("fill", function(d, i) { return color(i); } ) | |
//this creates the actual SVG path using the associated data (pie) with the arc drawing function | |
.attr("d", arc); | |
// Add a legendLabel to each arc slice... | |
arcs.append("svg:text") | |
.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.outerRadius = outerRadius + 50; // Set Outer Coordinate | |
d.innerRadius = outerRadius + 45; // Set Inner Coordinate | |
return "translate(" + arc.centroid(d) + ")"; | |
}) | |
.attr("text-anchor", "middle") //center the text on it's origin | |
.style("fill", "Purple") | |
.style("font", "bold 12px Arial") | |
.text(function(d, i) { return dataSet[i].legendLabel; }); //get the label from our original data array | |
// Add a magnitude value to the larger arcs, translated to the arc centroid and rotated. | |
arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text") | |
.attr("dy", ".35em") | |
.attr("text-anchor", "middle") | |
//.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; }) | |
.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.outerRadius = outerRadius; // Set Outer Coordinate | |
d.innerRadius = outerRadius/2; // Set Inner Coordinate | |
return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; | |
}) | |
.style("fill", "White") | |
.style("font", "bold 12px Arial") | |
.text(function(d) { return d.data.magnitude; }); | |
// Computes the angle of an arc, converting from radians to degrees. | |
function angle(d) { | |
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90; | |
return a > 90 ? a - 180 : a; | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment