Float & React

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>

/*
    #main-container {
      background-color:red;
      width: 100vw;
      height: 100vh;
    } */
    
  </style>
</head>

<body>
  <div id = "main-container"></div>
  
  <script>
  
		const margin = {top: 85, right: 25, bottom: 85, left: 25},
    width = 320 - margin.left - margin.right,
    height = 568 - margin.top - margin.bottom;

const dotData = {
      neutral: {
        cx: 135,
        cy: 199,
        r: 50
      },
      
      floating: {
        cx: { max: null, min: null},
        cy: { max: 201, min: 19}
      },
      
      shivering: {
      	cx: { max: 127, min: 123},
        cy: { max: null, min: null} 
    	}
    };
    
    
    var svg = d3.select("#main-container")
  		.append("svg")
    	.attr("width", width + margin.left + margin.right)
    	.attr("height", height + margin.top + margin.bottom)
    	.style("background","#EEE")
    
    var drawHere = svg.append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var dot = drawHere.append("circle").data("dotData")
  	.attr("r", "50")
  	.attr("cx", "135")
  	.attr("cy", "199")
  	.attr("fill", "darkorange")
    .attr("id", "dot")
    .on("click", resizeAndMove)
    .on("mouseover", shiver);

// animation from here on
    
 changeRadius = d3.transition()
    .duration(700)
    .ease(d3.easeCubic);   
    
 function resizeAndMove() {
   d3.selectAll("#dot")
     .transition(changeRadius)
     .attr("r","350")
   	 .attr("cy","-200")
     .transition(changeRadius).delay(1400)
     .attr("r","50")
     .attr("cy","199");
 }
    
    
  function shiver() {
   
  d3.active(this)
      .attr("cx", "123")
    .transition()
      .attr("cx", "127")
    .transition()
      .on("start", shiver);

}
    
  d3.selectAll("circle") //float
  .transition()
  .duration(1000)
  .ease(d3.easeBack)
  .attr("cy", "199")
  .on("start", function float() {
      d3.active(this)
        .attr("cy", "197")
      .transition()
        .attr("cy", "201")
      .transition()
        .on("start", float);
});

</script>

</body>

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