Seisplotjs Tutorial

Let"s Get Some Real Data:

See it live in tutorial2.html .

A sine wave is kind of boring, so perhaps some real data would be more interesting. We will use the IRIS FDSNWS dataselect web service to grab some actual seismic data. Seisplotjs's util module has some helper functions to create Luxon Intervals from any combination of start, end and duration. The parameters for the DataSelectQuery match those listed in the fdsnws-dataselect specification, along with some functions that can set multiple parameters at once, such a timeRange. This example only uses the simple GET style query, and so is limited to a single channel (maybe wildcarded) and single time range. DataSelectQuery also supports the POST style query that allows many channel-time range pairs to be requested at once.

import * as sp from '../seisplotjs_3.1.0_standalone.mjs';

let timeWindow = sp.util.startDuration('2019-07-06T03:19:53Z', 1800);
let dsQuery = new sp.fdsndataselect.DataSelectQuery();
dsQuery.networkCode('CO')
  .stationCode('HODGE')
  .locationCode('00')
  .channelCode('LH?')
  .timeRange(timeWindow);

One important difference here is that, unlike the previous example, getting data remotely is inherently an asynchronous operation, and so rather than return seismograms, the querySeismograms() method returns a Promise . The then() method of the promise, effectively a callback, is executed after the request returns. Since we know these seismograms are from the same station and earthquake, we can plot them all overlayed in a single seismograph.

dsQuery.querySeismograms().then(seisArray => {
    const div = document.querySelector('div#myseismograph');
    let seisConfig = new sp.seismographconfig.SeismographConfig();
    let seisData = [];
    for (let s of seisArray) {
      seisData.push(sp.seismogram.SeismogramDisplayData.fromSeismogram(s));
    }
    let graph = new sp.seismograph.Seismograph(seisData, seisConfig);
    div.appendChild(graph);
  }).catch( function(error) {
    const div = document.querySelector('div#myseismograph');
    div.innerHTML = `
      <p>Error loading data. ${error}</p>
    `;
    console.assert(false, error);
  });

See it live in tutorial2.html .

Previous: Sine wave

Next: Quakes and Channels