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>
    <sp-seismograph>
    </sp-seismograph>
    <h3>Another Seismograph!</h3>
    <div class="seismograph" id="sinewave">
    </div>

    <script type="module" src="https://www.seis.sc.edu/downloads/seisplotjs/seisplotjs_3.0.0-alpha.1_standalone.mjs"></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/seisplotjs_3.0.0-alpha.1_standalone.mjs 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 either put your javascript in a separate file and load it via the src attribute, or just put out javascript directly inside the bottom script element.




import {seismogram, seismograph, seismographconfig, util} from './seisplotjs_3.0.0-alpha.1_standalone.mjs';

let dataArray = new Float32Array(1000).map(function(d, i) {
  return Math.sin(2*Math.PI*i/100) * 100;
});
let sampleRate = 20;
let start = util.isoToDateTime('2019-07-04T05:46:23');
let myseismogram = seismogram.Seismogram.createFromContiguousData(dataArray, sampleRate, start);
let seisData = seismogram.SeismogramDisplayData.fromSeismogram(myseismogram);
// or in one step
seisData = seismogram.SeismogramDisplayData.fromContiguousData(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. Note that the Seismograph takes an array of SeismogramDisplayData objects. 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.


const graph = document.querySelector('sp-seismograph');
graph.seismographConfig.title = "A sine wave!";
graph.seismographConfig.margin.top = 25;
graph.seisData = [ seisData ];

A second way is to create a seismograph dynamically and then insert it into the html. We will add a second display for the same data using this method. They are equivalent, but some cases it makes more sense to find the Seismograph element and add data to it, other times it is easier to create a new element as needed.


const div = document.querySelector('div#sinewave');
const seisConfig = new seismographconfig.SeismographConfig();
seisConfig.title = "Another sine wave!";
seisConfig.margin.top = 25;
const div_graph = new seismograph.Seismograph([seisData], seisConfig);
div.appendChild(div_graph);

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 300 pixels and the width be 100% of the space available.


<style>
  sp-seismograph {
    height: 300px;
    width: 100%;
  }
</style>
        

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 can also be set up to zoom, although this can be a bit annoying at times. We can link the time scale of the two seismographs so that they zoom and drag together.


graph.seismographConfig.linkedTimeScale.link(div_graph);

See it live in tutorial1.html .

Next: Let"s get some real data