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>

<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; 
}


circle {
  fill: #000;
  fill-opacity: .5;
  cursor: move;
}


rect {
  fill: none;
  pointer-events: all;
}

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(){
  
/*
        var points = path_from_svg(points1);
        var svg = d3.select("#g-1");
    
    
    */
            
            
        var width = 960,
            height = 500;
        
        /*
        var points = d3.range(1, 5).map(function(i) {
          return [i * width / 5, 50 + Math.random() * (height - 100)];
        });*/
    
        var points = path_from_svg(points1);
        
        var dragged = null,
            selected = points[0];
        
        var line = d3.svg.line();
        
    /*
        var svg = d3.select("#g-1")
            .attr("width", width)
            .attr("height", height)
            .attr("tabindex", 1);
    */
    
        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("tabindex", 1);
        
        svg.append("rect")
            .attr("width", width)
            .attr("height", height)
            .on("mousedown", mousedown);
        
        svg.append("path")
            .datum(points)
            .attr("class", "line")
            .call(redraw);
        
        d3.select(window)
            .on("mousemove", mousemove)
            .on("mouseup", mouseup)
            .on("keydown", keydown);
        
        d3.select("#interpolate")
            .on("change", change)
          .selectAll("option")
            .data([
              "linear",
              "step-before",
              "step-after",
              "basis",
              "basis-open",
              "basis-closed",
              "cardinal",
              "cardinal-open",
              "cardinal-closed",
              "monotone"
            ])
          .enter().append("option")
            .attr("value", function(d) { return d; })
            .text(function(d) { return d; });
        
       ...