[ Launch: Tributary inlet ] 5671888 by samselikoff
-
-
Save samselikoff/5671888 to your computer and use it in GitHub Desktop.
pie chart
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 chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"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/TEEfWAM.gif"} |
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 chart = new PieChart() | |
.straightenLabels(true) | |
.labelSize('31px') | |
.labelColor('#FFFFFF') | |
.color(['#61C270', '#439CA8', '#EC7575']) | |
// .oneColor('#439CA8') | |
.labelText('d.data.count'); | |
/*d3.select('#display').append('div').attr('id', 'chart') | |
.style('height', '334px') | |
.style('width', '400px') | |
.style('margin-left', '100px') | |
.style('margin-top', '100px'); | |
*/ | |
//d3.select('#chart').data([data]).call(chart); | |
var data = [ | |
{category: 'Done', count: Math.floor(Math.random()*14) }, | |
{category: 'Remaining Assigned', count: 6}, | |
{category: 'Remaining Unassigned', count: 4} | |
]; | |
d3.select('svg').data([data]).call(chart); | |
/*setInterval(function() { | |
var data = [ | |
{category: 'Done', count: Math.floor(Math.random()*14) }, | |
{category: 'Remaining Assigned', count: 6}, | |
{category: 'Remaining Unassigned', count: 4} | |
]; | |
d3.select('#chart').data([data]).call(chart); | |
}, 1500);*/ | |
function PieChart() { | |
var margin = {top: 20, right: 20, bottom: 20, left: 20}, | |
beginDate = '', | |
endDate = '', | |
color = d3.scale.category10(), | |
oneColor = '', | |
labelSize = '', | |
labelColor = '', | |
labelText = '', | |
legend = true, | |
straightenLabels = false; | |
function chart(selection) { | |
selection.each(function(data) | |
{ | |
var width = $(selection[0]).width()-margin.left-margin.right; | |
var height = $(selection[0]).height()-margin.top-margin.bottom; | |
radius = (Math.min(width, height) / 2 ); | |
arc = d3.svg.arc().outerRadius(radius).innerRadius(radius / 2); | |
data.forEach(function(d) { | |
d.count = +d.count; | |
}); | |
var pie = d3.layout.pie() | |
.sort(null) | |
.value(function(d) { return d.count; }); | |
if (oneColor) { | |
var newColors = []; | |
for (var i = 0; i < data.length; i++) { | |
var percent = 20*i; | |
newColors.push(shadeColor(oneColor, percent)); | |
} | |
color.range(newColors); | |
} | |
// Select the svg element, if it exists. | |
var svg = d3.select(this).selectAll("svg").data([pie(data)]); | |
// Otherwise, create the skeletal chart. | |
var gEnter = svg.enter().append("svg").append("g"); | |
for (var i = data.length - 1; i >= 0; i--) { | |
var piece = gEnter.append("g").attr("class", "arc"); | |
piece.append("path").style("opacity", 0); | |
piece.append("g").attr("class", "label").append("text").style("opacity", 0); | |
} | |
gEnter.selectAll("path") | |
.data(function(d) {return d;}) | |
.style("fill", function(d) { return color(d.data.category); }) | |
.each(function(d) { this._current = d; }); | |
gEnter.selectAll(".label") | |
.data(function(d) {return d;}) | |
.attr("transform", function(d) { return "rotate(" + angle(d) + "," + arc.centroid(d) + ")translate(" + arc.centroid(d) + ")"; }); | |
// Update the outer dimensions. | |
svg.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom); | |
// Update the inner dimensions. | |
var g = svg.select("g") | |
.attr("transform", "translate(" + ( ( width / 2 ) + margin.left ) + "," + ( ( height / 2 ) + margin.top )+ ")"); | |
// Update the arcs. | |
g.selectAll("path") | |
.data(function(d) {return d;}) | |
.transition() | |
.duration(500) | |
.style("opacity", 1) | |
.attrTween("d", arcTween); | |
// Update the labels. | |
g.selectAll(".label") | |
.data(function(d) {return d;}) | |
.transition() | |
.duration(500) | |
.attr("transform", function(d) {return "rotate(" + angle(d) + "," + arc.centroid(d) + ")translate(" + arc.centroid(d) + ")";}) | |
.select("text") | |
.style("opacity", 1) | |
.attr("dy", ".35em") | |
.style("text-anchor", "middle") | |
.text(function(d) { | |
console.log(d.data.count); | |
if (d.data.count === 0) {return '';} | |
return (labelText) | |
? eval(labelText) | |
: d.data.category; | |
}); | |
if (straightenLabels) { | |
g.selectAll(".label") | |
.data(function(d) {return d;}) | |
.select("text") | |
.attr("transform", function(d) {return "rotate(" + (-1 * angle(d)) + ")"; | |
}) | |
} | |
if (legend) { | |
} | |
if (labelSize) {g.selectAll("text").style("font-size", labelSize);} | |
if (labelColor) {g.selectAll("text").attr("fill", labelColor);} | |
}); | |
} | |
function angle(d) { | |
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90; | |
return a > 90 ? a - 180 : a; | |
} | |
function arcTween(a) { | |
var i = d3.interpolate(this._current, a); | |
this._current = i(0); | |
return function(t) { | |
return arc(i(t)); | |
}; | |
} | |
chart.height = function(_) { | |
if (!arguments.length) return height; | |
height = _; | |
return chart; | |
}; | |
chart.beginDate = function(_) { | |
if (!arguments.length) return beginDate; | |
beginDate = _; | |
return chart; | |
}; | |
chart.endDate = function(_) { | |
if (!arguments.length) return endDate; | |
endDate = _; | |
return chart; | |
}; | |
chart.color = function(_) { | |
if (!arguments.length) return color; | |
color.range(_); | |
return chart; | |
}; | |
chart.oneColor = function(_) { | |
if (!arguments.length) return oneColor; | |
oneColor = _; | |
return chart; | |
}; | |
chart.labelSize = function(_) { | |
if (!arguments.length) return labelSize; | |
labelSize = _; | |
return chart; | |
}; | |
chart.labelColor = function(_) { | |
if (!arguments.length) return labelColor; | |
labelColor = _; | |
return chart; | |
}; | |
chart.labelText = function(_) { | |
if (!arguments.length) return labelText; | |
labelText = _; | |
return chart; | |
}; | |
chart.straightenLabels = function(_) { | |
if (!arguments.length) return straightenLabels; | |
straightenLabels = _; | |
return chart; | |
}; | |
function shadeColor(color, percent) { | |
var R = parseInt(color.substring(1,3),16) | |
var G = parseInt(color.substring(3,5),16) | |
var B = parseInt(color.substring(5,7),16); | |
R = parseInt(R * (100 + percent) / 100); | |
G = parseInt(G * (100 + percent) / 100); | |
B = parseInt(B * (100 + percent) / 100); | |
R = (R<255)?R:255; | |
G = (G<255)?G:255; | |
B = (B<255)?B:255; | |
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16)); | |
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16)); | |
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16)); | |
return "#"+RR+GG+BB; | |
} | |
return chart; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment