JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
		  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://bl.ocks.org/mbostock/raw/5732029/readme-simplify.js"></script>

<ul>
    <li><a class="clear">Clear Map</a></li>  
    <li><a class="edit">Edit Map</a></li>
</ul>

    <div id="canvases">
      <div class="canvas" id="canvas1"></div>
    </div>

CSS

body {
        padding-left: 15px;
      }
      .intro {
        font-size: 14px;
        font-family: Arial, sans-serif;
      }
      #canvases {
        width: 960px;
        height: 300px;
      }
      .canvas {
        float: left;
        border: 1px solid gray;
        width: 300px;
        height: 300px;
        margin-right: 10px;
      }
      svg {
        cursor: crosshair;
      }
      circle {
        fill: steelblue;
        opacity: 0.75;
      }
      circle.highlighted {
        fill: orange;
      }
      path {
        stroke: #000;
        stroke-width: 1;
        fill: none;
      }
      text {
        font-size: 10px;
        text-anchor: middle;
        pointer-events: none;
        fill: #000;
        font-family: Arial, sans-serif;
      }

JavaScript

(function() {

    var shapeSelector = {
        init: function(){
            var that = this;
            
            var width = 300;
            var height = 300;
            
            // An array to hold the coordinates
            // of the line drawn on each svg.
            var  coords = []
            this.line = d3.svg.line();
            
            this.drag = this.getDragBehaviours()
            
            this.svg = d3.select("#canvas1").append("svg")
            .attr({
                width: width,
                height: height
            }).call(that.drag);
            
            this.bindEvents();
        },
        bindEvents: function(){

    
            $('.clear').click(function(e) {
                e.preventDefault();
                d3.selectAll("svg path").remove();
            });
        
           $('.edit').click(function(e) {
                e.preventDefault();
               /*
                 var width = 960,
                    height = 500;
                
                var points = d3.range(1, 5).map(function(i) {
                  return [i * width / 5, 50 + Math.random() * (height - 100)];
                });
                
                var dragged = null,
                    selected = points[0];
                
                var line = d3.svg.line();
                
                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)
        ...