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">
    <meta charset='utf-8'>
    <title>Tutorial 1: Sine Wave</title>
    <h3>Tutorial 1: Sine Wave</h3>
    <h3>A Seismograph!</h3>
    <div class="seismograph" id="myseismograph">

    <script src=""></script>
    // your code goes here...

If this is to be hosted locally, then we need to download the standalone version of seisplotjs, from here 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 ='div#sinewave');
            let seisConfig = new seisplotjs.seismographconfig.SeismographConfig();
            seisConfig.title = "A sine wave!";
   = 25;
            let seisData = seisplotjs.seismogram.SeismogramDisplayData.fromSeismogram(seismogram);
            let graph = new seisplotjs.seismograph.Seismograph(div, seisConfig, seisData);

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.

  div.seismograph {
    height: 300px;

See it live in tutorial1.html.

Next: Let's get some real data