distribution

HTML

<!DOCTYPE html>
<body>
<script src="http://d3js.org/d3.v4.min.js"></script>

    <div id="chart">
      <!-- SVG Chart will go in here -->
    </div>
</body>

CSS

body {
  background-color: white;
}

#chart {
  background-color: white;
  width: 800px;
  height 800px;
  float: left;
  padding: 0px;
  //  border-style: solid;
  //  border-width: 1px; 
}

#chart svg {
    background-color: white;
    text-align: right;
    padding: 25px;
    margin: 15px;
    //border-style: solid;
    //border-width: 1px; 
}

rect:hover{
  stroke: black;
  stroke-width: 2px;
}

.chart text {
  fill: black;
  font: 12px sans-serif;
  text-anchor: middle;
}

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

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

div.tooltip {	
    position: absolute;			
    text-align: left;			
    width: 200px;					
    height: 50px;					
    padding: 10px;	
   
    font: 12px sans-serif;		
    //background: #e9e9e9;	
    //border: 1px;		
    //border-color: #e9e9e9;
    //border-radius: 8px;			
    pointer-events: none;			
}

JavaScript

// Set dimensions of chart
var margin = {top: 50, right: 30, bottom: 80, left: 40},
    width = 700 - margin.left - margin.right,
    height = 350; // - margin.top - margin.bottom;

var y = d3.scale.linear()
    .range([height, 0]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(8)
    .tickSize(-6, -6);

var x = d3.scale.ordinal()
    .rangeBands([0, width + 5]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(0, 0);
    
// Define tooltip format
var format = d3.format(","); // comma at thousands 

var colors = {"Income Before<br>Transfers and Taxes" : "#008000",
              "Means-Tested<br>Transfers" : "#005aff",
              "Federal<br>Taxes" : "#ffa500",
              "Income After<br>Transfers and Taxes" : "#800080"};

  var data = [
      {measure: "Income Before<br>Transfers and Taxes", quintile: "Lowest", value: 19000},
      {measure: "Income Before<br>Transfers and Taxes", quintile: "Second", value: 42000},
      {measure: "Income Before<br>Transfers and Taxes", quintile: "Middle", value: 69000},
      {measure: "Income Before<br>Transfers and Taxes", quintile: "Fourth", value: 105000},
      {measure: "Income Before<br>Transfers and Taxes", quintile: "Highest", value: 282000},
      {measure: "Means-Tested<br>Transfers", quintile: "Lowest", value: 13000, rate: 64.8},
      {measure: "Means-Tested<br>Transfers", quintile: "Second", value: 6000, rate: 12.8},
      {measure: "Means-Tested<br>Transfers", quintile: "Middle", value: 3000, rate: 3.5},
      {measure: "Means-Tested<br>Transfers", quintile: "Fourth", value: 1000, rate: 1.1},
      {measure: "Means-Tested<br>Transfers", quintile: "Highest", value: 1000, rate: 0.2},
      {measure: "Federal<br>Taxes", quintile: "Lowest", value: 0, rate: 2.0},
      {measure: "Federal<br>Taxes", quintile: "Second", value: 4000, rate: 9.2},
      {measure: "Federal<br>Taxes", quintile: "Middle", value: 10000, rate: 13.6},
      {measure: "Federal<br>Taxes",...