JSFiddle - React, Tailwind, and code Playground

by dylanmac

HTML

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

		<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-countryCode="australia">
								<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-countryCode="brazil">
								<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-countryCode="southKorea">
								<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-countryCode="china">
								<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>

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

var width = 400,
height = 300;

var projection = d3.geo.mercator()
	.translate([width/2, height/1.5])
	.scale(70);

var path = d3.geo.path()
		.projection(projection);

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

var g = svg.append("g");

var tooltip = d3.select("#map").append("div")
	.attr("class", "tooltip");

function clickMap(d) {
	var countryCode = d3.select(this).attr('data-countryCode');
	$("tr.selected").removeClass('selected');
	$("tr[data-countryCode=" + countryCode + "]").addClass('selected');

	g.selectAll(".active").classed("active", false);
	d3.select(this).classed("active", active = d);

	var b = path.bounds(d);
	g.transition().duration(500).attr("transform",
		//"translate(" + projection.translate() + ")"
		"translate(" + width/2 + "," + height/2 + ")"
		+ "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ")"
		+ "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
}

function resetMap() {
	g.selectAll(".active").classed("active", active = false);
	$("tr.selected").removeClass('selected');
	g.transition().duration(750).attr("transform", "");
}

var returnArrow = svg.append("path")
	.attr("d", 'M503.7,743.8C694,647.1999999999999,636.6,326.74999999999994,348.1,334.09V205.39L120.00000000000003,400.39L348.1,606.19V474.59000000000003C589,469.09000000000003,578,677.3900000000001,503.70000000000005,743.8900000000001Z')
	.attr("fill", '#3b729f')
	.attr("stroke", '#88a4bc')
	.attr("stroke-width", 40)
	.attr("stroke-opacity", 1)
	.attr("fill-opacity", 1)
	.attr("transform","matrix(0.05,0,0,0.05,-1.9,-5.7)")
	.attr("style", "cursor: pointer;")
	.on("click", resetMap);

$('tr').on('click', function(d) {
	var countryCode = $(this).attr('data-countryCode');
	var mapTargetArea = d3.select('.country[data-countryCode=' + countryCode + ']');
	$('.product-data-list tr').removeClass('selected');
	$(this).addClass('selected');
	$("tr[data-countryCode=" +...