D3 Examples - 2016 candidate tax plans

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.

xxxxxxxxxx
 
<!-- Template from https://bl.ocks.org/mbostock/2368837 -->
<!-- Data from taxpolicycenter.org -->
​
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
 <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
​
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
​
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
​
<!-- Latest compiled and minified JavaScript -->
<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>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
​
<script>
var margin = {top: 20, right: 20, bottom: 100, left: 20},
    width = window.innerWidth - margin.left - margin.right,
    height = window.innerHeight - margin.top - margin.bottom;
​
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 + ")");
​
var updateChart = function(source) {
  d3.tsv(source, type, function(error, data) {
    x.domain([d3.min(data, function(d) {return d.dtchg}), d3.max(data, function(d) {return d.hcchg})]).nice();
    y.domain(data.map(function(d) { return d.agimax; }));
​
  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>
​
    