D3 Examples - Pension Waterfalls

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
​
.axis text {
  font: 10px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  stroke-width: 0.5;
  shape-rendering: crispEdges;
}
    
.signed rect.bar.total {
  fill: rgb(77,77,77);
}
.signed rect.bar.positive {
  fill: rgb(26,150,65);
}
.signed rect.bar.negative {
  fill: rgb(215,25,28);
}
</style>
<body>
<form>
  <input type="radio" name="mode" id="mode-type" value="type" checked>
  <label for="mode-type">Changes by Type</label>
  <input type="radio" name="mode" id="mode-sign" value="sign" checked>
  <label for="mode-sign">Changes by Sign</label>
  <input type="radio" name="mode" id="mode-total" value="total" >
  <label for="mode-total">Year End Total</label>
</form>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/colorbrewer.v1.min.js"></script>
<script src="waterfall.js"></script>
</body>
    