Mouse Events 1

Here I am experimenting with mouse events...

<!DOCTYPE html>
<html>

<body>
    <div class="myText"></div>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      var width = 960,
        height = 500;

// set up the svg container 
      var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var myRect = svg.append("rect")
        .attr("width", width)
        .attr("height", height)
        .on("mousemove", mouseMove);

var myText = d3.select(".myText").text("");

function mouseMove() {

var m = d3.mouse(this);

// update the text with the x and y coordinates of the mouse
        myText.text(m);

// insert the circle
        svg.insert("circle", "rect")
          .attr("cx", m[0])
          .attr("cy", m[1])
          .attr("r", 10)
          .style("stroke", 2)
          .style("fill", "SteelBlue")
          .transition()
          .duration(2000)
          .ease(Math.sqrt)
          .attr("r", 20)
          .style("fill", "SteelBlue")
          .remove();

d3.event.preventDefault();
      }
    </script>
  </body>

</html>

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