JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
  <script src="https://d3js.org/d3-geo.v1.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <script src="https://bl.ocks.org/mbostock/raw/7ea1dde508cec6d2d95306f92642bc42/6aac691494f752142a67cc43c51a0fd09896dbd4/versor.js"></script>

  <title>Globe</title>
</head>

<body>
  <div id="tooltip" style="display:none"></div>
  <canvas id="globe"></canvas>
  
</body>

</html>

CSS

html,
body {
  margin: 0;
  padding: 0;
  background: #505467;
}

#globe {
  z-index: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: -17px;
  cursor: pointer;
}

#tooltip {
  z-index: 1;
  user-select: none;
  position: fixed;
  top: 100px;
  left: 0;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  background: #e9e4e0;
  color: black;
  border: 1px solid black;
  padding: 20px;
}

#tooltip .tooltip-country-name {
  font-size: 16px;
}

/* dark scheme */
#tooltip .channel01 {
  color: #749a1d;
}

#tooltip .channel02 {
  color: #757575;
}

#tooltip .channel03 {
  color: #cd343a;
}

JavaScript

//
// Configuration
//

// ms to wait after dragging before auto-rotating
let rotationDelay = 3000;
// scale of the globe (not the canvas element)
let scaleFactor = 0.9;
// autorotation speed
let degPerSec = 6;
// start angles
let angles = {
  x: -10,
  y: 40,
  z: 0
}
// colors
let colorWater = '#505467';
let colorLand = '#dbb998';
let colorGraticule = '#ccc';
let colorCountry = '#c48e5a';
let colorCountryBorder = '#393b41';

//
// Handler
//


function showTooltip(countryName) {
  /* --- Generates fake data for each country to display on tooltip --- */
  const channelData = [Math.round(Math.random() * 30 * 10) / 10 + 10, Math.round(Math.random() * 35 * 10) / 10 + 10];
  channelData.push(Math.round((100.0 - channelData[0] - channelData[1]) * 10) / 10);

  const paymentType = [Math.round(Math.random() * 50 * 10) / 10 + 10];
  paymentType.push(Math.round((100.0 - paymentType[0]) * 10) / 10);

  const customerType = [Math.round(Math.random() * 50 * 10) / 10 + 10];
  customerType.push(Math.round((100.0 - customerType[0]) * 10) / 10);

  const caseType = [Math.round(Math.random() * 50 * 10) / 10 + 10];
  caseType.push(Math.round((100.0 - caseType[0]) * 10) / 10);

  const TOOLTIP_MAX_WIDTH = 190;
  const TOOLTIP_MAX_HEIGHT = 110;

  const tooltip = `
    <span class='tooltip-country-name'>${countryName}:</span><br />
    <span class="channel01">Channel01: ${channelData[0]}%</span><br />
    <span class="channel02">Channel02: ${channelData[1]}%</span><br />
    <span class="channel03">Channel03: ${channelData[2]}%</span><br />
  `;

  /* Calculates mouse coords and shows the tooltip */

  const absoluteMouseX = d3.event.clientX;
  const absoluteMouseY = d3.event.clientY;
  const ww = window.innerWidth;
  const hh = window.innerHeight;
  let tooltipX;
  let tooltipY;

  if (ww - absoluteMouseX < TOOLTIP_MAX_WIDTH) {
    tooltipX = ww - TOOLTIP_MAX_WIDTH;
  } else {
    tooltipX = absoluteMouseX + 2;
  }

  if (hh - absoluteMouseY < TOOLTIP_MAX_HEIGHT) {
    tooltipY =...