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://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<ul>
    <li><a class="up" href="#">rescale up</a></li>
    <li><a class="down" href="#">rescale down</a></li>
</ul>
    
    <div id="canvases">
        <div class="canvas" id="canvas1"></div>
        <div id="map"></div>
    </div>

CSS

html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
    }  
    
    #canvases{
        top: 20px;
        position: relative;
    }
    
    #map {
        position: absolute;
        top:0;
        left:0;
        z-index:0;
        width: 500px;
        height: 400px;
        background: url(http://fc03.deviantart.net/fs70/i/2011/134/2/6/fabric_texture_b___w_checkered_by_wdwparksgal_stock-d3gcu0z.jpg);
    }
    
    #canvas1{
        position: relative;
        z-index:1;    
    }
    
    body {
        padding-left: 15px;
    }
    .intro {
        font-size: 14px;
        font-family: Arial, sans-serif;
    }
    #canvases {
        width: 500px;
        height: 400px;
    }
    .canvas {
        border: 1px solid gray;
        width: 100%;
        height: 100%;
    }
    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;
    }

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

JavaScript

(function() {

    var shapeSelector = {
        init: function(){
            var that = this;
            
            this.width = 500;
            this.height = 400;
            
            
            var paths = "M184,174L209,266L345,247L364,143L256,144 L184,174L256,144";
            
            this.svg = d3.select("#canvas1")
                .append("svg")
                .attr("width", this.width) 
                .attr("height", this.height)   
                .append("path").attr("d", paths)
                .attr("class", "selectioncomplete")
                       
            this.bindEvents();
        },
        rescalePath: function(zoomLevel){
            //now need to rescale the path so the map and the region match?
            

            
            var ratioX = zoomLevel/this.width;
            var ratioY = zoomLevel/this.height;
            
            this.svg.attr("transform", "scale("+zoomLevel+") translate("+ratioX+", "+ratioY+")");
            
        },
        bindEvents: function(){
            var that = this;
            
            $(".up").click(function(e) {
                e.preventDefault();
                that.rescalePath(3);
            });

            $(".down").click(function(e) {
                e.preventDefault();
               that.rescalePath(12);
            });
            
        }
    }    
    
    
    
    
    
shapeSelector.init();    
   
 
    
}());