mars7233/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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.
forked from cjhin's block: American Pie

  
## data.csv

          
            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

## index.html
<!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>
	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>