Waterfall Chart

http://bl.ocks.org/chucklam/f3c7b3e3709a0afd5d57

by Christian Sonne

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<svg class="chart"></svg>

CSS

.bar.total rect {
  fill: steelblue;
}

.bar:hover rect {
  fill: orange;
}

.bar.positive rect {
  fill: darkolivegreen;
}

.bar:hover rect {
  fill: orange;
}

.bar.negative rect {
  fill: crimson;
}

.bar:hover rect {
  fill: orange;
}

.bar line.connector {
  stroke: grey;
  stroke-dasharray: 3;
}

.bar text {
  fill: white;
  font: 12px sans-serif;
  text-anchor: middle;
}

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

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

.bar text {
  text-shadow: 0 0 5px black;
}

.lastyear {
  stroke: black;
}

.promise {
  stroke: red;
  stroke-dasharray: 3;
}

.label {
  font-size: 12px;
}

JavaScript

var margin = {
    top: 20,
    right: 30,
    bottom: 30,
    left: 80
  },
  width = 1424 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom,
  padding = 0.3;

var comparison = 106421523.31;

var formatAxis = d3.format("%");

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], padding);

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

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


var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .tickFormat(function(d) {
    return d;
  });


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




data = [{
    "name": "Cases In Statement",
    "value": 12122437.63
  }, {
    "name": "Cases Currency Adjusted",
    "value": -2357.37
  }, {
    "name": "Cases Inflation Adjusted",
    "value": 0
  }, {
    "name": "Random Fluctuations",
    "value": 3582528.12
  }, {
    "name": "Change In Volume",
    "value": 62426372.54
  }, {
    "name": "Change In Country_grp",
    "value": -2773072.02
  }, {
    "name": "Change In Icd10_grp",
    "value": -13539092.26
  }, {
    "name": "Change In Age_grp",
    "value": -2967343.00
  }, {
    "name": "Change In Gender_grp",
    "value": 4952912.57
  }

];

//function to find all the positive values
var positive_val = data.filter(function(d) {
  return d.value > 0;
});

//function to calculate the sum of all the positive values
var maxSum = positive_val.reduce(function(sum, d) {
  return sum + d.value;
}, 0);

// Transform data (i.e., finding cumulative values and total) for easier charting
var cumulative = 0;
for (var i = 0; i < data.length; i++) {
	data[i].class = (data[i].value >= 0) ? 'positive' : 'negative';
  data[i].value -= comparison;
  data[i].start = cumulative;
  cumulative += data[i].value;
  data[i].end = cumulative;
}
data.push({
 ...