TheMcMurder/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    This example demonstrates d3js: Enter, Update, Exit features. To see an editable version go to jsfiddle.

  
## index.html
<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
		<title>Enter Exit Update</title>
	</head>
	<body>


		<script type="text/javascript">

			var data =[45, 10]

			var data2 =[45, 10, 20, 25, 30, 45]


			/*The purpose of this JSfiddle is to show how enter, update, and exit works in d3js.  The data values above are the data. The image had three manually created black circles.  My update will resize them to the appropriate size (based on data) and change their color to blue.  All newly drawn objects will be turned green and any object that is exiting will be turned red.

			The transitions are delayed to make it easier to see.  No delay is needed for this to work.

			*/

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

		    //creating initial circle objects
			var circle1 = svg.append("circle")
				.attr("cx", 100)
				.attr("cy", 100)
				.attr("r", 25)
				.style("fill", "#00FFFF")

		    // another circle object
			var circle2 = svg.append("circle")
				.attr("cx", 100)
				.attr("cy", 200)
				.attr("r", 25)
				.style("fill", "#2E0854")

		    // another circle object
			var circle3 = svg.append("circle")
				.attr("cx", 100)
				.attr("cy", 300)
				.attr("r", 25)
				.style("fill", "pink")

		    setTimeout( function(){
		    	enter_update_exit(data)
		    }, 2500 )


		    setTimeout( function(){
		    	enter_update_exit(data2)
		    }, 10000 )

		    setTimeout( function(){
		    	enter_update_exit(data)
		    }, 15000 )


		    function enter_update_exit (data){


		    	var circle_array = svg.selectAll("circle")
		    		.data(data);


				//**********************************************************************************
		    	// Enter: all pieces of data that do not have a node to bind to. In this case where
		    	// there are already three circles ('nodes') there would have to be more than 3
		    	// data points in our dataset to have enter run at all;
		    	//**********************************************************************************
		  		circle_array.enter()
		  			.append("circle")
		    		.attr("cx", 100)
		            .attr("cy", function(d, i){
		                return (i + 1)*100
		            })
					.attr("r", 0)
					.attr("fill", "#78AB46")
		        	.transition()
		        	.duration(1500)
		        	.attr("r", function (d){return d;});
		        //**********************************************************************************
		        // 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.
		        //**********************************************************************************

			    circle_array.transition()
			    .duration(1500)
			    .delay(1500)
			    .style('fill', 'steelblue')
			    .attr('r', function (d){
		    		return d;
		    	});

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


		</script>

	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<title>Enter Exit Update</title>
	</head>
	<body>


	<script type="text/javascript">

	var data =[45, 10]

	var data2 =[45, 10, 20, 25, 30, 45]




	/*The purpose of this JSfiddle is to show how enter, update, and exit works in d3js. The data values above are the data. The image had three manually created black circles. My update will resize them to the appropriate size (based on data) and change their color to blue. All newly drawn objects will be turned green and any object that is exiting will be turned red.

	The transitions are delayed to make it easier to see. No delay is needed for this to work.

	*/

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

	//creating initial circle objects
	var circle1 = svg.append("circle")
	.attr("cx", 100)
	.attr("cy", 100)
	.attr("r", 25)
	.style("fill", "#00FFFF")

	// another circle object
	var circle2 = svg.append("circle")
	.attr("cx", 100)
	.attr("cy", 200)
	.attr("r", 25)
	.style("fill", "#2E0854")

	// another circle object
	var circle3 = svg.append("circle")
	.attr("cx", 100)
	.attr("cy", 300)
	.attr("r", 25)
	.style("fill", "pink")

	setTimeout( function(){
	enter_update_exit(data)
	}, 2500 )


	setTimeout( function(){
	enter_update_exit(data2)
	}, 10000 )

	setTimeout( function(){
	enter_update_exit(data)
	}, 15000 )



	function enter_update_exit (data){



	var circle_array = svg.selectAll("circle")
	.data(data);


	//**********************************************************************************
	// Enter: all pieces of data that do not have a node to bind to. In this case where
	// there are already three circles ('nodes') there would have to be more than 3
	// data points in our dataset to have enter run at all;
	//**********************************************************************************
	circle_array.enter()
	.append("circle")
	.attr("cx", 100)
	.attr("cy", function(d, i){
	return (i + 1)*100
	})
	.attr("r", 0)
	.attr("fill", "#78AB46")
	.transition()
	.duration(1500)
	.attr("r", function (d){return d;});
	//**********************************************************************************
	// 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.
	//**********************************************************************************

	circle_array.transition()
	.duration(1500)
	.delay(1500)
	.style('fill', 'steelblue')
	.attr('r', function (d){
	return d;
	});

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






	</script>

	</body>
	</html>