Continental Drift using Vega

Continental Drift using Vega.

A visualization of paleoshorelines and continental drift over time using data from the GPlates API and the Vega data visualization library.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vega@4"></script>
	<script src="https://cdn.jsdelivr.net/npm/vega-embed@3"></script>
  <link rel="stylesheet" type="text/css" href="spinner.css">
  <style>
    #loader {
      top: 0;
      left: 0;
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: lightgray;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #vis {
      display: flex;
      flex-wrap: wrap-reverse;
      justify-content: space-around;
      align-items: center;
    }
    #vis .vega-bindings {
      height: 8em;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-content: center;
      border: 1px solid darkgrey;
      padding: 10px;
    }
    #vis .vega-bind {
      display: flex;
      align-items: center;
    }
    #vis .vega-bind-name {
      display: inline-block;
      width: 150px;
    }
  </style>
</head>

<div id="vis">
  </div>
  
  <script>
    const loader = document.querySelector("#loader");
    const spec = "plates.vg.json";
  	vegaEmbed('#vis', spec)
      // result.view provides access to the Vega View API
      .then(result => {
        const timeSlider = document.querySelector("input[name='time']");
        result.view.addSignalListener('model', (name, value) => {
          const models = result.view.data("models");
          const selectedModel = models.find(model => model.name === value);
          if (selectedModel) {
            timeSlider.max = selectedModel.max;
          } else {
            timeSlider.max = 200;
          }
          const clampedTime = Math.min(timeSlider.value, timeSlider.max);
          result.view.signal("time", clampedTime);
          loader.style.visibility = 'visible';
        });
        result.view.addSignalListener('time', (name, value) => {
          loader.style.visibility = 'visible';
        });
        result.view.addDataListener("world", (name, value) => {
          loader.style.visibility = 'hidden';
        });
      })
      .catch(console.warn);
  </script>
</body>

https://cdn.jsdelivr.net/npm/vega@4

https://cdn.jsdelivr.net/npm/vega-embed@3