JSFiddle - React, Tailwind, and code Playground

by dylanmac

HTML

<div id="geographicExposure" class="ui-helper-clearfix">
			<div id="geographicDataTables">
				<div id="countryExposureTable" data-top-countries-length="16">
					<p class="geo-title">Countries</p>
					<table class="exposure-table product-data-list">
						<tbody>
							<tr data-countryId="country-36">
								<td>
									<span class="legend" style="background-color: rgb(32,93,0)">&nbsp;</span>
								</td>
								<td>
									<a class="zoom-country" href="#">Australia</a>
								</td>
								<td>77.09%</td>
							</tr>
							<tr data-countryId="country-76">
								<td>
									<span class="legend" style="background-color: rgb(183,220,165)">&nbsp;</span>
								</td>
								<td>
									<a class="zoom-country" href="#">Brazil</a>
								</td>
								<td>6.1%</td>
							</tr>
							<tr data-countryId="country-410">
								<td>
									<span class="legend" style="background-color: rgb(187,224,169)">&nbsp;</span>
								</td>
								<td>
									<a class="zoom-country" href="#">South Korea</a>
								</td>
								<td>4.41%</td>
							</tr>
							<tr data-countryId="country-156">
								<td>
									<span class="legend" style="background-color: rgb(190,226,172)">&nbsp;</span>
								</td>
								<td>
									<a class="zoom-country" href="#">China</a>
								</td>
								<td>3.17%</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div id="map"></div>
		</div>

		<script src="http://d3js.org/d3.v3.js"></script>
		<script src="http://d3js.org/topojson.v1.js"></script>

CSS

p {
				margin: 0;
			}
			.ui-helper-clearfix:before, 
			.ui-helper-clearfix:after {
				border-collapse: collapse;
				content: "";
				display: table;
			}
			.ui-helper-clearfix:after {
				clear: both;
			}
			.ui-helper-clearfix:before, 
			.ui-helper-clearfix:after {
				border-collapse: collapse;
				content: "";
				display: table;
			}
			.ui-helper-clearfix {
				min-height: 0;
			}
			#geographicExposure {
				width: 600px;
			}
			#geographicDataTables {
				float: left;
				height: 214px;
				overflow: hidden;
				padding-right: 17px;
				width: 170px;
			}
			.product-data-list {
				border-collapse: collapse;
				border-spacing: 0;
				border-top: medium none;
			}
			.product-data-list tr.selected, 
			.product-data-list tr.selected td {
				background-color: #CCCCCC;
			}
			.product-data-list td {
				font-size: 0.85em;
				padding: 5px 0;
			}
			.product-data-list td .legend {
				padding: 0 6px;
			}
			.product-data-list tr a {
				display: block;
				color: #0B68B6;
				text-decoration: none;
			}
			.product-data-list tr td:last-child {
				text-align: right;
			}			
			table {
				width: 100%;
			}
			#map {
				float: left;
				height: 400px;
				position: relative;
				width: 400px;
			}
			.country.active {
				fill: red;
			}
			.country.hover {
				fill: orange;
			}
			.country {
			  fill: #ccc;
			  stroke: #fff;
			  stroke-width: 1px;
			  stroke-linejoin: round;
			  cursor: pointer;
			}
			.hidden { 
			  display: none; 
			}
			.tooltip {
			  color: #222; 
			  background: #fff; 
			  padding: .5em; 
			  text-shadow: #f5f5f5 0 1px 0;
			  border-radius: 2px; 
			  box-shadow: 0px 0px 2px 0px #a6a6a6; 
			  opacity: 0.9; 
			  position: absolute;
			}
			rect {
			  fill: none;
			  pointer-events: all;
			}
			path {
				stroke: black;
				stroke-width: 0.25px;
			}

JavaScript

if (typeof BLK === "undefined" || !BLK) {
	var BLK = {};
}

// d3 namespace
BLK.d3 = BLK.d3 || {};

var world110mJson =...