milkbread · July 6, 2013 14:09
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Testmap</title>
  <meta charset="utf-8" />
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
 </style>
 </head>
 <body>
  <script>
  var width = 960,
    height = 500;

  var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on('mousedown',action)
  .append("g")
    //.attr("transform", "translate(32," + (height / 2) + ")")

  //Let's check out how all the funny enter(), update and exit() stuff of D3 works
  //...thank you Mike for the tutorial! http://bl.ocks.org/mbostock/3808234

  //make some dummy data, for us: an array of random color values (0-256)
  var circleData0 = []
    for (var i=0;i<20;i++){
      var randomColor = Math.floor(Math.random() * 256);
      circleData0.push(randomColor)      
    }
  //do the action initially
  action();
    
  function action(){  

    //get a random part of the dummy data
    var circleData = circleData0.slice(0, Math.floor(Math.random() * 21))
    //sort the array, because we want to visualise the order ... try it without, the circles won't have a order and terefore, do not move to the right position!
    circleData = circleData.sort(function(a,b){return b-a;});
    //console.log(circleData)

    //0. Now we do all the stuff on the selections...I think order does matter!
    
    //1. JOIN
    //make an initial selection of the svg-elements, that you want to work with AND bind your data to it
    //'mystical' function: .data()
    var circles = svg.selectAll('circle').data(circleData, function(d) { return d; });  
    //... !!!the elements do not move from their previous position when you just add the data with: .data(circleData)!!!

    //2. UPDATE
    //now, that we have all existing elements...we can update them
    //no 'mystical' function...just update by changing values
    circles.transition().duration(1000)   //let it look smooth
        .attr("stroke", 'red')           //show, that it was updated, by adding a red stroke
        .attr("cx", function(d,i){return i*45});  //the element has a new position within the ordered data, so this has to be upated

    //3. ENTER
    //afterwards, you can add new svg-elements for each new data-element to the selection
    //'mystical' function: .enter()
    circles.enter().append("circle")  //add a circle per new data-element
      .style("fill", function(d){return 'rgb(' + d+ ',' + d+','+d+')'})
      .attr("cx", function(d,i){return i*45})
      .attr("cy", 0)          //initial position                
      .attr("r", 20)          //radius of the circle...this will be constant
      .transition()           //let it move smoothly from 'initial' to the 'final' position
        .duration(1000)
        .attr("cy", 50);    //move from 'initial position' to its final value

    //4. ENTER+UPDATE
    //maybe you want to make changes on the 'updated' AND the 'new' svg-elements...than you can do this after the 3rd section (.enter()) 
    //no 'mystical' function...just update by changing values
    //circles.attr("stroke-width", '50');
      
    //5. EXIT
    //finally, we can change the svg-elements of the removed data-elements AND remove them afterwards completely
    //'mystical' function: .exit() ( AND .remove() ... but this is more comparable to .attr() or .style())
    circles.exit()
      .transition()
        .duration(1000)
        .attr("cy", 150)      //move downwards while disappearing
        .style("fill", "red") //shines like the sun
        .style("opacity", 1e-6)//...and disapears
      .remove();              //remove completely
  
  }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Testmap</title>
	<meta charset="utf-8" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	</style>
	</head>
	<body>
	<script>
	var width = 960,
	height = 500;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.on('mousedown',action)
	.append("g")
	//.attr("transform", "translate(32," + (height / 2) + ")")

	//Let's check out how all the funny enter(), update and exit() stuff of D3 works
	//...thank you Mike for the tutorial! http://bl.ocks.org/mbostock/3808234

	//make some dummy data, for us: an array of random color values (0-256)
	var circleData0 = []
	for (var i=0;i<20;i++){
	var randomColor = Math.floor(Math.random() * 256);
	circleData0.push(randomColor)
	}
	//do the action initially
	action();

	function action(){

	//get a random part of the dummy data
	var circleData = circleData0.slice(0, Math.floor(Math.random() * 21))
	//sort the array, because we want to visualise the order ... try it without, the circles won't have a order and terefore, do not move to the right position!
	circleData = circleData.sort(function(a,b){return b-a;});
	//console.log(circleData)

	//0. Now we do all the stuff on the selections...I think order does matter!

	//1. JOIN
	//make an initial selection of the svg-elements, that you want to work with AND bind your data to it
	//'mystical' function: .data()
	var circles = svg.selectAll('circle').data(circleData, function(d) { return d; });
	//... !!!the elements do not move from their previous position when you just add the data with: .data(circleData)!!!

	//2. UPDATE
	//now, that we have all existing elements...we can update them
	//no 'mystical' function...just update by changing values
	circles.transition().duration(1000) //let it look smooth
	.attr("stroke", 'red') //show, that it was updated, by adding a red stroke
	.attr("cx", function(d,i){return i*45}); //the element has a new position within the ordered data, so this has to be upated

	//3. ENTER
	//afterwards, you can add new svg-elements for each new data-element to the selection
	//'mystical' function: .enter()
	circles.enter().append("circle") //add a circle per new data-element
	.style("fill", function(d){return 'rgb(' + d+ ',' + d+','+d+')'})
	.attr("cx", function(d,i){return i*45})
	.attr("cy", 0) //initial position
	.attr("r", 20) //radius of the circle...this will be constant
	.transition() //let it move smoothly from 'initial' to the 'final' position
	.duration(1000)
	.attr("cy", 50); //move from 'initial position' to its final value

	//4. ENTER+UPDATE
	//maybe you want to make changes on the 'updated' AND the 'new' svg-elements...than you can do this after the 3rd section (.enter())
	//no 'mystical' function...just update by changing values
	//circles.attr("stroke-width", '50');

	//5. EXIT
	//finally, we can change the svg-elements of the removed data-elements AND remove them afterwards completely
	//'mystical' function: .exit() ( AND .remove() ... but this is more comparable to .attr() or .style())
	circles.exit()
	.transition()
	.duration(1000)
	.attr("cy", 150) //move downwards while disappearing
	.style("fill", "red") //shines like the sun
	.style("opacity", 1e-6)//...and disapears
	.remove(); //remove completely

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