Having some Pie

_.md

[ Launch: Having some Pie ] 9030420 by ljbrown238

config.json

{"description":"Having some Pie","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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,"thumbnail":"http://i.imgur.com/U5YfCXC.png"}

inlet.js

var width = 960;
var height = 500;
var radius = Math.min(width, height) / 2;	// Setting a relative size for the pie chart

//Append the SVG and group
var svg = d3.select("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
		.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// One scheme:
var color = d3.scale.category20();

// Another Scheme:
//var color = d3.scale.linear().domain([0,100]).range(["white","red"]);
var p=d3.scale.category10();
var r=p.range(); // ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", 
                      // "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]
var color=d3.scale.ordinal().range(r); 

var color = function (value) {
	// console.log ("value:" + value + ":")
	if (value >= 50) {
		//console.log (">>>>>>>> returning red");
		return "red";
	} else {
		// console.log (">>>>>>>> returning green");
		return "green";
		//return eval(d3.scale.category10());
	}
}


//console.log(color(100));

// Set the arc lengths of the inner and outer arcs
var arc = d3.svg.arc()
	.outerRadius(radius - 52)
	//.innerRadius(radius - 70)
	.innerRadius(function(d,i) {
		//console.log("arc for datapoint:" + i + ":");
		//console.log(d);
		return radius - 98;
	});


// Compute the layout FUNCTION
var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d.score; });

// Set the data
var data = [
	{"name":"Bill","score":60},
	{"name":"Bob","score":30},
	{"name":"John","score":15},
	{"name":"Larry","score":5}
];

// Bind the results of the pie function to each ".arc" element
// There will be 4 elements
var join = svg.selectAll(".arc")
	.data(pie(data));	// Note the data being passed is "pie(data)" NOT just the "data" array!!!

// When we apend a group to the "enter" selection, we are binding
// the data to each group element.
// The data is: 
var selection_of_groups = join.enter()
	.append("g")
	.attr("class", "arc");	// This ensures the class path is styled as specified above in the <style> section

// Selection_of_groups is an array beginning with an array of groups
// starting at element 0 is the first group, 1 is the second group, etc.
// So, selection_of_groups[0][0] is the first group "g"
// If we look at the bound data for the first group "g", we see
// that the __data__ is an object with properties: data = {"name":"Bob","score":"50"}
// and the next property is value (derived from score) and the computed endAngle and startAngle.
// The next group selection_of_groups[0][1]['__data__'] continues the pattern
// console.log(selection_of_groups[0][0]['__data__']);

// Now, we are going to append a path to each group in the selection
// This path property "d" will be set using the arc function
// since it knows the inner radius, outer radius and is passed the start and end angles
selection_of_groups
	.append("path")
	.attr("d", arc)	// Calls the function arc with (d,i) for each datapoint
	.style("fill", function(d) {
		//console.log("selection_of_groups 'd' below");
		//console.log(d);
		return color(d.value); // The reason we do d.data.name is because the data is buried under
									// data because we passed in "pie(data)" NOT just the "data" array
	});	// We set the color based on the name


// We will also append a text element to each group in the selection
// Note, we're going to transform this text element to the center of the arc
// using the arc.centroid(d) function.
// Since the arc function knows the inner radius, outer radius, start and end angles
// It can compute the X,Y translation necessary to place the text exactly where it belongs.

selection_of_groups
	.append("text")
	.attr("transform", function(d) {
		//console.log("selection_of_groups 'd' below");
		// Example of "Bob's" object: {data: Object, value: 50, startAngle: 0, endAngle: 3.1415926535897936}
		// Notice the angle starts at 0 (top of the circle and ends at PI - or half of the radians of the circle)
		// The ratio of diameter to circumference is [PI], and the radius is 1/2 the diameter, there are 2[PI] radians to a circle. 
		//console.log(d);
		return "translate(" + arc.centroid(d) + ")"; }) 
		// The centroid is defined as the midpoint in polar coordinates of the inner and outer radius, and the start and end angle.
	.attr("dy", ".35em")
	.style("text-anchor", "middle")
	.text(function(d) { return d.data.name; });

style.css

body {
  font: 10px sans-serif;
}

.arc path {
  stroke: #fff;
}