JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<div id="frame"></div>

CSS

#frame {
    background-color : #eee;
}

JavaScript

var box = d3.select("#frame")
          .append("svg")
          .attr("width", 900)
          .attr("height", 600)
          .on("mousemove", marker);

/*
box.append("circle")
   .style("stroke", "white")
   .attr("r", 40)
   .attr("cx", 150)
   .attr("cy", 150)
   .on("mouseover", dance);
*/

function bounce()
{
    d3.select(this)
       .transition()
       .attr("r", 100)
       .duration(1000)
       .ease("elastic");
}

function dance()
{
  d3.select(this)
    .transition()
    .attr("r", 50)
    .duration(1000)
    .ease("elastic")
    .each("end", bounce);
}

function marker()
{
  var arrow = d3.mouse(this);

  box.append("circle")
  .attr("cx", arrow[0])
  .attr("cy", arrow[1])
  .style("stroke", "gray")
  .transition()
  .duration(1000)
  .attr("r", 80)
  .style("stroke-opacity", 0.001)
  .remove();
}