Skip to content

Instantly share code, notes, and snippets.

@cjhin cjhin/README.md
Last active Jun 26, 2017

Embed
What would you like to do?
American Pie

Yeah it's bad pun sorry...

Playing with pie charts, base code from mbostock: https://bl.ocks.org/mbostock/3887235

Data

From National Priorities Project https://www.nationalpriorities.org/interactive-data/taxday/ Their data and sources: https://www.nationalpriorities.org/analysis/2017/tax-day-2017/tax-day-2017-notes-and-sources/

Originally, I pulled data from http://www.fixthedebt.org/, specifically their "taxpayer receipt", but I couldn't find any sources or notes or whether it was even personal income taxes only or not.

category percent
Health 0.291
Pentagon & Military 0.234
Interest 0.132
Unemployment & Labor 0.075
Veterans Benefits 0.06
Food & Agriculture 0.045
Government 0.042
Transportation 0.032
Education 0.028
Housing & Community 0.021
Energy & Environment 0.016
International Affairs 0.013
Science 0.01
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: helvetica;
}
.label {
font-size: 10px;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<svg width="960" height="500"></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = Math.min(width, height) / 2.1,
g = svg.append("g").attr("transform", "translate(" + width / 1.8 + "," + ((height / 2) + 10) + ")");
var color = d3.scaleOrdinal(d3.schemeCategory20);
var pie = d3.pie()
.sort(null)
.value(function(d) { return d.percent; });
var path = d3.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var label = d3.arc()
.outerRadius(radius + 10)
.innerRadius(radius + 10);
svg.append("text")
.attr("transform", "translate(20,30)")
.attr("font-size", "2em")
.text("American Pie");
svg.append("text")
.attr("transform", "translate(20,60)")
.attr("font-size", "1em")
.text("(where do US individual income tax dollars go)");
d3.csv("data.csv", function(d) {
d.percent = +d.percent;
return d;
}, function(error, data) {
if (error) throw error;
var arc = g.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
arc.append("path")
.attr("d", path)
.attr("fill", function(d) { return color(d.data.category); });
g.selectAll("text").data(pie(data))
.enter().append("text")
.attr("class", "label")
.attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
.attr("dy", "0.35em")
.text(function(d) { return (100*d.data.percent).toPrecision(2) + "%"; });
// Setup legend
var legendDotSize = 30;
var legendWrapper = svg.append("g")
.attr("class", "legend")
.attr("transform", function(d) { return "translate(20,110)"; })
// The text of the legend
var legendText = legendWrapper.selectAll("text")
.data(data);
legendText.enter().append("text")
.attr("y", function(d, i) { return i * legendDotSize + 12; })
.attr("x", 20)
.merge(legendText)
.text(function(d) {
return d.category;
});
legendText.exit().remove();
// The dots of the legend
var legendDot = legendWrapper.selectAll("rect")
.data(data);
legendDot.enter().append("rect")
.attr("y", function(d, i) { return i * legendDotSize; })
.attr("rx", legendDotSize * 0.5)
.attr("ry", legendDotSize * 0.5)
.attr("width", legendDotSize * 0.5)
.attr("height", legendDotSize * 0.5)
.merge(legendDot)
.style("fill", function(d) { return color(d.category); });
legendDot.exit().remove();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.