Seisplotjs Tutorial

Draw a Sine Wave:

See it live in tutorial1.html.

Lets start by plotting a seismogram. First we need an html file to put the plot in, something like this:


<html lang="en">
  <head>
    <meta charset='utf-8'>
    <title>Tutorial 1: Sine Wave</title>
  </head>
  <body>
    <h3>Tutorial 1: Sine Wave</h3>
    <h3>A Seismograph!</h3>
    <div class="seismograph" id="myseismograph">
    </div>

    <script src="https://www.seis.sc.edu/downloads/seisplotjs/seisplotjs_2.0.0_standalone.js"></script>
    <script>
    // your code goes here...
    </script>
  </body>
</html>
          

If this is to be hosted locally, then we need to download the standalone version of seisplotjs, from here http://www.seis.sc.edu/downloads/seisplotjs/seisplotjs_2.0.0_standalone.js and put it in the same directory as our html file. The <script src="..."> tag will also need to be changed to just the local link.

Now we need a seismogram to plot. In seisplotjs, we refer to the machine that recorded the data as a seismometer, the actual data as a seismogram, and the plot as a seismograph. The last one is not as common, but it helps to have names for things. We will create a fake seismogram with a sine wave. You may wish to put your javascript in a separate file and load it via the src attribute, but for now we will just put out javascript directly inside the bottom script element.


            let dataArray = new Float32Array(1000).map(function(d, i) {
              return Math.sin(2*Math.PI*i/100) * 100;
            });
            let sampleRate = 20;
            let start = seisplotjs.moment.utc('2019-07-04T05:46:23Z');
            let seismogram = seisplotjs.seismogram.Seismogram.createFromContiguousData(dataArray, sampleRate, start);
          

Now we have created a contiguous (no gaps) seismogram that represents a sine wave with a period of 100 samples in a seismogram with a sample rate of 20 samples per second. So this sine wave should have a period of 5 seconds. The start time is given in UTC as all seismic data should be. To display this data we need a Seismograph to put it in and a SeismographConfig to configure the Seismograph. We also put the seismogram inside a SeismogramDisplayData object. In this case it doesn't matter much, but later we will want to attach the Channel, a Quake and maybe other items to the seismogram and the SeismogramDisplayData object allows that. Just for fun we add a title and give a bit of space at the top for the title to be without overlapping the seismograph.


            let div = seisplotjs.d3.select('div#sinewave');
            let seisConfig = new seisplotjs.seismographconfig.SeismographConfig();
            seisConfig.title = "A sine wave!";
            seisConfig.margin.top = 25;
            let seisData = seisplotjs.seismogram.SeismogramDisplayData.fromSeismogram(seismogram);
            let graph = new seisplotjs.seismograph.Seismograph(div, seisConfig, seisData);
            graph.draw();
          

We should have a seismograph displayed. But it might be a bit small, so let's make it bigger. We will style it with CSS. In the <head> near the top we will add a <style> element to make the height be 450 pixels and the width be 100% of the space available. Note also that zoom in and out by double click and shift-double click plus dragging left and right is enabled by default, give it a try. The mouse wheel also zooms, although this can be a bit annoying at times.


<style>
  div.seismograph {
    height: 300px;
  }
</style>
          

See it live in tutorial1.html.

Next: Let's get some real data