Skip to content

Instantly share code, notes, and snippets.

@crotwell

crotwell/.block

Last active Mar 29, 2018
Embed
What would you like to do?
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
You can’t perform that action at this time.