Seisplotjs Tutorial

Let's Get Some Real Data:

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.

            let timeWindow = new seisplotjs.util.StartEndDuration('2019-07-06T03:19:53Z', null, 1800);
            let dsQuery = new seisplotjs.fdsndataselect.DataSelectQuery();
            dsQuery.networkCode('CO')
              .stationCode('HODGE')
              .locationCode('00')
              .channelCode('LHZ')
              .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
              let seismogram = seisArray[0];
              let div = seisplotjs.d3.select('div#myseismograph');
              let seisConfig = new seisplotjs.seismographconfig.SeismographConfig();
              let seisData = seisplotjs.seismogram.SeismogramDisplayData.fromSeismogram(seismogram);
              let graph = new seisplotjs.seismograph.Seismograph(div, seisConfig, seisData);
              graph.draw();
            }).catch( function(error) {
              seisplotjs.d3.select("div#myseismograph").append('p').html("Error loading data." +error);
              console.assert(false, error);
            });
          

See it live in tutorial2.html.

Previous: Sine wave

Next: Quakes and Channels