JSFiddle - React, Tailwind, and code Playground

HTML

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>

<ul class="menu">    
    <li><a class="edit">Edit Area</a></li>
    <li><a class="clear">Clear Area</a></li>
    <li><a class="draw">Draw Area</a></li>  
</ul>

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

CSS

html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.canvas {
        border: 1px solid gray;
        width: 100%;
        height: 100%;
}

path {
        stroke: #000;
        stroke-width: 1;
        fill: none;
    }

.selectioncomplete{
    fill: red;
    fill-opacity:0.2;
}

.stations, .stations svg {
  position: absolute;
}

.shapeholder, .shapeholder svg{
 position: absolute;
}

.stations svg {
  width: 60px;
  height: 20px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.stations circle {
  fill: red;
  stroke: black;
  stroke-width: 1.5px;
}

.menu{
    margin:0;
    padding:3px;
    background: grey;    
    list-style-type:none;
    overflow:hidden;
}

.menu li{
    float:left;
    background: white;
    margin-right:5px;
}

.menu li a{
    display:block;
    cursor: pointer;
    padding: 5px;
}

JavaScript

var shapeSelector = {
        invoke: function(){
            var that = this;
            
            var width = 500;
            var height = 400;
            
            // 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();
            });           
        },
        getDragBehaviours: function(){
            var that = this;
                  
            // Set the behavior for each part
            // of the drag.
            drag = d3.behavior.drag()
                .on("dragstart", function() {
                    // Empty the coords array.
                    coords = [];
                    svg = d3.select(this);
                    
                    // If a selection line already exists,
                    // remove it.
                    svg.select(".selection").remove();
                    
                    // Add a new selection line.
                    svg.append("path").attr({"class": "selection"});
                })
                .on("drag", function() {
                    // Store the mouse's current position
                    coords.push(d3.mouse(this));
                    
                    svg = d3.select(this);
                    
                    // Change the path of the selection line
                    // to represent the area where the...