JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="instructions">
    <p>Hover your cursor over a circle to get the name and category of the member. Circles outside the map area represent city-wide organizations.
        <br />Click or, if you are using a mobile device, touch the circle to get more information.
        <br />
<strong>Click</strong> on an area you want to zoom into. Click again in the same area or use the <strong>Reset</strong> button to restore the map to its original size.</p>
    <button id="resetButton">Reset</button>
    <div id="radio">
        <input checked="checked" id="all" name="category" type="radio" value="all" />
        <label for="all">All</label>
        <input id="volunteer" name="category" type="radio" value="volunteer" />
        <label for="volunteer">Volunteers</label>
        <input id="organization" name="category" type="radio" value="organization" />
        <label for="organization">Organizations</label>
        <input id="group" name="category" type="radio" value="community group" />
        <label for="group">Community groups</label>
    </div>
</div>
<p>&nbsp;</p>
<div id="demo">
    <div id="data-div">&nbsp;</div>
</div>

CSS

svg {
    border:0px solid #ebebeb;
}
.ui-widget {
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
}
.ui-widget-content {
    background: #F9F9F9;
    border: 1px solid #90d93f;
    color: #222222;
}
.ui-dialog {
    left: 0;
    outline: 0 none;
    padding: 20 !important;
    position: absolute;
    top: 0;
}
.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 20px !important;
}
.ui-widget-header {
    background: #b0de78;
    border: 0;
    color: #fff;
    font-weight: normal;
}
.ui-dialog .ui-dialog-titlebar {
    padding: 0.1em .5em;
    position: relative;
    font-size: 1em;
}
.datamaps-hoverover {
    background-color:white;
    border:2px solid #90d93f;
    padding:10px;
    margin-left:100px;
    margin-top: 300px;
    font-size:12px;
    font-family:'Helvetica';
}
#data-div {
    width: 1100px;
    margin-bottom:5px;
    margin-left:50px;
}
#legend {
    width: 300px;
    margin-bottom:5px;
    margin-left:50px;
    border-style: solid;
    border-color: black;
    border: 1px;
}
#neighbourhoods {
    /*  fill: #aaa; */
}
#neighbourhoods .active {
    fill: orange;
}
#neighbourhood-borders {
    fill: none;
    stroke: #fff;
    stroke-width: 1.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
}
#instructions {
    margin-bottom:5px;
    margin-left:50px;
    width:1100px;
}
#demo {
    float: left;
}
label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    font-size: 13px;
}
#resetButton {
    margin-bottom: 20px;
}

JavaScript

// X-XSS-Protection: 0
var categoryColour = {
    "volunteer": "blue",
        "organization": "green",
        "community group": "red",
        "air": "transparent"
};

function touchHandler(event) {
    var touches = event.changedTouches,
        first = touches[0],
        type = "";
    switch (event.type) {
        case "touchstart":
            type = "click";
            break;
        case "touchend":
            type = "mouseout";
            break;
        default:
            return;
    }

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1,
    first.screenX, first.screenY,
    first.clientX, first.clientY, false,
    false, false, false, 0 /*left*/ , null);
    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, false);
}

function prettyAlert(p_message, p_title) {
    p_title = p_title || "";
    $(p_message).dialog({
        title: p_title,
        width: 400,
        height: 400,
        resizable: false,
        modal: true,
        overlay: {
            backgroundColor: "#000",
            opacity: 0.5
        },
        close: function (ev, ui) {
            $(this).remove();
        }
    });
}

var cx;
var cy;
var width = 1000;
var height = 800;
var centered;

var svg = d3.select("#data-div")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

//d3.json("../sites/default/d3_files/json/toronto-neighbourhoods.json", function (error, neighbourhoods) {

var neighbourhoods = getData();

    // create a first guess for the projection
    var center = d3.geo.centroid(neighbourhoods)
    var s1 = 150;
    var t1 = [width / 2, height / 2];
    var proj1 = d3.geo.mercator()
        .scale(s1)
        .center(center)
       ...