xxxxxxxxxx<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> <!-- Location for page elements. --><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