JSFiddle - React, Tailwind, and code Playground

by UdithIndrakantha

HTML

<html>
  <head>
    <style>
      body {
        margin: 0;
        height: auto;
        width: 100vw;
        overflow: hidden;
      }

      #globeViz > div:nth-child(2),
      #globeViz > canvas {
        width: 100% !important;
        height: auto !important;
        min-height: 100% !important;
        aspect-ratio: auto 943 / 714 !important;
      }
    </style>

    <script src="https://unpkg.com/three"></script>
    <script src="https://unpkg.com/three-globe"></script>
  </head>

  <body>
    <div id="globeViz"></div>

    <script type="importmap">
      { "imports": { "three": "https://unpkg.com/three/build/three.module.js" } }
    </script>
    <script type="module">
      import { TrackballControls } from 'https://unpkg.com/three/examples/jsm/controls/TrackballControls.js';
      import { CSS2DRenderer } from 'https://unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
      Object.assign(THREE, { TrackballControls, CSS2DRenderer });

      // marker pin icon
      const markerSvg = `<svg viewBox="-4 0 36 36">
      <path fill="currentColor" d="M14,0 C21.732,0 28,5.641 28,12.6 C28,23.963 14,36 14,36 C14,36 0,24.064 0,12.6 C0,5.641 6.268,0 14,0 Z"></path>
      <circle fill="black" cx="14" cy="14" r="7"></circle>
    </svg>`;

      // Gen random data
      const N = 20;

      const arcsData = [...Array(N).keys()].map(() => ({
        startLat: (Math.random() - 0.5) * 180,
        startLng: (Math.random() - 0.5) * 360,
        endLat: (Math.random() - 0.5) * 180,
        endLng: (Math.random() - 0.5) * 360,
        color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)],
      }));

      const gData = [...Array(N).keys()].map(() => ({
        lat: (Math.random() - 0.5) * 180,
        lng: (Math.random() - 0.5) * 360,
        size: 7 + Math.random() * 30,
        color: ['red', 'white', 'blue', 'green'][Math.round(Math.random() * 3)],
      }));

      console.log(arcsData);

      const Globe = new ThreeGlobe()
       ...