thomasdullien/savings_chart.html

## savings_chart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Minimal D3 Example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.service_bar_pre {
  fill: steelblue;
  stroke-width: 3;
  stroke: rgb(0,0,0);
}

.service_bar_post_remainder {
  fill: steelblue;
  stroke-width: 3;
  stroke: rgb(0,0,0);
}

.service_bar_post_savings {
  fill: lightblue;
  stroke-width: 3;
  stroke: #fff;
}

.service_bar_third_remainder {
  fill: steelblue;
  stroke-width: 3;
  stroke: rgb(0,0,0);
}

.service_bar_third_savings {
  fill: lightblue;
  stroke-width: 2;
  stroke: #fff;
}

.links_pre_post {
  stroke-width: 0;
  stroke: rgba(0,0,0,0.01);
  fill: rgba(0,0,0,0.1);
}

.links_post_third {
  stroke-width: 0;
  fill: lightblue;
  opacity: 0.4;
}

.curly_bracket {
  stroke-width: 1;
  fill: black;
  stroke: black;
  shape-rendering: geometricPrecision;
}

.service_legend {
  stroke-width: 1;
  fill: steelblue;
  opacity: 0.4;
}

.bar:hover {
  fill: orange;
}
</style>
</head>
<body>
<script type="text/javascript">
var data2 = {
  "services": [
      {
        "name" : "Cassandra",
        "description" : "A large Cassandra cluster.",
        "percentage" : 32,
        "savings" : 29,
        "optimizations" : [ "More sophisticated use of compression" ]
      },
      {
        "name" : "ElasticSearch",
        "description" : "A large ElasticSearch cluster.",
        "percentage" : 32,
        "savings" : 31,
        "optimizations" : [ "Different use of compression" ]
      },
      {
        "name" : "Service A",
        "description" : "An internet-facing data-ingestion service in Python.",
        "percentage" : 12,
        "savings" : 90,
        "optimizations" : [ "Better CPU utilization", "Vectorized loop",
          "JIT'ed Regular expressions" ]
      },
      {
        "name" : "Service B",
        "description" : "An internet-facing data-ingestion service in Python.",
        "percentage" : 12,
        "savings" : 67,
        "optimizations" : [ "More efficient lock-handling in core datastructure",
          "Ensuring JIT'ed execution of the entire code" ]
      },
      {
        "name" : "Service C",
        "description" : "An internet-facing data-ingestion service in a mixture of Python and C.",
        "percentage" : 12,
        "savings" : 35,
        "optimizations" : [ "Improved de-duplication and caching of data",
          "Reduction of initialization costs by implementing a forkserver" ]
      }
    ]
};

var total_width = 500;
var total_height = 500;
var bar_width = 30;
var big_font_size = total_height / 30;

// Use the margin convention.
var margin = {top: 20, right: 40, bottom: 20, left: 10};
var width = total_width - margin.left - margin.right,
    height = total_height - margin.top - margin.bottom;
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 + ")");

data = data2.services;

pre_bar_x_position = 1*(width / 5) - (bar_width / 2);
post_bar_x_position = 2*(width / 5) - (bar_width / 2);
third_bar_x_position = 3*(width / 5) - (bar_width / 2);

// For each service, we wish to create 5 rectangles: One on the very left
// that represents the service prior to our optimization, two in the middle
// that show how our optimization split savings off of the original service,
// and two in the far right that are just re-arrangements of the blocks in the
// middle to group all the "savings" and all the "leftover" bits.

// Helper functions for calculating positions.
var pre_bar_height = function(data_item) {
  fractional_height = data_item.percentage / 100.0;
  return height * fractional_height;
}

var post_bar_height_savings = function(data_item) {
  normal_height = pre_bar_height(data_item);
  savings = data_item.savings / 100.0;
  return normal_height * savings;
}

var post_bar_height_remainder = function(data_item) {
  normal_height = pre_bar_height(data_item);
  remain = 1.0 - (data_item.savings / 100.0);
  return normal_height * remain;
}

// The code is cleanest if we annotate all the data elements with their x and
// y positions before we start. I know that this is not the "d3 way", but a
// different attempt yielded rather messy code.

pre_y_position = 0;
total_savings_height = 0;
total_remainder_height = 0;
for (var i = 0; i < data.length; ++i) {
  data[i].pre_y_position = pre_y_position;
  data[i].post_savings_y_position = pre_y_position;
  data[i].post_remainder_y_position = pre_y_position + post_bar_height_savings(data[i]);

  pre_y_position += pre_bar_height(data[i]);
  total_savings_height += post_bar_height_savings(data[i]);
  total_remainder_height += post_bar_height_remainder(data[i]);
}

third_savings_y_position = 0;
third_remainder_y_position = total_savings_height;
for (var i = 0; i < data.length; ++i) {
  data[i].third_savings_y_position = third_savings_y_position;
  data[i].third_remainder_y_position = third_remainder_y_position;

  third_savings_y_position += post_bar_height_savings(data[i]);
  third_remainder_y_position += post_bar_height_remainder(data[i]);
}

total_savings_percentage = Math.round(total_savings_height / (total_savings_height +
  total_remainder_height) * 100.0);

// All position data is calculated. Draw the diagram.
// The leftmost bar.

svg.selectAll(".service_bar_pre")
  .data(data)
  .enter()
  .append("rect")
  .attr({
    class : "service_bar_pre",
    width : bar_width,
    height: pre_bar_height,
    y : function(d) { return d.pre_y_position; },
    x : pre_bar_x_position
   });


// The middle bar. Draw the savings first.
svg.selectAll(".service_bar_post_savings")
  .data(data)
  .enter()
  .append("rect")
  .attr({
    class : "service_bar_post_savings",
    width : bar_width,
    height: post_bar_height_savings,
    y : function(d) { return d.post_savings_y_position; },
    x : post_bar_x_position
   });

// Now draw the remaining costs.

svg.selectAll(".service_bar_post_remainder")
  .data(data)
  .enter()
  .append("rect")
  .attr({
    class : "service_bar_post_remainder",
    width : bar_width,
    height: post_bar_height_remainder,
    y : function(d) { return d.post_remainder_y_position; },
    x : post_bar_x_position
   });


// The rightmost bar.
// Draw the savings first.
svg.selectAll(".service_bar_third_savings")
  .data(data2.services)
  .enter()
  .append("rect")
  .attr({
    class : "service_bar_third_savings",
    width : bar_width,
    height: post_bar_height_savings,
    y : function(d) { return d.third_savings_y_position; },
    x : third_bar_x_position
   });

// Draw the remainders.
svg.selectAll(".service_bar_third_remainder")
  .data(data2.services)
  .enter()
  .append("rect")
  .attr({
    class : "service_bar_third_remainder",
    width : bar_width,
    height: post_bar_height_remainder,
    y : function(d) { return d.third_remainder_y_position; },
    x : third_bar_x_position
   });


// Draw sankey-style curves between the first and second bar chart.

// SVG unfortunately does not natively support splines that smoothly interpolate
// through control points, only Bezier curves (which are more difficult to
// handle). To simplify life, the following code takes a series of points,
// interpolates a Catmull-Rom spline through them, then converts the results
// to arrays of three points for the path to plot.
// Code that interpolates a Catmull-Rom spline through a few points, then emits
// the control points for Bezier Curves (SVG Path drawing) to draw them.

function catmullRom2bezier(points) {
  var result = [];
  for (var i = 0; i < points.length - 1; i++) {
    var p = [];

    p.push({
        x: points[Math.max(i - 1, 0)].x,
        y: points[Math.max(i - 1, 0)].y
    });
    p.push({
        x: points[i].x,
        y: points[i].y
    });
    p.push({
        x: points[i + 1].x,
        y: points[i + 1].y
    });
    p.push({
        x: points[Math.min(i + 2, points.length - 1)].x,
        y: points[Math.min(i + 2, points.length - 1)].y
    });

    // Catmull-Rom to Cubic Bezier conversion matrix
    //    0       1       0       0
    //  -1/6      1      1/6      0
    //    0      1/6      1     -1/6
    //    0       0       1       0

    var bp = [];
    bp.push({
        x: ((-p[0].x + 6 * p[1].x + p[2].x) / 6),
        y: ((-p[0].y + 6 * p[1].y + p[2].y) / 6)
    });
    bp.push({
        x: ((p[1].x + 6 * p[2].x - p[3].x) / 6),
        y: ((p[1].y + 6 * p[2].y - p[3].y) / 6)
    });
    bp.push({
        x: p[2].x,
        y: p[2].y
    });
    result.push(bp);
  }
  return result;
}

// Given a series of points, generate a path through them.
function makePath(points, initialmove) {
  var result = "";
  if (initialmove) {
    var result = "M" + points[0].x + "," + points[0].y + " ";
  }
  var catmull = catmullRom2bezier(points);
  for (var i = 0; i < catmull.length; i++) {
    result += "C" + catmull[i][0].x + "," + catmull[i][0].y + " " + catmull[i][1].x + "," + catmull[i][1].y + " " + catmull[i][2].x + "," + catmull[i][2].y + " ";
  }
  return result;
}

function makeLines(points) {
  //var result = "M" + points[0].x + "," + points[0].y + " ";
  result = "";
  for (var i = 0; i < points.length-1; ++i) {
    result += "L" + points[i].x + "," + points[i].y + " " + points[i+1].x + "," +
      points[i+1].y;
  }
  return result;
}

// Constructs a path between two rectangles in a bar chart, showing flow between
// them, Sankey-diagram style.
function getSanKeyPath(start, end, start2, end2) {
  var xcurvature = 0.3;
  var ycurvature = 0.2;

  // Interpolate two intermediate points: One close to start on the same y as
  // the start, and one close to the end with the same y as close to the end.
  intermediate_point_upper_A = {
    x : d3.interpolateNumber(start.x, end.x)(xcurvature),
    y : d3.interpolateNumber(start.y, end.y)(ycurvature) };
  intermediate_point_upper_B = {
    x : d3.interpolateNumber(start.x, end.x)(1-xcurvature),
    y : d3.interpolateNumber(start.y, end.y)(1-ycurvature) };

  intermediate_point_lower_A = {
    x : d3.interpolateNumber(start2.x, end2.x)(xcurvature),
    y : d3.interpolateNumber(start2.y, end2.y)(ycurvature) };
  intermediate_point_lower_B = {
    x : d3.interpolateNumber(start2.x, end2.x)(1-xcurvature),
    y : d3.interpolateNumber(start2.y, end2.y)(1-ycurvature) };

  upper_path = [ start, intermediate_point_upper_A, intermediate_point_upper_B,
    end ];
  lower_path = [ start2, intermediate_point_lower_A, intermediate_point_lower_B,
    end2 ];

  // Spline from left upper side to right upper side.
  path = makePath( upper_path, true )
  // Linear segment downward.
  path += "L" + end.x + "," + end.y + " " + start2.x + "," + start2.y;
  // Spline from lower right side to lower left side.
  path += makePath( lower_path, false )
  return path;
}

svg.selectAll(".links_pre_post")
  .data(data)
  .enter()
  .append("path")
  .attr({
    class: "links_pre_post",
    d: function(d) {
      startpoint = { x : pre_bar_x_position + bar_width,
        y: d.pre_y_position };
      endpoint = { x : post_bar_x_position,
        y : d.post_remainder_y_position };
      startpoint2 = { x : post_bar_x_position,
        y : d.post_remainder_y_position + post_bar_height_remainder(d) };
      endpoint2 = { x : pre_bar_x_position + bar_width,
        y : d.pre_y_position + pre_bar_height(d) };
      return getSanKeyPath(startpoint, endpoint, startpoint2, endpoint2);
    }
  });

svg.selectAll(".links_post_third")
  .data(data)
  .enter()
  .append("path")
  .attr({
    class: "links_post_third",
    d: function(d) {
      startpoint = { x : post_bar_x_position + bar_width,
        y: d.post_savings_y_position };
      endpoint = { x : third_bar_x_position,
        y : d.third_savings_y_position };
      startpoint2 = { x : third_bar_x_position,
        y : d.third_savings_y_position + post_bar_height_savings(d) };
      endpoint2 = { x : post_bar_x_position + bar_width,
        y : d.post_savings_y_position + post_bar_height_savings(d) };
      return getSanKeyPath(startpoint, endpoint, startpoint2, endpoint2);
    }
  });


// Code to draw legends, popups, and so forth.

// A function to draw a curly bracket path. Returns a path for
// a curly brace between x1,y1 and x2,y2, w pixels wide
// and q factor, .5 is normal, higher q = more expressive bracket.

function makeCurlyBraceHalf(x1, y1, x2, y2, thickness, curviness) {
  // The midpoint between the target and the start point is where the linear
  // segment will live. This will be the "midpoint" of the line (in terms of
  // thickness.
  linear_segment_x = d3.interpolateNumber(x1, x2)(0.5);
  linear_segment_x_right = linear_segment_x + thickness / 2;
  linear_segment_x_left = linear_segment_x - thickness / 2;
  // The y position of the start of the linear segment is dictated by the
  // curviness parameter.
  linear_segment_start_y = d3.interpolateNumber(y1, y2)(curviness);
  linear_segment_end_y = d3.interpolateNumber(y1, y2)(1-curviness);

  linear_segment_right_start = { x : linear_segment_x_right,
    y : linear_segment_start_y };
  linear_segment_right_end = { x : linear_segment_x_right,
    y : linear_segment_end_y };
  linear_segment_left_start = { x : linear_segment_x_left,
    y: linear_segment_end_y };
  linear_segment_left_end = { x : linear_segment_x_left,
    y: linear_segment_start_y };

  // Now interpolating spline points for the angled segments are needed.
  interp_right = {
    x : d3.interpolateNumber(x1, linear_segment_x_right)(1-curviness),
    y : d3.interpolateNumber(y1, linear_segment_start_y)(curviness) }
  interp_left = {
    x : d3.interpolateNumber(x1, linear_segment_x_left)(1-curviness),
    y : d3.interpolateNumber(y1, linear_segment_start_y)(curviness) }

  start_spline_right = { x : x1, y : y1 }
  end_spline_right = { x : linear_segment_x_right, y : linear_segment_start_y }

  start_spline_left = { x : linear_segment_x_left, y : linear_segment_start_y }
  end_spline_left = start_spline_right;

  spline_right = makePath( [start_spline_right, interp_right, end_spline_right ], true);
  spline_left = makePath( [start_spline_left, interp_left, end_spline_left ], false)

  interp_target_right = {
    x : d3.interpolateNumber( linear_segment_x_right, x2 )(curviness),
    y : d3.interpolateNumber( linear_segment_end_y, y2 )(1-curviness),
  }
  interp_target_left = {
    x : d3.interpolateNumber( linear_segment_x_left, x2 )(curviness),
    y : d3.interpolateNumber( linear_segment_end_y, y2) (1-curviness)
  }
  lower_spline_right = makePath(
    [ linear_segment_right_end , interp_target_right, { x : x2, y: y2 }], false);
  lower_spline_left = makePath(
    [{ x: x2, y: y2 }, interp_target_left, linear_segment_left_start ])

  linear_segment_right = makeLines(
    [ linear_segment_right_start, linear_segment_right_end ]);
  linear_segment_left = makeLines(
    [ linear_segment_left_start, linear_segment_left_end ] );

  result = spline_right + linear_segment_right + lower_spline_right +
    lower_spline_left + linear_segment_left + spline_left;
  return result; // spline_right + linear_segment_right + spline_left;
}

function makeCurlyBrace(x1,y1,x2,y2,target_x, target_y, thickness, curviness) {
  upper_brace = makeCurlyBraceHalf(x1, y1, target_x, target_y, thickness, curviness);
  lower_brace = makeCurlyBraceHalf(x2, y2, target_x, target_y, thickness, curviness);
  return upper_brace + lower_brace;
}

svg.append("g")
  .append("path")
  .attr({
    class: "curly_bracket",
    d: makeCurlyBrace(third_bar_x_position + bar_width + 5, 0, third_bar_x_position
      + bar_width + 5, total_savings_height,
      third_bar_x_position + bar_width + 30, d3.interpolateNumber(
        0, total_savings_height)(0.5), 3, 0.3)
  });

svg.append("g")
  .append("text")
  .attr({
    class: "percentage_savings",
    x : third_bar_x_position + bar_width + 35,
    y : d3.interpolateNumber(0, total_savings_height)(0.5) + (big_font_size/2)} )
  .style("font-size", big_font_size + "pt")
  .style("font-family", "sans-serif")
  .text( function(d) { return total_savings_percentage + "% saved" } );


</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Minimal D3 Example</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	.service_bar_pre {
	fill: steelblue;
	stroke-width: 3;
	stroke: rgb(0,0,0);
	}

	.service_bar_post_remainder {
	fill: steelblue;
	stroke-width: 3;
	stroke: rgb(0,0,0);
	}

	.service_bar_post_savings {
	fill: lightblue;
	stroke-width: 3;
	stroke: #fff;
	}

	.service_bar_third_remainder {
	fill: steelblue;
	stroke-width: 3;
	stroke: rgb(0,0,0);
	}

	.service_bar_third_savings {
	fill: lightblue;
	stroke-width: 2;
	stroke: #fff;
	}

	.links_pre_post {
	stroke-width: 0;
	stroke: rgba(0,0,0,0.01);
	fill: rgba(0,0,0,0.1);
	}

	.links_post_third {
	stroke-width: 0;
	fill: lightblue;
	opacity: 0.4;
	}

	.curly_bracket {
	stroke-width: 1;
	fill: black;
	stroke: black;
	shape-rendering: geometricPrecision;
	}

	.service_legend {
	stroke-width: 1;
	fill: steelblue;
	opacity: 0.4;
	}

	.bar:hover {
	fill: orange;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">
	var data2 = {
	"services": [
	{
	"name" : "Cassandra",
	"description" : "A large Cassandra cluster.",
	"percentage" : 32,
	"savings" : 29,
	"optimizations" : [ "More sophisticated use of compression" ]
	},
	{
	"name" : "ElasticSearch",
	"description" : "A large ElasticSearch cluster.",
	"percentage" : 32,
	"savings" : 31,
	"optimizations" : [ "Different use of compression" ]
	},
	{
	"name" : "Service A",
	"description" : "An internet-facing data-ingestion service in Python.",
	"percentage" : 12,
	"savings" : 90,
	"optimizations" : [ "Better CPU utilization", "Vectorized loop",
	"JIT'ed Regular expressions" ]
	},
	{
	"name" : "Service B",
	"description" : "An internet-facing data-ingestion service in Python.",
	"percentage" : 12,
	"savings" : 67,
	"optimizations" : [ "More efficient lock-handling in core datastructure",
	"Ensuring JIT'ed execution of the entire code" ]
	},
	{
	"name" : "Service C",
	"description" : "An internet-facing data-ingestion service in a mixture of Python and C.",
	"percentage" : 12,
	"savings" : 35,
	"optimizations" : [ "Improved de-duplication and caching of data",
	"Reduction of initialization costs by implementing a forkserver" ]
	}
	]
	};

	var total_width = 500;
	var total_height = 500;
	var bar_width = 30;
	var big_font_size = total_height / 30;

	// Use the margin convention.
	var margin = {top: 20, right: 40, bottom: 20, left: 10};
	var width = total_width - margin.left - margin.right,
	height = total_height - margin.top - margin.bottom;
	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 + ")");

	data = data2.services;

	pre_bar_x_position = 1*(width / 5) - (bar_width / 2);
	post_bar_x_position = 2*(width / 5) - (bar_width / 2);
	third_bar_x_position = 3*(width / 5) - (bar_width / 2);

	// For each service, we wish to create 5 rectangles: One on the very left
	// that represents the service prior to our optimization, two in the middle
	// that show how our optimization split savings off of the original service,
	// and two in the far right that are just re-arrangements of the blocks in the
	// middle to group all the "savings" and all the "leftover" bits.

	// Helper functions for calculating positions.
	var pre_bar_height = function(data_item) {
	fractional_height = data_item.percentage / 100.0;
	return height * fractional_height;
	}

	var post_bar_height_savings = function(data_item) {
	normal_height = pre_bar_height(data_item);
	savings = data_item.savings / 100.0;
	return normal_height * savings;
	}

	var post_bar_height_remainder = function(data_item) {
	normal_height = pre_bar_height(data_item);
	remain = 1.0 - (data_item.savings / 100.0);
	return normal_height * remain;
	}

	// The code is cleanest if we annotate all the data elements with their x and
	// y positions before we start. I know that this is not the "d3 way", but a
	// different attempt yielded rather messy code.

	pre_y_position = 0;
	total_savings_height = 0;
	total_remainder_height = 0;
	for (var i = 0; i < data.length; ++i) {
	data[i].pre_y_position = pre_y_position;
	data[i].post_savings_y_position = pre_y_position;
	data[i].post_remainder_y_position = pre_y_position + post_bar_height_savings(data[i]);

	pre_y_position += pre_bar_height(data[i]);
	total_savings_height += post_bar_height_savings(data[i]);
	total_remainder_height += post_bar_height_remainder(data[i]);
	}

	third_savings_y_position = 0;
	third_remainder_y_position = total_savings_height;
	for (var i = 0; i < data.length; ++i) {
	data[i].third_savings_y_position = third_savings_y_position;
	data[i].third_remainder_y_position = third_remainder_y_position;

	third_savings_y_position += post_bar_height_savings(data[i]);
	third_remainder_y_position += post_bar_height_remainder(data[i]);
	}

	total_savings_percentage = Math.round(total_savings_height / (total_savings_height +
	total_remainder_height) * 100.0);

	// All position data is calculated. Draw the diagram.
	// The leftmost bar.

	svg.selectAll(".service_bar_pre")
	.data(data)
	.enter()
	.append("rect")
	.attr({
	class : "service_bar_pre",
	width : bar_width,
	height: pre_bar_height,
	y : function(d) { return d.pre_y_position; },
	x : pre_bar_x_position
	});


	// The middle bar. Draw the savings first.
	svg.selectAll(".service_bar_post_savings")
	.data(data)
	.enter()
	.append("rect")
	.attr({
	class : "service_bar_post_savings",
	width : bar_width,
	height: post_bar_height_savings,
	y : function(d) { return d.post_savings_y_position; },
	x : post_bar_x_position
	});

	// Now draw the remaining costs.

	svg.selectAll(".service_bar_post_remainder")
	.data(data)
	.enter()
	.append("rect")
	.attr({
	class : "service_bar_post_remainder",
	width : bar_width,
	height: post_bar_height_remainder,
	y : function(d) { return d.post_remainder_y_position; },
	x : post_bar_x_position
	});


	// The rightmost bar.
	// Draw the savings first.
	svg.selectAll(".service_bar_third_savings")
	.data(data2.services)
	.enter()
	.append("rect")
	.attr({
	class : "service_bar_third_savings",
	width : bar_width,
	height: post_bar_height_savings,
	y : function(d) { return d.third_savings_y_position; },
	x : third_bar_x_position
	});

	// Draw the remainders.
	svg.selectAll(".service_bar_third_remainder")
	.data(data2.services)
	.enter()
	.append("rect")
	.attr({
	class : "service_bar_third_remainder",
	width : bar_width,
	height: post_bar_height_remainder,
	y : function(d) { return d.third_remainder_y_position; },
	x : third_bar_x_position
	});


	// Draw sankey-style curves between the first and second bar chart.

	// SVG unfortunately does not natively support splines that smoothly interpolate
	// through control points, only Bezier curves (which are more difficult to
	// handle). To simplify life, the following code takes a series of points,
	// interpolates a Catmull-Rom spline through them, then converts the results
	// to arrays of three points for the path to plot.
	// Code that interpolates a Catmull-Rom spline through a few points, then emits
	// the control points for Bezier Curves (SVG Path drawing) to draw them.

	function catmullRom2bezier(points) {
	var result = [];
	for (var i = 0; i < points.length - 1; i++) {
	var p = [];

	p.push({
	x: points[Math.max(i - 1, 0)].x,
	y: points[Math.max(i - 1, 0)].y
	});
	p.push({
	x: points[i].x,
	y: points[i].y
	});
	p.push({
	x: points[i + 1].x,
	y: points[i + 1].y
	});
	p.push({
	x: points[Math.min(i + 2, points.length - 1)].x,
	y: points[Math.min(i + 2, points.length - 1)].y
	});

	// Catmull-Rom to Cubic Bezier conversion matrix
	// 0 1 0 0
	// -1/6 1 1/6 0
	// 0 1/6 1 -1/6
	// 0 0 1 0

	var bp = [];
	bp.push({
	x: ((-p[0].x + 6 * p[1].x + p[2].x) / 6),
	y: ((-p[0].y + 6 * p[1].y + p[2].y) / 6)
	});
	bp.push({
	x: ((p[1].x + 6 * p[2].x - p[3].x) / 6),
	y: ((p[1].y + 6 * p[2].y - p[3].y) / 6)
	});
	bp.push({
	x: p[2].x,
	y: p[2].y
	});
	result.push(bp);
	}
	return result;
	}

	// Given a series of points, generate a path through them.
	function makePath(points, initialmove) {
	var result = "";
	if (initialmove) {
	var result = "M" + points[0].x + "," + points[0].y + " ";
	}
	var catmull = catmullRom2bezier(points);
	for (var i = 0; i < catmull.length; i++) {
	result += "C" + catmull[i][0].x + "," + catmull[i][0].y + " " + catmull[i][1].x + "," + catmull[i][1].y + " " + catmull[i][2].x + "," + catmull[i][2].y + " ";
	}
	return result;
	}

	function makeLines(points) {
	//var result = "M" + points[0].x + "," + points[0].y + " ";
	result = "";
	for (var i = 0; i < points.length-1; ++i) {
	result += "L" + points[i].x + "," + points[i].y + " " + points[i+1].x + "," +
	points[i+1].y;
	}
	return result;
	}

	// Constructs a path between two rectangles in a bar chart, showing flow between
	// them, Sankey-diagram style.
	function getSanKeyPath(start, end, start2, end2) {
	var xcurvature = 0.3;
	var ycurvature = 0.2;

	// Interpolate two intermediate points: One close to start on the same y as
	// the start, and one close to the end with the same y as close to the end.
	intermediate_point_upper_A = {
	x : d3.interpolateNumber(start.x, end.x)(xcurvature),
	y : d3.interpolateNumber(start.y, end.y)(ycurvature) };
	intermediate_point_upper_B = {
	x : d3.interpolateNumber(start.x, end.x)(1-xcurvature),
	y : d3.interpolateNumber(start.y, end.y)(1-ycurvature) };

	intermediate_point_lower_A = {
	x : d3.interpolateNumber(start2.x, end2.x)(xcurvature),
	y : d3.interpolateNumber(start2.y, end2.y)(ycurvature) };
	intermediate_point_lower_B = {
	x : d3.interpolateNumber(start2.x, end2.x)(1-xcurvature),
	y : d3.interpolateNumber(start2.y, end2.y)(1-ycurvature) };

	upper_path = [ start, intermediate_point_upper_A, intermediate_point_upper_B,
	end ];
	lower_path = [ start2, intermediate_point_lower_A, intermediate_point_lower_B,
	end2 ];

	// Spline from left upper side to right upper side.
	path = makePath( upper_path, true )
	// Linear segment downward.
	path += "L" + end.x + "," + end.y + " " + start2.x + "," + start2.y;
	// Spline from lower right side to lower left side.
	path += makePath( lower_path, false )
	return path;
	}

	svg.selectAll(".links_pre_post")
	.data(data)
	.enter()
	.append("path")
	.attr({
	class: "links_pre_post",
	d: function(d) {
	startpoint = { x : pre_bar_x_position + bar_width,
	y: d.pre_y_position };
	endpoint = { x : post_bar_x_position,
	y : d.post_remainder_y_position };
	startpoint2 = { x : post_bar_x_position,
	y : d.post_remainder_y_position + post_bar_height_remainder(d) };
	endpoint2 = { x : pre_bar_x_position + bar_width,
	y : d.pre_y_position + pre_bar_height(d) };
	return getSanKeyPath(startpoint, endpoint, startpoint2, endpoint2);
	}
	});

	svg.selectAll(".links_post_third")
	.data(data)
	.enter()
	.append("path")
	.attr({
	class: "links_post_third",
	d: function(d) {
	startpoint = { x : post_bar_x_position + bar_width,
	y: d.post_savings_y_position };
	endpoint = { x : third_bar_x_position,
	y : d.third_savings_y_position };
	startpoint2 = { x : third_bar_x_position,
	y : d.third_savings_y_position + post_bar_height_savings(d) };
	endpoint2 = { x : post_bar_x_position + bar_width,
	y : d.post_savings_y_position + post_bar_height_savings(d) };
	return getSanKeyPath(startpoint, endpoint, startpoint2, endpoint2);
	}
	});


	// Code to draw legends, popups, and so forth.

	// A function to draw a curly bracket path. Returns a path for
	// a curly brace between x1,y1 and x2,y2, w pixels wide
	// and q factor, .5 is normal, higher q = more expressive bracket.

	function makeCurlyBraceHalf(x1, y1, x2, y2, thickness, curviness) {
	// The midpoint between the target and the start point is where the linear
	// segment will live. This will be the "midpoint" of the line (in terms of
	// thickness.
	linear_segment_x = d3.interpolateNumber(x1, x2)(0.5);
	linear_segment_x_right = linear_segment_x + thickness / 2;
	linear_segment_x_left = linear_segment_x - thickness / 2;
	// The y position of the start of the linear segment is dictated by the
	// curviness parameter.
	linear_segment_start_y = d3.interpolateNumber(y1, y2)(curviness);
	linear_segment_end_y = d3.interpolateNumber(y1, y2)(1-curviness);

	linear_segment_right_start = { x : linear_segment_x_right,
	y : linear_segment_start_y };
	linear_segment_right_end = { x : linear_segment_x_right,
	y : linear_segment_end_y };
	linear_segment_left_start = { x : linear_segment_x_left,
	y: linear_segment_end_y };
	linear_segment_left_end = { x : linear_segment_x_left,
	y: linear_segment_start_y };

	// Now interpolating spline points for the angled segments are needed.
	interp_right = {
	x : d3.interpolateNumber(x1, linear_segment_x_right)(1-curviness),
	y : d3.interpolateNumber(y1, linear_segment_start_y)(curviness) }
	interp_left = {
	x : d3.interpolateNumber(x1, linear_segment_x_left)(1-curviness),
	y : d3.interpolateNumber(y1, linear_segment_start_y)(curviness) }

	start_spline_right = { x : x1, y : y1 }
	end_spline_right = { x : linear_segment_x_right, y : linear_segment_start_y }

	start_spline_left = { x : linear_segment_x_left, y : linear_segment_start_y }
	end_spline_left = start_spline_right;

	spline_right = makePath( [start_spline_right, interp_right, end_spline_right ], true);
	spline_left = makePath( [start_spline_left, interp_left, end_spline_left ], false)

	interp_target_right = {
	x : d3.interpolateNumber( linear_segment_x_right, x2 )(curviness),
	y : d3.interpolateNumber( linear_segment_end_y, y2 )(1-curviness),
	}
	interp_target_left = {
	x : d3.interpolateNumber( linear_segment_x_left, x2 )(curviness),
	y : d3.interpolateNumber( linear_segment_end_y, y2) (1-curviness)
	}
	lower_spline_right = makePath(
	[ linear_segment_right_end , interp_target_right, { x : x2, y: y2 }], false);
	lower_spline_left = makePath(
	[{ x: x2, y: y2 }, interp_target_left, linear_segment_left_start ])

	linear_segment_right = makeLines(
	[ linear_segment_right_start, linear_segment_right_end ]);
	linear_segment_left = makeLines(
	[ linear_segment_left_start, linear_segment_left_end ] );

	result = spline_right + linear_segment_right + lower_spline_right +
	lower_spline_left + linear_segment_left + spline_left;
	return result; // spline_right + linear_segment_right + spline_left;
	}

	function makeCurlyBrace(x1,y1,x2,y2,target_x, target_y, thickness, curviness) {
	upper_brace = makeCurlyBraceHalf(x1, y1, target_x, target_y, thickness, curviness);
	lower_brace = makeCurlyBraceHalf(x2, y2, target_x, target_y, thickness, curviness);
	return upper_brace + lower_brace;
	}

	svg.append("g")
	.append("path")
	.attr({
	class: "curly_bracket",
	d: makeCurlyBrace(third_bar_x_position + bar_width + 5, 0, third_bar_x_position
	+ bar_width + 5, total_savings_height,
	third_bar_x_position + bar_width + 30, d3.interpolateNumber(
	0, total_savings_height)(0.5), 3, 0.3)
	});

	svg.append("g")
	.append("text")
	.attr({
	class: "percentage_savings",
	x : third_bar_x_position + bar_width + 35,
	y : d3.interpolateNumber(0, total_savings_height)(0.5) + (big_font_size/2)} )
	.style("font-size", big_font_size + "pt")
	.style("font-family", "sans-serif")
	.text( function(d) { return total_savings_percentage + "% saved" } );



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