Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created June 20, 2013 21:12
Show Gist options
  • Save enjalot/5826708 to your computer and use it in GitHub Desktop.
Save enjalot/5826708 to your computer and use it in GitHub Desktop.
pie for ccmonster
{"description":"pie for ccmonster","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":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/GqChgE0.png"}
var w = tributary.sw,
h = tributary.sh,
r = Math.min(w, h) / 2;
var color = d3.scale.ordinal()
.range(["#EC0690", "#666769", "#00ACF5"]);
var svg = d3.select("svg");
visits = [{key:"US", value:100}, {key:"Europe", value:200}];
var vis = d3.select("svg")
.data([visits]) //associate our data with the document
.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', 'start')
.text(function(d, i) { return d.value; });
var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 100)
.attr('transform', 'translate(-80, 0)');
legend.selectAll('rect')
.data(visits)
.enter()
.append("rect")
.attr("x", w - 65)
.attr("y", function(d, i){ return i * 30;})
.attr("width", 20)
.attr("height", 20)
.attr("fill", function(d, i) { return color(i); } );
legend.selectAll('text')
.data(visits)
.enter()
.append("text")
.attr("x", w - 30)
.attr("y", function(d, i){ return i * 30 + 16;})
.text(function(d, i) {
return d.key;
})
.attr("fill", function(d, i) { return color(i); } );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment