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. StartEndDuration makes it easy to get start and end times from any combination of start, end and duration. The parameters for the DataSelectQuery match those listed in the fdsnws-dataselect specification. 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 {
  fdsndataselect,
  seismogram, seismograph,
  seismographconfig, util, luxon} from './seisplotjs_3.0.0-alpha.1_standalone.mjs';

let timeWindow = luxon.Interval.after(util.isoToDateTime('2019-07-06T03:19:53Z'), luxon.Duration.fromMillis(1000*1800));
let dsQuery = new fdsndataselect.DataSelectQuery();
console.log(`miniseed3: ${fdsndataselect.FORMAT_MINISEED_THREE}`);
dsQuery.networkCode('CO')
  .stationCode('HODGE')
  .locationCode('00')
  .channelCode('LH?')
  .format(fdsndataselect.FORMAT_MINISEED_THREE)
  .timeWindow(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 is executed after the request returns. We expect there to only be one seismogram returned from this, so we only try to display the first one.

dsQuery.querySeismograms().then(seisArray => {
    // only plot the first seismogram
    const div = document.querySelector('div#myseismograph');
    let seisConfig = new seismographconfig.SeismographConfig();
    let seisData = [];
    seisData.push(seismogram.SeismogramDisplayData.fromSeismogram(seisArray[0]));
    seisData.push(seismogram.SeismogramDisplayData.fromSeismogram(seisArray[1]));
    seisData.push(seismogram.SeismogramDisplayData.fromSeismogram(seisArray[2]));
    let graph = new 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