index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>🌐 Coronaglobe</title>
    <meta charset="utf-8" />

    <link
      href="https://fonts.googleapis.com/css?family=DM+Sans|DM+Serif+Display|DM+Serif+Text|Nunito|Roboto|Roboto+Mono|Lato&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg=="
      crossorigin="anonymous"
    />

    <style type="text/css">
      * {
        font-family: DM Sans !important;
      }

      html {
        height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
        background: #000000 url(loading.gif) center center no-repeat;
        color: #ffffff;
        font-size: 13px;
        line-height: 20px;
        height: 100%;
      }

      #info {
        font-size: 12px;
        position: absolute;
        bottom: 5px;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 3px;
        right: 10px;
        padding: 10px;
      }

      #currentInfo {
        width: 270px;
        position: absolute;
        left: 20px;
        top: 400px;

        background-color: rgba(0, 0, 0, 0.2);

        border-top: 1px solid rgba(255, 255, 255, 0.4);
        padding: 10px;
      }

      a {
        color: #aaa;
        text-decoration: none;
      }

      a:hover {
        text-decoration: underline;
      }

      .bull {
        padding: 0 5px;
        color: #555;
      }

      #title {
        position: absolute;
        top: 20px;
        width: 360px;
        left: 20px;
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
      }

      .time {
        line-height: 26px;
        height: 30px;
        text-align: center;
        float: left;
        width: 90px;
        color: rgba(255, 255, 255, 0.4);

        cursor: pointer;
        -webkit-transition: all 0.1s ease-out;
      }

      .time:hover,
      .time.active {
        font-size: 23px;
        color: #fff;
      }

      #ce span {
        display: none;
      }

      #ce {
        width: 107px;
        height: 55px;
        display: block;
        position: absolute;
        bottom: 15px;
        left: 20px;
        background: url(ce.png);
      }
    </style>
  </head>

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

    <a href="https://github.com/alexwhyy/coronaglobe" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <div id="info">
      <strong
        ><a href="http://www.chromeexperiments.com/globe"
          >Powered by WebGL Globe</a
        ></strong
      >
      <span class="bull">&bull;</span> Data acquired from
      <a href="https://systems.jhu.edu/">Johns Hopkins CSSE</a>
      <span class="bull">&bull;</span> Built by
      <a href="https://alexyuan.me">Alex Yuan</a>
    </div>

    <div id="title">
      <h2>Visualizing COVID-19 Around the Globe 🌐</h2>
      <p>
        This globe uses data from the
        <a href="https://systems.jhu.edu/"
          >Johns Hopkins University Center for Systems Science and
          Engineering</a
        >. Coordinate locations and case numbers are limited by the percision
        and accuracy of the data.
      </p>
      <p>
        The Johns Hopkins CSSE has a GitHub repository for their data available
        at
        <a href="https://github.com/CSSEGISandData/COVID-19"
          >https://github.com/CSSEGISandData/COVID-19</a
        >.
      </p>
      <div class="dropdown pt-2">
        <div class="text-center">
          <div class="alert bg-black text-white border-primary" role="alert">
            <h4
              class="alert-heading"
              style="font-family: Roboto Mono !important"
            >
              Time on Globe (MM/DD/YY)
            </h4>
            <h1
              id="date_label"
              style="font-family: Roboto Mono !important"
            ></h1>
          </div>
        </div>
        <div class="input-group">
          <label for="date_slider"
            >Drag the slider below to change the date and time</label
          >
          <input
            type="range"
            class="form-control-range"
            id="date_slider"
            min="0"
            max="0"
          />
        </div>
      </div>
    </div>

    <!--
    <a id="ce" href="http://www.chromeexperiments.com/globe">
        <span>This is a Chrome Experiment</span>
    </a>
    -->

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
      integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"
      integrity="sha512-eUQ9hGdLjBjY3F41CScH3UX+4JDSI9zXeroz7hJ+RteoCaY+GP/LDoM8AO+Pt+DRFw3nXqsjh9Zsts8hnYv8/A=="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha512-M5KW3ztuIICmVIhjSqXe01oV2bpe248gOxqmlcYrEzAvws7Pw3z6BK0iGbrwvdrUQUhi3eXgtxp5I8PDo9YfjQ=="
      crossorigin="anonymous"
    ></script>

    <script type="text/javascript" src="third-party/Detector.js"></script>
    <script type="text/javascript" src="third-party/three.min.js"></script>
    <script type="text/javascript" src="third-party/Tween.js"></script>
    <script type="text/javascript" src="globe.js"></script>
    <script type="text/javascript">
      if (!Detector.webgl) {
        Detector.addGetWebGLMessage();
      } else {
        $.getJSON("generate.json", function (server_data) {
          var settime = function (globe, t) {
            return function () {
              new TWEEN.Tween(globe)
                .to(
                  {
                    time: t / dates.length,
                  },
                  500
                )
                .easing(TWEEN.Easing.Cubic.EaseOut)
                .start();
              var y = document.getElementById("year" + dates[t]);
            };
          };

          var data = server_data;
          var dates = [];

          $("#date_slider").attr("max", data.length - 1);
          $("#date_slider").on("input change", function () {
            slider_val = $("#date_slider").val();
            $("#date_label").text(dates[slider_val]);
            settime(globe, slider_val)();
          });

          for (var i = 0; i < data.length; i++) {
            dates.push(data[i][0]);
          }
          $("#date_slider").val(data.length - 1);
          $("#date_label").text(dates[data.length - 1]);

          var container = document.getElementById("container");
          var globe = new DAT.Globe(container);
          var i,
            tweens = [];

          $(".dropdown-item").hover(function () {
            $("#selectedDate").text($(this).text());
          });

          TWEEN.start();

          window.data = data;
          for (i = 0; i < data.length; i++) {
            globe.addData(data[i][1], {
              format: "magnitude",
              name: data[i][0],
              animated: true,
            });
          }
          globe.createPoints();
          settime(globe, dates.length - 1)();
          globe.animate();
        });
      }
    </script>
  </body>
</html>