JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/ui-lightness/jquery-ui.css">
<table>
  <tr>
    <td class="dialog">Open Dialog</td>
  </tr>
</table>

<script type="template" id="dialog-template">
</script>

CSS

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

.data-chart-title {
  font-size: 120%;
  padding: 4px 10px;
  color: white;
  background-color: #9898a0;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.axis text {
  font-family: sans-serif;
  font-size: 9px;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1px;
}

#side-bar .side-bar-title {
  font-size: 80%;
  padding: 4px 10px;
  color: white;
  background-color: #9898a0;
}

#side-bar .side-bar-options {
  font-size: 80%;
  padding: 8px 8px;
  color: black;
  background-color: #fff;
}

#nav-bar {
  background: white;
  height: 53px;
  top: 0px;
  width: 100%;
  background-color: #2e303d;
  color: #9999a1;
}

#nav-bar #logo {
  font-size: 130%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 20px;
}

#content-wrapper {
  position: absolute;
  bottom: 0;
  top: 53px;
  width: 100%;
  overflow: auto;
}

#content-wrapper #side-bar {
  /*height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;*/
  position: absolute;
  bottom: 0;
  top: 53px;
  width: 100%;
  overflow: auto;
  background-color: #f6f6f6;
  position: fixed;
  overflow-y: scroll;
  right: 0px;
  width: 200px;
  /* 400px; */
  height: 100%;
  padding: 15px;
  color: #777;
}

#content-wrapper #map {
  position: absolute;
  right: 230px;
  /* 430px; */
  left: 0px;
  /*bottom: 0px;*/
  /*top: 0px;*/
  height: 100%;
  padding: 0px;
  /*padding: 7px 20px 20px 20px;*/
  color: #777;
  background: #e5e5e5;
  overflow-y: scroll;
}

.info {
  padding: 6px 8px;
  font: 14px/16px Arial, Helvetica, sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.legend {
  text-align: left;
  line-height: 18px;
  color: #555;
}

.legend i {
  width: 18px;
  height:...

JavaScript

var data_global = [{
  "category": "avg resp time",
  "count": 378.58,
  "time": "2016-02-03 23:45:42.140000"
}, {
  "category": "avg resp time",
  "count": 264.01,
  "time": "2016-02-04 01:58:53.990000"
}, {
  "category": "avg resp time",
  "count": 288.26,
  "time": "2016-02-04 03:23:40.740000"
}, {
  "category": "avg resp time",
  "count": 230.673,
  "time": "2016-02-04 06:38:21.020000"
}, {
  "category": "avg resp time",
  "count": 174.58,
  "time": "2016-02-04 07:10:46.357000"
}, {
  "category": "avg resp time",
  "count": 319.0,
  "time": "2016-02-04 10:09:48"
}, {
  "category": "avg resp time",
  "count": 226.0,
  "time": "2016-02-04 13:16:52"
}, {
  "category": "avg resp time",
  "count": 313.0,
  "time": "2016-02-04 14:59:52"
}, {
  "category": "avg resp time",
  "count": 244.0,
  "time": "2016-02-04 16:06:11"
}, {
  "category": "avg resp time",
  "count": 318.88,
  "time": "2016-02-04 17:26:13.213000"
}, {
  "category": "avg resp time",
  "count": 213.237,
  "time": "2016-02-04 18:29:41.763000"
}, {
  "category": "avg resp time",
  "count": 371.0,
  "time": "2016-02-04 18:57:24"
}, {
  "category": "avg resp time",
  "count": 248.31,
  "time": "2016-02-04 19:03:44.690000"
}, {
  "category": "avg resp time",
  "count": 452.727,
  "time": "2016-02-05 10:15:02.493000"
}];

$(document).ready(function() {
  create_dialog();
});

function create_dialog() {
  $('<div id="msg_dialog"></div>').dialog({
    height: 'auto',
    width: 'auto',
    autoOpen: false,
    resizable: true,
    open: function(event, ui) {
        $(this).find("[type=submit]").hide();
        $(this).html($('#dialog-template').html());
      }
      /*,
          buttons: {
            Ok() {
                $(this).dialog('close');
                //choice(true);
              },
              Cancel() {
                $(this).dialog('close');
                //choice(false);
              }
          }*/
  });
}

$(".dialog").click(function() {
  //var Height =...