[ Launch: pie for ccmonster ] 5826708 by enjalot
-
-
Save enjalot/5826708 to your computer and use it in GitHub Desktop.
pie for ccmonster
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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