stevekinney/jsbin.senej.css

## jsbin.senej.css
.axis path, .axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

## jsbin.senej.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <p><button type="button" id="next-round">Next Round</button></p>
  <svg width="800"></svg><br>
</body>
</html>

## jsbin.senej.js
var svg = d3.select('svg');
var color = d3.rgb('#005000');

// Data defaults.
var reserveRatio = 0.2;
var baseAmount = 100000;
var data = [baseAmount];

// Chart Settings
var margin = 20;
var width = 750;
var startingMaximum = baseAmount * 5;

// Add an event to the "Next Round" button.
document.getElementById('next-round')
  .addEventListener('click', function (e) {
    e.preventDefault();
    data.push(data[data.length - 1] * (1 - reserveRatio));
    updateChart();
  });

// Set up the scale with some sensible defaults.
var scale = d3.scale.linear()
  .domain([0,startingMaximum])
  .range([0, width]);

// If the total money supply exceeds the current scale,
// then extend the scale.
function updateScale() {
  var sum = data.reduce(function (p, c) {
    return p + c;
  }, 0);
  if (sum > startingMaximum) {
    scale = d3.scale.linear()
    .domain([0,sum])
    .range([0, width]);
  }
  return scale();
}

// Define the x-axis.
var xAxis = d3.svg.axis()
  .scale(scale)
  .orient('bottom');

// Append the x-axis to the chart.
svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(20,130)')
  .call(xAxis);

function updateChart() {
  updateScale();
  var startingPoint = 0;
  var rects = svg.selectAll('rect');

  // Update the existing rectangles.
  rects.data(data)
    .transition()
      .duration(200)
      .ease("linear")
    .attr({
      x: function (d, i) {
        console.log(this.x);
        var currentPosition = startingPoint;
        startingPoint += scale(d);
        return currentPosition + margin;
      },
      width: function (d, i) {
        return scale(d);
      }
    });

  // Enter new rectangles.
  rects
    .data(data)
    .enter()
    .append('rect')
      .attr({
        x: function (d, i) {
          var currentPosition = startingPoint;
          startingPoint += scale(d);
          return currentPosition + margin;
        },
        y: '10px',
        width: function (d, i) {
          return scale(d);
        },
        height: '115px',
        fill: function (d, i) {
          return color.brighter(i/3).toString();
        }
      });

  // Adjust the scale on the x-axis and update it.
  xAxis.scale(scale);
  svg.selectAll("g.axis")
    .call(xAxis);
}

updateChart();
	.axis path, .axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<p><button type="button" id="next-round">Next Round</button></p>
	<svg width="800"></svg><br>
	</body>
	</html>
	var svg = d3.select('svg');
	var color = d3.rgb('#005000');

	// Data defaults.
	var reserveRatio = 0.2;
	var baseAmount = 100000;
	var data = [baseAmount];

	// Chart Settings
	var margin = 20;
	var width = 750;
	var startingMaximum = baseAmount * 5;

	// Add an event to the "Next Round" button.
	document.getElementById('next-round')
	.addEventListener('click', function (e) {
	e.preventDefault();
	data.push(data[data.length - 1] * (1 - reserveRatio));
	updateChart();
	});

	// Set up the scale with some sensible defaults.
	var scale = d3.scale.linear()
	.domain([0,startingMaximum])
	.range([0, width]);

	// If the total money supply exceeds the current scale,
	// then extend the scale.
	function updateScale() {
	var sum = data.reduce(function (p, c) {
	return p + c;
	}, 0);
	if (sum > startingMaximum) {
	scale = d3.scale.linear()
	.domain([0,sum])
	.range([0, width]);
	}
	return scale();
	}

	// Define the x-axis.
	var xAxis = d3.svg.axis()
	.scale(scale)
	.orient('bottom');

	// Append the x-axis to the chart.
	svg.append('g')
	.attr('class', 'axis')
	.attr('transform', 'translate(20,130)')
	.call(xAxis);

	function updateChart() {
	updateScale();
	var startingPoint = 0;
	var rects = svg.selectAll('rect');

	// Update the existing rectangles.
	rects.data(data)
	.transition()
	.duration(200)
	.ease("linear")
	.attr({
	x: function (d, i) {
	console.log(this.x);
	var currentPosition = startingPoint;
	startingPoint += scale(d);
	return currentPosition + margin;
	},
	width: function (d, i) {
	return scale(d);
	}
	});

	// Enter new rectangles.
	rects
	.data(data)
	.enter()
	.append('rect')
	.attr({
	x: function (d, i) {
	var currentPosition = startingPoint;
	startingPoint += scale(d);
	return currentPosition + margin;
	},
	y: '10px',
	width: function (d, i) {
	return scale(d);
	},
	height: '115px',
	fill: function (d, i) {
	return color.brighter(i/3).toString();
	}
	});

	// Adjust the scale on the x-axis and update it.
	xAxis.scale(scale);
	svg.selectAll("g.axis")
	.call(xAxis);
	}

	updateChart();