D3 Examples - Float & React

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
​
  <style>
    body { 
      margin:0;
      padding:0;
      width:100vw;
      height:100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    #drawHere {
      background-color:red;
    }
​
    /*
    #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>
​
    