d3 transition ex1

<!DOCTYPE html>
<html lang="en">
<head>
	<title>I'm Learning D3</title>
	<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
	<style>
		button {
			position: absolute;
			margin-left: 6px;
			margin-top: 6px;
		}
	</style>
</head>
<body>
	<button id="start">Transition</button>
	<button id="reset" style="margin-left: 82px">Reset</button>
	
<script>
	//Make an SVG Container
	var svgContainer = d3.select("body").append("svg")
		.attr("width", 400)
		.attr("height", 200)
		.style("border-color", "black")
		.style("border-style", "solid")
		.style("border-width", "1px");
	 
	// Draw the Rectangle
	var rectangle = svgContainer.append("rect")
		.attr("x", 50)
		.attr("y", 50)
		.attr("width", 50)
		.attr("height", 50);

// Set up the reset button to move it back to 50,50
	d3.select("#reset").on("click", function() {
		rectangle
			.transition()
			.attr("x", 50)
			.attr("y", 50)
			.attr("width", 50)
		  .attr("height", 50)
		  .attr("opacity", 1)
		  .attr("fill", "black");
	});

d3.select("#start").on("click", function() {
		rectangle
			.transition()
			.attr("x", 250) // Set New Position
			.attr("width", 100) // New Width
			.attr("height", 100) // New Height
			.attr("opacity", 0.5) // New Opacity
			.attr("fill", "red"); // New Color (Hex, RGB, or Web Safe)
	});
</script>
</html>

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