yxkelan/gist:6142799

## gistfile1.html
<!DOCTYPE html>
<html>
  <head>
<script src="http://d3js.org/d3.v3.min.js"></script>
		<meta charset="utf-8">
		<title>D3: Using each() to specify two transitions in sequence</title>
        		<style type="text/css">

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

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

		</style>
	</head>
	<body>

		<p>Click on this text to update the chart with new data values as many times as you like!</p>

</body>
</html>

## gistfile2.js
var w=500, h=300, padding=30;

var dataset = [];

var numberDataPoints = 50,
    maxRange = Math.random()*1000;

for(var i = 0; i < numberDataPoints; i++){

  var newNumber1 = Math.floor(Math.random() * maxRange);
  var newNumber2 = Math.floor(Math.random()* maxRange);

  dataset.push([newNumber1, newNumber2]);
}

var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){return d[0];})])
.range([padding, w-padding*2]);


var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){return d[1];})])
.range([h-padding, padding]);

var xAxis = d3.svg.axis()
              .scale(xScale)
              .orient("bottom")
              .ticks(5);

var yAxis =d3.svg.axis()
              .scale(yScale)
              .orient("left")
              .ticks(5);

//Create SVG elements

var svg = d3.select('body').append('svg')
          .attr('width',w)
          .attr('height',h);

//Create circles.
svg.selectAll("circle")
    .data(dataset)
    .enter().append('circle')
.attr('cx',function(d){ return xScale(d[0]);})
.attr('cy',function(d){ return yScale(d[1]);}
).attr('r', 2);


// Create X axis
svg.append('g')
   .attr('class', "x axis")
   .attr('transform',"translate(0, "+(h-padding)+")")
   .call(xAxis);

svg.append('g')
   .attr('class', 'y axis')
   .attr('transform',"translate("+ padding +",0)")
   .call(yAxis);

d3.select("p")
.on("click", function(){
    var numValues = dataset.length;
  //It's much better, because it's much accurate and safe.
  //Instead of using numberDataPoints.
    var maxRanges = Math.random * 1000;
    dataset = [];

    for(var i = 0; i < numberDataPoints; i++){

    var newNumber1 = Math.floor(Math.random() * maxRange);
    var newNumber2 = Math.floor(Math.random()* maxRange);

    dataset.push([newNumber1, newNumber2]);
}

  xScale.domain([0, d3.max(dataset, function(d){ return d[0];})
                ]);

  yScale.domain([0, d3.max(dataset, function(d){ return d[1];})]);
    svg.selectAll("circle").data(dataset)
     .transition()
     .duration(1000)
  .each("start", function(){
      d3.select(this)
      .attr('fill','magenta')
      .attr('r',7);
  }).attr('cx', function(d){
    return xScale(d[0]);
  }).attr('cy', function(d){
    return yScale(d[1]);
  }).transition().duration(1000).attr('fill','black')
  .attr('r',2);


svg.select('.x.axis').transition()
     .duration('1000').call(xAxis);

svg.select('.y.axis').transition()
    .duration('1000').call(yAxis);

});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<meta charset="utf-8">
	<title>D3: Using each() to specify two transitions in sequence</title>
	<style type="text/css">

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

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

	</style>
	</head>
	<body>

	<p>Click on this text to update the chart with new data values as many times as you like!</p>

	</body>
	</html>
	var w=500, h=300, padding=30;

	var dataset = [];

	var numberDataPoints = 50,
	maxRange = Math.random()*1000;

	for(var i = 0; i < numberDataPoints; i++){

	var newNumber1 = Math.floor(Math.random() * maxRange);
	var newNumber2 = Math.floor(Math.random()* maxRange);

	dataset.push([newNumber1, newNumber2]);
	}

	var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){return d[0];})])
	.range([padding, w-padding*2]);


	var yScale = d3.scale.linear()
	.domain([0, d3.max(dataset, function(d){return d[1];})])
	.range([h-padding, padding]);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(5);

	var yAxis =d3.svg.axis()
	.scale(yScale)
	.orient("left")
	.ticks(5);

	//Create SVG elements

	var svg = d3.select('body').append('svg')
	.attr('width',w)
	.attr('height',h);

	//Create circles.
	svg.selectAll("circle")
	.data(dataset)
	.enter().append('circle')
	.attr('cx',function(d){ return xScale(d[0]);})
	.attr('cy',function(d){ return yScale(d[1]);}
	).attr('r', 2);


	// Create X axis
	svg.append('g')
	.attr('class', "x axis")
	.attr('transform',"translate(0, "+(h-padding)+")")
	.call(xAxis);

	svg.append('g')
	.attr('class', 'y axis')
	.attr('transform',"translate("+ padding +",0)")
	.call(yAxis);

	d3.select("p")
	.on("click", function(){
	var numValues = dataset.length;
	//It's much better, because it's much accurate and safe.
	//Instead of using numberDataPoints.
	var maxRanges = Math.random * 1000;
	dataset = [];

	for(var i = 0; i < numberDataPoints; i++){

	var newNumber1 = Math.floor(Math.random() * maxRange);
	var newNumber2 = Math.floor(Math.random()* maxRange);

	dataset.push([newNumber1, newNumber2]);
	}

	xScale.domain([0, d3.max(dataset, function(d){ return d[0];})
	]);

	yScale.domain([0, d3.max(dataset, function(d){ return d[1];})]);
	svg.selectAll("circle").data(dataset)
	.transition()
	.duration(1000)
	.each("start", function(){
	d3.select(this)
	.attr('fill','magenta')
	.attr('r',7);
	}).attr('cx', function(d){
	return xScale(d[0]);
	}).attr('cy', function(d){
	return yScale(d[1]);
	}).transition().duration(1000).attr('fill','black')
	.attr('r',2);


	svg.select('.x.axis').transition()
	.duration('1000').call(xAxis);

	svg.select('.y.axis').transition()
	.duration('1000').call(yAxis);

	});