JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/prashantgpt91/8f82ee018c978901d472a106e2836635/raw/6917c5bf4c0215b4db2ee0b19ff8e544da418479/moment.js"></script>
<script src="https://rawgit.com/prashantgpt91/4b7a6396acce80769f5dfb8475d38cb0/raw/9a5a61b4ca7e9dac3086fc6eec91888b123fc431/d3.js"></script>
<script src="https://rawgit.com/prashantgpt91/76afdd5b822613cfaccc73483e15120d/raw/61808e397e3d435d85ea7a472f6bf75c99a795bf/topojson.js"></script>
<script src="https://rawgit.com/prashantgpt91/f6b3558111d4f8427fb5cc94ea51f05f/raw/cb1c59811d91984e217f2e9c6e6d4d28769e94d7/planetaryjs.js"></script>


<canvas id='quakeCanvas'></canvas>

<div id='controls'>
  <div>
    <input id='slider' type='range' min='0' max='100' step='0.1' value='0'>
  </div>
  <div>
    <span id='date'></span>&nbsp;
  </div>
</div>

JavaScript

(function() {
  var canvas = document.getElementById('quakeCanvas');

  // Create our Planetary.js planet and set some initial values;
  // we use several custom plugins, defined at the bottom of the file
  var planet = planetaryjs.planet();
  planet.loadPlugin(autocenter({extraHeight: -120}));
  planet.loadPlugin(autoscale({extraHeight: -120}));
  planet.loadPlugin(planetaryjs.plugins.earth({
    topojson: { file:   'https://rawgit.com/prashantgpt91/9b0558613b94eb2498325931acf5ea21/raw/0440b7a29db12374257ffdec3d41fda8f7481f3e/world-110m.json' },
    oceans:   { fill:   '#001320' },
    land:     { fill:   '#06304e' },
    borders:  { stroke: '#001320' }
  }));
  planet.loadPlugin(planetaryjs.plugins.pings());
  planet.loadPlugin(planetaryjs.plugins.zoom({
    scaleExtent: [10, 10000]
  }));
  planet.loadPlugin(planetaryjs.plugins.drag({
    onDragStart: function() {
      this.plugins.autorotate.pause();
    },
    onDragEnd: function() {
      this.plugins.autorotate.resume();
    }
  }));
  planet.loadPlugin(autorotate(5));
  planet.projection.rotate([100, -10, 0]);
  planet.draw(canvas);


  // Create a color scale for the various earthquake magnitudes; the
  // minimum magnitude in our data set is 2.5.
  var colors = d3.scale.pow()
    .exponent(3)
    .domain([2, 4, 6, 8, 10])
      .range(['white', 'yellow', 'orange', 'red', 'purple']);
  // Also create a scale for mapping magnitudes to ping angle sizes
  var angles = d3.scale.pow()
    .exponent(3)
    .domain([2.5, 10])
    .range([0.5, 15]);
  // And finally, a scale for mapping magnitudes to ping TTLs
  var ttls = d3.scale.pow()
    .exponent(3)
    .domain([2.5, 10])
    .range([2000, 5000]);

  // Create a key to show the magnitudes and their colors
  d3.select('#magnitudes').selectAll('li')
    .data(colors.ticks(9))
  .enter()
    .append('li')
    .style('color', colors)
    .text(function(d) {
      return " ";
    });


  // Load our earthquake data and set up the controls.
  // The data...