14.click-scatter-transition

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

I updated it with d3.v4.

<!DOCTYPE html>
<html lang="en">
	<head> 
		<meta charset="utf-8">
    
		<title>D3: Transitioning points to randomized values</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 margin = {top: 20, right: 10, bottom: 20, left: 30};
      var w = 600;
			var h = 400;
			var width = w - margin.left - margin.right;
      var height = h - margin.top - margin.bottom;
      
			var dataset = []; 
			var numDataPoints = 50; 
			var maxRange = Math.random() * 1000;

// ---- create array of 50 (x,y) coords -----------------------
			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]); // standard way

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

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

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

svg.append("g")
				.attr("class", "axis")
				.call(yAxis);
      
      
      
			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);

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

var numValues = dataset.length;			
        
//     		get maxRange value between 0 to 1000
					var maxRange = Math.random() * 1000;						
					dataset = [];

//         create an array of equal length, element value within maxRange
					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]; })]);

// ---- equal length of dataset, only update elements, no entering elements ----
					svg.selectAll("circle")
					   .data(dataset)

.transition()
   					   .duration(1000)

.attr("cx", function(d) {
					   		return xScale(d[0]);
					   })
					   .attr("cy", function(d) {
					   		return yScale(d[1]);
					   });

});

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

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