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" >
import * as sp from '../seisplotjs_3.1.5-SNAPSHOT_standalone.mjs';
// 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.1.5-SNAPSHOT_standalone.mjs
and put it in the same directory as our html file. The
import * as sp from "...";
code 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. Also,
seisplotjs uses a container object, SeismogramDisplayData, to
allow connecting other data, like the station metadata or the
earthquake to a seismogram. 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 * as sp from "../seisplotjs_3.1.5-SNAPSHOT_standalone.mjs";
sp.util.updateVersionText(".sp_version");
let sampleRate = 20;
const sinePeriod = 5 * sampleRate; // 5 second period
const amp = 100; // 100 count amplitude
let dataArray = new Float32Array(10 * sinePeriod).map(function (d, i) {
return Math.sin((2 * Math.PI * i) / sinePeriod) * amp;
});
let start = sp.util.isoToDateTime("2019-07-04T05:46:23");
let myseismogram = sp.seismogram.Seismogram.fromContiguousData(
dataArray,
sampleRate,
start,
);
Now we have created a contiguous (no gaps) seismogram that
represents a sine wave with a period of 5 seconds in a seismogram
with a sample rate of 20 samples per second. This seismogram is
long enough to contain 10 cycles. 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, allowing overlaying data. 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 seisData = sp.seismogram.SeismogramDisplayData.fromSeismogram(myseismogram);
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 sp.seismographconfig.SeismographConfig();
seisConfig.title = "Another sine wave!";
seisConfig.margin.top = 25;
const div_graph = new sp.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 of the html 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