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.

<!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>

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>

https://d3js.org/d3.v4.min.js