JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://gist.githubusercontent.com/prashantgpt91/cbdfcfd21678f85fd56fc2e544f58f63/raw/f350a02e8312b7dc8ea738cf158bdfa3e6584b9f/planetaryjs.min.js"></script>
<script src="https://gist.githubusercontent.com/prashantgpt91/9b0558613b94eb2498325931acf5ea21/raw/0440b7a29db12374257ffdec3d41fda8f7481f3e/world-110m.json"></script>
<script src="https://gist.githubusercontent.com/prashantgpt91/f6b3558111d4f8427fb5cc94ea51f05f/raw/cb1c59811d91984e217f2e9c6e6d4d28769e94d7/planetaryjs.js"></script>
<script src="https://gist.githubusercontent.com/prashantgpt91/8f82ee018c978901d472a106e2836635/raw/6917c5bf4c0215b4db2ee0b19ff8e544da418479/moment.js"></script>
<script src="https://gist.githubusercontent.com/prashantgpt91/da38bff5ed9bfe173e4010b6d26955a2/raw/2a209ef886bad8c0179c04c5f9d8e2d289f9f3bc/d3.js"></script>
<h1>Earthquakes: 2013</h1>
<ul id='magnitudes'></ul>
<script src="https://gist.githubusercontent.com/prashantgpt91/da38bff5ed9bfe173e4010b6d26955a2/raw/2a209ef886bad8c0179c04c5f9d8e2d289f9f3bc/d3.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:   '/world-110m.json' },
    oceans:   { fill:   '#001320' },
    land:     { fill:   '#06304e' },
    borders:  { stroke: '#001320' }
  }));
  planet.loadPlugin(planetaryjs.plugins.pings());
  planet.loadPlugin(planetaryjs.plugins.zoom({
    scaleExtent: [50, 5000]
  }));
  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 "Magnitude " + d;
    });


  // Load our earthquake data and set up the controls.
  // The data consists of an array of objects in the following format:
  // {
  //   mag:  magnitude_of_quake
  //  ...