JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<script src="//s.rfnd.me/covus_wrapp.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.2/css/ui.jqgrid.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.2/js/jquery.jqgrid.src.js"></script>
<div id="chart"></div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>

CSS

#chart {
  background: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.title {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 6px;
}
text {
  pointer-events: none;
}

.grandparent text {
  font-weight: bold;
}

rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;
}

rect.parent {
    pointer-events: none;
}

.grandparent rect {
  fill: orange;
}

.grandparent:hover rect {
  fill: #ee9700;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

.children rect.parent {
  fill: #bbb;
  fill-opacity: .5;
}

.children:hover rect.child {
  fill: #bbb;
}

JavaScript

var e_rfndmeclientid = 2243778;
var e_rfndmechannelid = '30554';
var e_rfndmecustomwidgettitle='Security Utility';
var e_rfndmecustomatalink = '';
var e_rfndmesubid = 'CCC13';
var e_rfndmegeo = 'de';
var e_rfndmeclientcreatetime       = 1425638065;
var e_rfndmeextid = '';

var serverData = [
  {
    "name": "Afghanistan",
    "region": "Asia",
    "subregion": "Southern Asia",
    "value": 25500100
  },
  {
    "name": "Åland Islands",
    "region": "Europe",
    "subregion": "Northern Europe",
    "value": 28502
  },
  {
    "name": "Albania",
    "region": "Europe",
    "subregion": "Southern Europe",
    "value": 2821977
  },
  {
    "name": "Algeria",
    "region": "Africa",
    "subregion": "Northern Africa",
    "value": 37900000
  },
  {
    "name": "American Samoa",
    "region": "Oceania",
    "subregion": "Polynesia",
    "value": 55519
  },
  {
    "name": "Andorra",
    "region": "Europe",
    "subregion": "Southern Europe",
    "value": 76246
  },
  {
    "name": "Angola",
    "region": "Africa",
    "subregion": "Middle Africa",
    "value": 20609294
  },
  {
    "name": "Anguilla",
    "region": "Americas",
    "subregion": "Caribbean",
    "value": 13452
  },
  {
    "name": "Antarctica",
    "region": "",
    "subregion": "",
    "value": 2
  },
  {
    "name": "Antigua and Barbuda",
    "region": "Americas",
    "subregion": "Caribbean",
    "value": 86295
  },
  {
    "name": "Argentina",
    "region": "Americas",
    "subregion": "South America",
    "value": 40117096
  },
  {
    "name": "Armenia",
    "region": "Asia",
    "subregion": "Western Asia",
    "value": 3024100
  },
  {
    "name": "Aruba",
    "region": "Americas",
    "subregion": "Caribbean",
    "value": 101484
  },
  {
    "name": "Australia",
    "region": "Oceania",
    "subregion": "Australia and New Zealand",
    "value": 23254142
  },
  {
    "name": "Austria",
    "region": "Europe",
    "subregion": "Western Europe",
    "value": 8501502
  },
  {
    "name":...