2016 candidate tax plans

This chart illustrates the overall shape of tax plans proposed by 2016 presidential candidates Hillary Clinton and Donald Trump. The data was calculated from the Tax Policy Center's analysis of the plans, and the underlying data was also used to create this this handy Vox Calculator.

The dropdown menu in the top left corner will produce different charts that display data for a tax household's given filing status and number of dependents. Each bar shows the average tax cut or increase (compared to current law) for a household with a given income, with Clinton's proposed changes in blue and Trump's in red. The size of the tax cut/increase is displayed on the x axis, and can also be seen by mouseover on individual bars.

Built with blockbuilder.org

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
 <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>

.bar--positive {
  fill: steelblue;
}

.bar--negative {
  fill: darkred;
}

.bar:hover {
  fill: orange;
}

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.d3-tip {
  line-height: 1;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

</style>
<body>
<div>
  <select id = "dollars">
    <option value="s0">Single, 0 Dependents</option>
    <option value="h1">Single, 1 Dependents</option>
    <option value="h2">Single, 2 Dependents</option>
    <option value="m0" selected="selected">Married, 0 Dependents</option>
    <option value="m1">Married, 1 Dependents</option>
    <option value="m2">Married, 2 Dependents</option>
  </select>
</div>

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.ordinal()
    .rangeRoundBands([height, 0], 0.1)

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .ticks(0)
    .orient("left");

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "Income: " + d.agimax + "<br>" + "Tax Change: Clinton " + d.hcchg + "<br>" + "Tax Change: Trump " + d.dtchg;
  })

var s0 = 's0.tsv';
var m1 = 'm1.tsv';
var m2 = 'm2.tsv';
var h1 = 'h1.tsv';
var h2 = 'h2.tsv';
var m0 = 'm0.tsv';

var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.call(tip);

svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("class", function(d) { return "bar bar--" + (d.hcchg < 0 ? "negative" : "positive"); })
        .attr("x", function(d) { return x(Math.min(0, d.hcchg)); })
        .attr("y", function(d) { return y(d.agimax); })
        .attr("width", function(d) { return Math.abs(x(d.hcchg) - x(0)); })
        .attr("height", y.rangeBand())
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);

svg.selectAll(".bar2")
        .data(data)
      .enter().append("rect")
        .attr("class", function(d) { return "bar bar--" + (d.dtchg < 0 ? "negative" : "positive"); })
        .attr("x", function(d) { return x(Math.min(0, d.dtchg)); })
        .attr("y", function(d) { return y(d.agimax); })
        .attr("width", function(d) { return Math.abs(x(d.dtchg) - x(0)); })
        .attr("height", y.rangeBand())
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// svg.append("g")
  //     .attr("class", "y axis")
  //     .attr("transform", "translate(" + x(0) + ",0)")
  //     .call(yAxis);

});

}

function type(d) {
  d.agimax = +d.agimax;
  d.hcchg = +d.hcchg;
  d.dtchg = +d.dtchg;
  return d;
}

updateChart(s0);

d3.select("#dollars").on("change", function() {
  var newData = eval(d3.select(this).property('value'));
  svg.selectAll(".bar").remove();
  svg.selectAll(".bar2").remove();
  svg.selectAll(".axis").remove();
  updateChart(newData);
})

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

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

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js