JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script src="bost.ocks.org/mike/simplify/simplify.js"></script>

<a class="edit" href="#">edit shape</a>
<svg width="700" height="500">
    <g id="g-1"></g>
</svg>

CSS

path {
    fill: crimson;
    fill-opacity: 0.1;
    stroke: #000; 
}

JavaScript

//__ clicking on edit shape - creates circles on the edges, now looking to bring the application together with moving the circles and redrawing the shape
function editShape(){

    console.log("edit shape", points1);

       var svg = d3.select("#g-1");
            
      var circle = svg.selectAll("circle")
          .data(points, function(d) { return d; });
    
      circle.enter().append("circle")
          .attr("r", 1e-6)
          .on("mousedown", function(d) { selected = dragged = d; redraw(); })
        .transition()
          .duration(750)
          .ease("elastic")
          .attr("r", 6.5);
    
      circle
          //.classed("selected", function(d) { return d === selected; })
          .attr("cx", function(d) { return d[0]; })
          .attr("cy", function(d) { return d[1]; });
    
      circle.exit().remove();
      
}

$('.edit').click(function(e) {
    e.preventDefault();
    editShape();
});


//__starting points
var points = "M241,59L237,60L233,60L228,61L224,61L218,63L213,63L209,65L204,66L199,67L196,68L193,69L189,70L187,72L184,72L182,74L179,75L177,76L175,78L173,79L170,81L168,83L165,85L163,87L161,89L159,92L157,95L157,97L155,102L153,105L152,110L151,113L151,117L151,123L150,137L148,180L148,185L148,189L148,193L148,197L148,202L148,206L149,212L151,218L152,222L154,229L154,232L155,235L157,239L158,241L160,245L162,247L163,249L165,251L167,254L169,256L172,258L175,260L178,261L183,265L188,268L193,270L206,273L213,275L220,275L225,275L232,276L238,277L243,277L249,277L253,277L259,277L266,277L271,277L277,277L281,277L284,277L288,277L293,277L297,276L302,274L305,272L308,271L311,268L313,267L315,264L318,261L322,257L324,254L326,249L329,244L331,241L332,239L334,234L338,230L339,226L341,222L343,218L345,213L347,211L348,207L349,201L351,196L352,192L353,187L353,183L353,180L353,178L354,176L354,173L354,170L354,168L354,167L354,166L354,164L354,162L354,161L354,159L354,158L354,155L354,152L354,149L352,143L349,137L347,133L343,125L340,119 M241,59L340,119";

var epsilon = 10;
var...