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