example/random-rings/index.html

<head>
  <style> body { margin: 0; } </style>

  <script src="//unpkg.com/react/umd/react.production.min.js"></script>
  <script src="//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <script src="//unpkg.com/@babel/standalone"></script>

  <script src="//unpkg.com/react-globe.gl"></script>
  <!--<script src="../../dist/react-globe.gl.js"></script>-->
</head>

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

<script type="text/jsx">
  // Gen random data
  const N = 10;
  const gData = [...Array(N).keys()].map(() => ({
    lat: (Math.random() - 0.5) * 180,
    lng: (Math.random() - 0.5) * 360,
    maxR: Math.random() * 20 + 3,
    propagationSpeed: (Math.random() - 0.5) * 20 + 1,
    repeatPeriod: Math.random() * 2000 + 200
  }));

  const colorInterpolator = t => `rgba(255,100,50,${Math.sqrt(1-t)})`;

  ReactDOM.render(
    <Globe
      globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
      ringsData={gData}
      ringColor={() => colorInterpolator}
      ringMaxRadius="maxR"
      ringPropagationSpeed="propagationSpeed"
      ringRepeatPeriod="repeatPeriod"
    />,
    document.getElementById('globeViz')
  );
</script>
</body>