TheMcMurder · June 16, 2015 23:39
diff --git a/readme.md b/readme.md
diff --git a/app.js b/app.js

 var data =[45, 10];

 init();


 //creating the svg so I can draw objects on it
 var svg = d3.select("body").append("svg")
  .attr("width", 500)
  .attr("height", 5000);

 //createCirclesNotBound();


 var circleArray;
 bindData(data);

 var duration = 800;

 function enter() {
  //**********************************************************************************
  // Enter: all pieces of data that do not have a node to bind to.
  // If there are already circles ('nodes') there would have to be more
  // data points than nodes in our dataset to have enter run at all;
  //**********************************************************************************
  refreshArray();
  circleArray.enter()
    .append("circle")
    .attr("cx", 100)
    .attr("cy", function(d, i){
      return (i + 1)*100;
    })
    .attr("fill", "#78AB46")
    .attr('r', 0)
    .transition()
    .duration(duration)
    .attr("r", 30);

  refreshArray();
 }

 function update() {
  //**********************************************************************************
  // Update: Every node that is bound to data, in this case that is everything we've
  // entered and everything that has just been bound from the .data(data) bind.
  //**********************************************************************************
  refreshArray();
  circleArray
    .transition()
    .duration(duration)
    .style('fill', 'steelblue')
    .attr('r', function (d){
      return d;
    });

  refreshArray();
 }

 function exit() {
  //**********************************************************************************
  // Exit: Every node ('circles') that exists in your selection that you don't have
  // bound data to
  //**********************************************************************************
  refreshArray();
  circleArray.exit()
    .transition().duration(duration)
    .style("fill", "red")
    .transition().duration(duration).delay(duration)
    .attr("r", 0)
    .transition()
    .remove();

  refreshArray();

 }

 function changeData() {
  var random = ((Math.random() * 8) + 1);
  data = [];
  for (var i = 0; i < random; i++) {
    data.push(Math.floor((Math.random() * 45) + 10));
  }

  displayData(data);
  bindData(data);

 }

 function bindData(data){
  circleArray = svg.selectAll("circle")
    .data(data);
 }

 function removeAll() {
  svg.selectAll("circle").remove();
  refreshArray();
 }

 function refreshArray() {
  bindData(data);
 }

 function init() {
  displayData(data);
 }

 function displayData(data){
  document.querySelectorAll('span')[0].innerHTML = data;
 }


diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Enter Update Exit </title>
 </head>
 <body>
 <div>
  <br/>
  <br/>
  <span></span>
  <br/>
  <br/>
  <button onclick="changeData()">Change and Show Data</button>
  <button onclick="enter()">Enter</button>
  <button onclick="update()">Update</button>
  <button onclick="exit()">Exit</button>
  <button onclick="removeAll()">Remove All</button>

 </div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
 <script src="app.js"></script>


 </body>
 </html>

	var data =[45, 10];

	init();


	//creating the svg so I can draw objects on it
	var svg = d3.select("body").append("svg")
	.attr("width", 500)
	.attr("height", 5000);

	//createCirclesNotBound();


	var circleArray;
	bindData(data);

	var duration = 800;

	function enter() {
	//**********************************************************************************
	// Enter: all pieces of data that do not have a node to bind to.
	// If there are already circles ('nodes') there would have to be more
	// data points than nodes in our dataset to have enter run at all;
	//**********************************************************************************
	refreshArray();
	circleArray.enter()
	.append("circle")
	.attr("cx", 100)
	.attr("cy", function(d, i){
	return (i + 1)*100;
	})
	.attr("fill", "#78AB46")
	.attr('r', 0)
	.transition()
	.duration(duration)
	.attr("r", 30);

	refreshArray();
	}

	function update() {
	//**********************************************************************************
	// Update: Every node that is bound to data, in this case that is everything we've
	// entered and everything that has just been bound from the .data(data) bind.
	//**********************************************************************************
	refreshArray();
	circleArray
	.transition()
	.duration(duration)
	.style('fill', 'steelblue')
	.attr('r', function (d){
	return d;
	});

	refreshArray();
	}

	function exit() {
	//**********************************************************************************
	// Exit: Every node ('circles') that exists in your selection that you don't have
	// bound data to
	//**********************************************************************************
	refreshArray();
	circleArray.exit()
	.transition().duration(duration)
	.style("fill", "red")
	.transition().duration(duration).delay(duration)
	.attr("r", 0)
	.transition()
	.remove();

	refreshArray();

	}

	function changeData() {
	var random = ((Math.random() * 8) + 1);
	data = [];
	for (var i = 0; i < random; i++) {
	data.push(Math.floor((Math.random() * 45) + 10));
	}

	displayData(data);
	bindData(data);

	}

	function bindData(data){
	circleArray = svg.selectAll("circle")
	.data(data);
	}

	function removeAll() {
	svg.selectAll("circle").remove();
	refreshArray();
	}

	function refreshArray() {
	bindData(data);
	}

	function init() {
	displayData(data);
	}

	function displayData(data){
	document.querySelectorAll('span')[0].innerHTML = data;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Enter Update Exit </title>
	</head>
	<body>
	<div>
	<br/>
	<br/>
	<span></span>
	<br/>
	<br/>
	<button onclick="changeData()">Change and Show Data</button>
	<button onclick="enter()">Enter</button>
	<button onclick="update()">Update</button>
	<button onclick="exit()">Exit</button>
	<button onclick="removeAll()">Remove All</button>

	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script src="app.js"></script>


	</body>
	</html>