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)"> </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)"> </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)"> </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)"> </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 allCountries = {"type":"Topology","transform":{"scale":[0.036003600360036005,0.017361589674592462],"translate":[-180,-89.99892578124998]},"objects":{"countries":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0]],"properties":{"name":"Aruba","color":"#1f77b4"},"id":533},{"type":"Polygon","arcs":[[1,2,3,4,5,6]],"properties":{"name":"Afghanistan","color":"#1f77b4"},"id":4},{"type":"MultiPolygon","arcs":[[[7,8,9,10]],[[11,12,13]]],"properties":{"name":"Angola","color":"#1f77b4"},"id":24},{"type":"Polygon","arcs":[[14]],"properties":{"name":"Anguilla","color":"#1f77b4"},"id":660},{"type":"Polygon","arcs":[[15,16,17,18,19]],"properties":{"name":"Albania","color":"#1f77b4"},"id":8},{"type":"MultiPolygon","arcs":[[[20]],[[21]],[[22]]],"properties":{"name":"Ã…land Islands","color":"#1f77b4"},"id":248},{"type":"Polygon","arcs":[[23,24]],"properties":{"name":"Andorra","color":"#1f77b4"},"id":20},{"type":"MultiPolygon","arcs":[[[25]],[[26]],[[27]],[[28]],[[29,30,31,32,33],[34]]],"properties":{"name":"United Arab Emirates","color":"#1f77b4"},"id":784},{"type":"MultiPolygon","arcs":[[[35]],[[36,37]],[[38]],[[39,40,41,42,43,44]]],"properties":{"name":"Argentina","color":"#1f77b4"},"id":32},{"type":"MultiPolygon","arcs":[[[45]],[[46,47,48,49,50],[51]]],"properties":{"name":"Armenia","color":"#1f77b4"},"id":51},{"type":"Polygon","arcs":[[52]],"properties":{"name":"American...