scatterplot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>D3: ScatterPlot</title>
		<script src="https://d3js.org/d3.v5.min.js"></script>
		<style type="text/css">
		</style>
	</head>
	<body>
		<p>Click!</p>
	
		<script type="text/javascript">

var w = 500;
			var h = 300;
			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 xScale = d3.scaleLinear()
								 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
								 .range([padding, w - padding * 2]);

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

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

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

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

svg.append("clipPath")
				.attr("id", "chart-area")
				.append("rect")
				.attr("x", padding)
				.attr("y", padding)
				.attr("width", w - padding * 3)
				.attr("height", h - padding * 2);

svg.append("g")
			   .attr("id", "circles")
			   .attr("clip-path", "url(#chart-area)")
			   .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," + (h - padding) + ")")
				.call(xAxis);
			
			svg.append("g")
				.attr("class", "y axis")
				.attr("transform", "translate(" + padding + ",0)")
				.call(yAxis);

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

svg.selectAll("circle")
					   .data(dataset)
					   .transition()
					   .duration(1000)
					   .on("start", function() {
						   d3.select(this)
						     .attr("fill", "red")
						     .attr("r", 7);
					   })
					   .attr("cx", function(d) {
					   		return xScale(d[0]);
					   })
					   .attr("cy", function(d) {
					   		return yScale(d[1]);
					   })
					   .on("end", function() {
						   d3.select(this)
						     .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);

});
            
		</script>
	</body>
</html>

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