jessihamel/index.html

## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<style>
.button {
  padding: 5px;
  color: #000;
  position: absolute;
  left: 0;
  top: 0;
  font: 20px sans-serif;
}
.disable{
  pointer-events: none;
  opacity: 0.5;
}
.viz{
  width: 960px;
  height: 500px;
}
</style>
<body>
  <div class='viz'></div>
  <button class='button' id='grow'>Click me!</button>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
  <script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
  <script>

  var colors = ['#743720','#874D37','#826B42','#90A369','#ABBF83'];
  var colorrange = d3.scale.linear().domain([1,3,5,7,9]).range(colors);

  var margin = {top: 20, right: 10, bottom: 20, left: 10};
  var vizWidth = $('.viz').width();
  var width = vizWidth - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  var svg = d3.select('.viz').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + (width/2 - 40) + ',' + (height - 100) + ')')
    .attr('class', 'rect-1');

  var squareSide = 100;
  var data = [{w: squareSide, h: squareSide, tx: 0, ty: 0, r: 0}];

  //add the first square
  var rects = svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', 0)
    .attr('y', 0)
    .attr('height', function(d) {return d.w})
    .attr('width', function(d) {return d.h})
    .attr('transform', function(d) { return 'rotate(' + d.r + ') translate(' + d.tx + ',' + d.ty + ')'})
    .attr('fill', colorrange(1));

  var rectIndex = 1;
  var addSquares = function(){
    var data = d3.selectAll('.rect-' + rectIndex + ' rect').data();
    var rectColor = colorrange(rectIndex + 1);

    data.forEach(function(rectangle){
      var s0 = rectangle;
      var s1 = {};
      var s2 = {};

      s1.w = s0.w/(Math.sqrt(2));
      s1.h = s0.h/(Math.sqrt(2));
      s1.tx = -(s0.h/2);
      s1.ty = -(s0.h/2);
      s1.r = -45;

      s2.w = s1.w;
      s2.h = s1.h;
      s2.tx = s0.h;
      s2.ty = -s0.h;
      s2.r = 45;

      var newData = [];
      newData.push(s1, s2);

      var rectGroup = d3.selectAll('.rect-' + rectIndex).selectAll('g')
        .data(newData)
        .enter()
        .append('g')
        .attr('class', 'rect-' + (rectIndex + 1))
        .attr('transform', function(d) { return 'translate(' + d.tx + ',' + d.ty + ') rotate(' + d.r + ')';})
        .append('rect')
        .attr('x', 0)
        .attr('y', 0)
        .attr('height', function(d) {return d.w})
        .attr('width', function(d) {return d.h})
        .attr('fill', rectColor);
      })

      rectIndex ++;
    }

    $('#grow').click(function() {
      if (rectIndex <= 9) {
        addSquares();
      } else {
        $('#grow').addClass('disable');
      }
    });
  </script>
 </body>
</html>
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<style>
	.button {
	padding: 5px;
	color: #000;
	position: absolute;
	left: 0;
	top: 0;
	font: 20px sans-serif;
	}
	.disable{
	pointer-events: none;
	opacity: 0.5;
	}
	.viz{
	width: 960px;
	height: 500px;
	}
	</style>
	<body>
	<div class='viz'></div>
	<button class='button' id='grow'>Click me!</button>

	<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
	<script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
	<script>

	var colors = ['#743720','#874D37','#826B42','#90A369','#ABBF83'];
	var colorrange = d3.scale.linear().domain([1,3,5,7,9]).range(colors);

	var margin = {top: 20, right: 10, bottom: 20, left: 10};
	var vizWidth = $('.viz').width();
	var width = vizWidth - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;
	var svg = d3.select('.viz').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom)
	.append('g')
	.attr('transform', 'translate(' + (width/2 - 40) + ',' + (height - 100) + ')')
	.attr('class', 'rect-1');

	var squareSide = 100;
	var data = [{w: squareSide, h: squareSide, tx: 0, ty: 0, r: 0}];

	//add the first square
	var rects = svg.selectAll('rect')
	.data(data)
	.enter()
	.append('rect')
	.attr('x', 0)
	.attr('y', 0)
	.attr('height', function(d) {return d.w})
	.attr('width', function(d) {return d.h})
	.attr('transform', function(d) { return 'rotate(' + d.r + ') translate(' + d.tx + ',' + d.ty + ')'})
	.attr('fill', colorrange(1));

	var rectIndex = 1;
	var addSquares = function(){
	var data = d3.selectAll('.rect-' + rectIndex + ' rect').data();
	var rectColor = colorrange(rectIndex + 1);

	data.forEach(function(rectangle){
	var s0 = rectangle;
	var s1 = {};
	var s2 = {};

	s1.w = s0.w/(Math.sqrt(2));
	s1.h = s0.h/(Math.sqrt(2));
	s1.tx = -(s0.h/2);
	s1.ty = -(s0.h/2);
	s1.r = -45;

	s2.w = s1.w;
	s2.h = s1.h;
	s2.tx = s0.h;
	s2.ty = -s0.h;
	s2.r = 45;

	var newData = [];
	newData.push(s1, s2);

	var rectGroup = d3.selectAll('.rect-' + rectIndex).selectAll('g')
	.data(newData)
	.enter()
	.append('g')
	.attr('class', 'rect-' + (rectIndex + 1))
	.attr('transform', function(d) { return 'translate(' + d.tx + ',' + d.ty + ') rotate(' + d.r + ')';})
	.append('rect')
	.attr('x', 0)
	.attr('y', 0)
	.attr('height', function(d) {return d.w})
	.attr('width', function(d) {return d.h})
	.attr('fill', rectColor);
	})

	rectIndex ++;
	}

	$('#grow').click(function() {
	if (rectIndex <= 9) {
	addSquares();
	} else {
	$('#grow').addClass('disable');
	}
	});
	</script>
	</body>
	</html>