JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="//unpkg.com/globe.gl"></script>
<div class="globe-wrapper">
<div id="globe"></div>  
</div>

CSS

body{
  margin: 0;
}

.globe-wrapper{
  background: red;
}

#globeViz{
  opacity: 0;
  transition: opacity .25s ease-out;
}

JavaScript

// Gen random data

const citiesRawData = {
  'ODS': {
    short: 'ODS',
    name: 'Odessa',
    latitude: 47.433367329,
    longitude: 30.5166279691,
  },
  'NYC': {
  	short: 'NYC',
    name: 'New York',
    latitude: 40.7,
    longitude: -74,
  },
  'SEA': {
  	short: 'SEA',
    name: 'Tacoma',
    latitude: 47.2529,
    longitude: -122.4443,
  },
  'YUZHNE': {
  	short: 'YUZHNE',
    name: 'Yuzhne',
    latitude: 46.38,
    longitude: 31.06,
  },
  'HOU': {
  	short: 'HOU',
    name: 'Houston',
    latitude: 29.7604,
    longitude: -95.3698,
  },
  'ORF': {
  	short: 'ORF',
    name: 'Norfolk',
    latitude: 36.8508,
    longitude: -76.2859,
  },
  'OAK': {
  	short: 'OAK',
    name: 'Oakland',
    latitude: 37.7126,
    longitude: -122.2197,
  },
  'SAV': {
  	short: 'SAV',
    name: 'Savannah',
    latitude: 32.0809,
    longitude: -81.0912,
  },
  'LGB': {
  	short: 'LGB',
    name: 'Long Beach',
    latitude: 33.7701,
    longitude: -118.1937,
  },
};
const N = 20;

const arcColors = [
	['#321406', 'rgba(74, 62, 238, 0.5)'],
  ['1b3b60', 'rgba(255,255,255,0.2)'],
  ['#322044', 'rgba(255,255,255,0.2)'],
  ['#04380e', 'rgba(255,255,255,0.2)'],
];
const getRandomFrom = (array) => {
	return array[Math.round(Math.random() * (array.length - 1))];
};

const arcsDepartureCitiesShortCodes = ['NYC', 'LGB', 'SAV', 'OAK', 'ORF', 'HOU', 'SEA'];
const arcsArrivalCitiesShortCodes = ['ODS', 'YUZHNE'];

const arcsDataBase = arcsDepartureCitiesShortCodes.map(function(departureCityCode){

	const departureCity = citiesRawData[departureCityCode];
  const arrivalCityCode = getRandomFrom(arcsArrivalCitiesShortCodes);
  const arrivalCity = citiesRawData[arrivalCityCode];

  return {
  	startLat: departureCity.latitude,
    startLng: departureCity.longitude,
    endLat: arrivalCity.latitude,
    endLng: arrivalCity.longitude,
    color: arcColors[0],
    isHighlight: false,
  }
});

const arcsDataHighlight = arcsDataBase.map((item) => {
	return {
  	...item, 
    isHighlight:...