16.each-transition

Built with blockbuilder.org

This is an example copied from Interactive Data Visualization for the web.

I updated it with d3.v4.

forked from EmbraceLife's block: 13.click-delay-transition

forked from EmbraceLife's block: 15.x-y-axis transition

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
    
		<title>D3: Using each() to specify two transitions in sequence</title>
    
		<script src="https://d3js.org/d3.v4.min.js"></script>
		
    <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>
	
		<script type="text/javascript">

var w = 500;
			var h = 300;
      var margin = {top: 30, bottom: 30, left: 30, right: 60};
      var width = w - margin.left - margin.right,
          height = h - margin.top - margin.bottom;
      
			var padding = 30;

var dataset = [];										
			var numDataPoints = 50;										
			var maxRange = Math.random() * 1000;			
			for (var i = 0; i < numDataPoints; i++) {	
				var newNumber1 = Math.floor(Math.random() * maxRange);
				var newNumber2 = Math.floor(Math.random() * maxRange);
        
				dataset.push([newNumber1, newNumber2]);					
			}

var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h)
                    .append("g")
                    .attr("transform", "translate(" + margin.left +", " + margin.top + ")");

var xScale = d3.scaleLinear()
                       .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                       .range([0, width]);

var yScale = d3.scaleLinear()
                       .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                       .range([height, 0]);

var xAxis = d3.axisBottom(xScale)
							  .ticks(5);

var yAxis = d3.axisLeft(yScale)
							  .ticks(5);

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);

svg.append("g")
				.attr("class", "x axis")
				.attr("transform", "translate(0," + height + ")")
				.call(xAxis);

svg.append("g")
				.attr("class", "y axis")
				.call(yAxis);

d3.select("p")
				.on("click", function() {

var numValues = dataset.length;						 		
					var maxRange = Math.random() * 1000;					
					dataset = [];  						 				
        
					for (var i = 0; i < numValues; 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)
// 						 .attr("fill", "magenta")
// 						 .attr("r", 7)
					   .transition()
					   .duration(1000)
// in v4, no more "start" and "end", just callback func as arg ---------------     
					   .each(function(d, i) { // d is each row of dataset, i is index
						   d3.select(this)
						     .attr("fill", "steelblue")
               	 .attr("opacity", 0.1)
						     .attr("r", i);
					   })
					   .attr("cx", function(d) {
					   		return xScale(d[0]);
					   })
					   .attr("cy", function(d) {
					   		return yScale(d[1]);
					   })
					   .transition()
					   .duration(1000)
               .attr("r", 2)
               .attr("opacity", 1);

svg.select(".x.axis")
				    	.transition()
				    	.duration(1000)
						.call(xAxis);
					
				
					svg.select(".y.axis")
				    	.transition()
				    	.duration(1000)
						.call(yAxis);

});

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

https://d3js.org/d3.v4.min.js