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);
Next: Let"s get some real data