Skip to content
This repository has been archived by the owner. It is now read-only.
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Note:

This code has been merged directly into the main seisplotjs repo in version 2.0. Please use it instead. This repository is no longer maintained and is read-only.

npm

seisplotjs-waveformplot

Plotting seismic data in miniseed format using d3

A gist is here that can be viewed at bl.ocks.org

Another example is available at here

Example:

This is for simple usage in a web page. For more complex cases you should probably just use npm with

npm install seisplotjs-waveformplot

Create html with a div tag with the parameters and a class, in test.html. Also put a script tag at the end of the body. Note, it needs to be at the end so that we are sure the DOM has been loaded before the javascript runs.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <link rel="stylesheet" href="style.css">
</head>
<body>
<div class='myseisplot' net='CO' sta='JSC' loc='00' chan='HHZ' duration='360'>
</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="http://www.seis.sc.edu/~crotwell/seisplotjs_demo/seisplotjs-waveformplot/example/seisplotjs_waveformplot_1.2.3_standalone.js"></script>
<script>
    seisplotjs_waveformplot.createPlotsBySelector('div.myseisplot');
</script>
</body>
</html>

You must set CSS stroke and fill for the path.seisplot elements in order for the seismogram to display properly. You may also want to set the height style. The plots are in SVG and so there are many styling attributes you can apply. In style.css:

div.myseisplot {
  height: 500px;
}

path.seispath {
  stroke: skyblue;
  fill: none;
}

Load the html page in your browser and you should end up with a seismogram plot.

Please note, 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.

API Documentation

About

Plotting seismic data in miniseed format using d3

Resources

License

Packages

No packages published
You can’t perform that action at this time.