Skip to content

Instantly share code, notes, and snippets.

@crotwell
Last active March 29, 2018 13:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save crotwell/27eadb025d22c21b9098f4aeb7d72316 to your computer and use it in GitHub Desktop.
Save crotwell/27eadb025d22c21b9098f4aeb7d72316 to your computer and use it in GitHub Desktop.
Plotting seismic data with seisplotjs
license: gpl-3.0
scrolling: yes

Using seisplotjs-waveformplot, this plots the most recent ( more or less ) 60 seconds of seismic data as recorded in Jenkinsville, SC. The plotting uses d3 and the data is retrieved from the IRIS DMC using their dataselect web service.

See seisplotjs-waveformplot Github page for more information.

If you decide to copy/paste or reuse this, wonderful, but you need to be careful with the amount and frequency that you load data. In particular, asking for very long time intervals will take significant time to request and take a lot of memory. Secondly, it is considered rude to repeatedly reload the page to make the display act like a real time display. This will likely cause the IRIS DMC to block your requests. See the sections Considerations and Usage guidelines in the IRIS help pages for more information.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Plots most recent 60 seconds of CO.JSC.00.HHZ</h3>
<p>This is the simplest way to plot data, where seisplotjs trys to do everything for you, you only have
to create a div with some parameters. However, this is not the most flexible and not the most efficient,
especially for multiple plots. In that case more direct control over the data retrieval and more direct
interaction with the plotting is probably needed.</p>
<div class='myseisplot' net='CO' sta='JSC' loc='00' chan='HHZ' duration='60' >
</div>
<!-- important that this script element is at the end so the DOM exists before it runs. -->
<!-- older browsers ( and maybe current ones) may need to polyfill. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
<script src="https://www.seis.sc.edu/downloads/seisplotjs/seisplotjs_1.1.0_standalone.js"></script>
<script>
seisplotjs.waveformplot.createPlotsBySelector('div.myseisplot');
</script>
</body>
</html>
div.myseisplot {
height: 300px;
}
path.seispath {
stroke: skyblue;
fill: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment