Simple transition in v7 by d3noob

This is a demonstration of a simple use of a transition using d3.js v7.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 7 of d3.js.

index.html

<!DOCTYPE html>
<meta charset="utf-8">

<body>

<!-- load the d3.js library -->    
<script src="https://d3js.org/d3.v7.min.js"></script>

<script>

var svg = d3.select("body") // Select the body element
    .append("svg")          // Append an SVG element to the body
    .attr("width", 960)     // make it 960 pixels wide
    .attr("height", 500)    // make it 500 pixels high
    .append("circle")       // append a cicle to the svg
    .attr("fill", "blue")   // fill the circle with 'blue'
    .attr("r", 20)          // set the radius to 10 pixels
    .attr('cx', 40)         // position the circle at 40 on the x axis
    .attr('cy', 250)        // position the circle at 250 on the y axis
    .transition()           // apply a transition
    .duration(4000)         // apply it over 4000 milliseconds
    .attr('cx', 920);       // new horizontal position at 920 on x axis

</script>
</body>