by Chengping Chai, Charles J. Ammon, Monica Meceira and Robert B. Herrmann
This package contains source code and data for four examples of plotting 3D seismic models and data using HTML. We are using Python 3.7 for this package. In two examples, we use a dispersion model from Herrmann et al. (2013, http://www.eas.slu.edu/eqc/eqc_research/NATOMO/) and a 3D shear velocity model from Chai et al. (GRL, 2015, also at http://eqseis.geosc.psu.edu/~cchai/01research/01westernUS.html). Another example can plot cross-scetions and depth slices side by side. The dispersion data and velocity model are included in the folders RAYLU and WUS-CAMH-2015, respectively. The fourth example plots waveform using SAC files (data can be found in the folder WaveformData). Our plots also use political boundaries and coastlines data that are prepared with GMT (http://gmt.soest.hawaii.edu/). The boundary data for U.S. region are provided in the utility folder.
The python script plot_dispersion_as_html.py can be used to generate an interactive plot like WUS_dispersion_viewer.html in the Results folder. The python script plot_3D_model_as_html.py was used to generate a dynamic figure like WUS_model_viewer.html (in the Results folder). The script plot_waveform_as_html.py will plot seismograms from one event that are recorded on multiple three-component stations. The utility.py contains some Python functions used by the above scripts.
- Chai, Chengping, Charles J. Ammon, Monica Maceira, and Robert B. Herrmann. 2015. “Inverting Interpolated Receiver Functions with Surface Wave Dispersion and Gravity: Application to the Western U.S. and Adjacent Canada and Mexico.” Geophysical Research Letters 42 (11): 4359–66. https://doi.org/10.1002/2015GL063733.
- Chai, Chengping, Charles J. Ammon, Monica Maceira, and Robert B. Herrmann. 2018. “Interactive Visualization of Complex Seismic Data and Models Using Bokeh.” Seismological Research Letters 89 (2A): 668–76. https://doi.org/10.1785/0220170132.
The following python packages are required to generate interactive plots using our codes.
- numpy (version 1.21.1)
- scipy (version 1.7.0)
- bokeh (version 2.3.2)
- obspy (version 1.2.2)
Installation these packages through Anaconda (or Miniconda) is highly recommended. You can find instructions on how to install Anaconda at https://docs.continuum.io/anaconda/install.
Once you have Anaconda installed, the required packages can be installed using these commands in the terminal.
conda install numpy
conda install scipy
conda install bokeh
conda config --add channels conda-forge
conda install obspyTo generate a HTML file (Dispersion Viewer) with dispersion maps and dispersion curve plots for the dispersion model, type the following command in your terminal.
python plot_dispersion_as_html.pyA HTML file (Model Viewer) with velocity maps and velocity profile plots for the 3D velocity model can be generated by the command below.
python plot_3D_model_as_html.pyA HTML (Cross-section Viewer) file with velocity map views and cross-sections for the velocity model can be generated by the command below.
python plot_cross_sections_as_html.pyThe command below can be used to generate a HTML file (Waveform Viewer) that shows three-component seismograms and station locations side by side.
python plot_waveforms_as_html.pyThe Python script plot_3D_model_as_html.py can read in the 3D velocity model from a text file, plot the velocity model using the Bokeh package and save the model parameters as well as the visulization in a single HTML file. In the resulting HTML file, you will see a depth slice map and a profile plot side by side. The depth of the slice and the location of the profile plot can be changed with slider bars. The profile location also change with a click a grid point on the slice map. A screenshot of the HTML file is shown below.
The following figure shows the flow-chat on how we design the script.
The text file (2015GL063733-ds02.txt) contains 900 1D velocity profles for 1-degree-by-1-degree cells. The cell starts from upper left corner of the study area and then across and down (like a book). Code oc and co are used to label ocean and continent, respectively. Each profile starts with a line looks like the following. Details on how we obtain the velocity model can be found in the GRL paper.
# Earth model for cell 001 (r,c) = (001,001) Lat: 54.500 Lon: -126.500 Code: coFor each profile, the first line is number of layers. In our example, the number of layers is 99 for all profiles. The lines following the first line are model parameters for each layer. The first column is layer number. The second column is Vp in km/s. The third column is Vs in km/s. The 4th column is density in g/cm^3. The 5th column is layer thickness in km. The last column is depth from surface to the layer top in km. Other columns are not used.
In the Python script (plot_3D_model_as_html.py), we provide many customizable options in case you want to use this script for your own models. These options are saved as a Python dictionary (style_parameter) and can be changed in the main function. The following table lists these options. These options can be changed by editing the script. Optimal values of some parameters can be found by trying different values.
| Parameters of style_parameter | Functionality |
|---|---|
| html_title | title of the HTML page tab |
| xlabel_fontsize | fontsize of x axis label |
| xtick_label_fontsize | fontsize of x axis ticks |
| title_font_size | fontsize of the figure title |
| annotating_text_font_size | fontsize of the label text |
| map_view_ndepth | number of depth (horizontal layers) |
| nlat | number of cells in latitude direction |
| nlon | number of cells in longitude direction |
| dlat | latitude interval |
| dlon | longitude interval |
| map_view_figure_lat_min | minimum latitude of the velocity map figure |
| map_view_figure_lat_max | maximum latitude of the velocity map figure |
| map_view_figure_lon_min | minimum longitude of the velocity map figure |
| map_view_figure_lon_max | maximum longitude of the velocity map figure |
| map_view_image_lat_min | minimum latitude of the velocity image |
| map_view_image_lat_max | maximum latitude of the velocity image |
| map_view_image_lon_min | minimum longitude of the velocity image |
| map_view_image_lon_max | maximum longitude of the velocity image |
| map_view_plot_width | width of the velocity map figure in pixel |
| map_view_plot_height | height of the velocity map figure in pixel |
| map_view_title | title of the velocity map figure |
| map_view_xlabel | x axis label of the velocity map figure |
| map_view_ylabel | y axis label fo the velocity map figure |
| map_view_tools | interactive tools to be used for the velocity map figure |
| map_view_default_index | depth index of the default (prior to clicking) velocity map |
| map_view_depth_label_lon | longitude to place the depth label |
| map_view_depth_label_lat | latitude to place the depth label |
| map_view_depth_box_lon | longitude of the background box beneath the depth label |
| map_view_depth_box_lat | latitude of the background box beneath the depth label |
| map_view_depth_box_width | width of the background box in pixel |
| map_view_depth_box_height | height of the background box in pixel |
| map_view_grid_width | width of the rectangles that represent the model grid |
| map_view_grid_height | height of the rectangles that represent the model grid |
| spread_factor | a constant used to control the spread of color scale |
| min_vs_range | minimum spead allowed for the color scale |
| colorbar_title | title of the colorbar |
| colorbar_plot_height | height of the colorbar plot |
| profile_ndepth | number of layers used for the profile plot |
| profile_default_index | default index of the profile plot |
| profile_plot_width | width of the profile plot in pixel |
| profile_plot_height | height of the profile plot in pixel |
| profile_plot_xmin | minimum x of the profile plot |
| profile_plot_xmax | maximum x of the profile plot |
| profile_plot_ymin | minimum y of the profile plot |
| profile_plot_ymax | maximum y of the profile plot |
| profile_plot_tools | interactive tools to be used for the profile plot |
| profile_title | title of the profile plot |
| profile_lat_label_x | x of the latitiude label |
| profile_lat_label_y | y of the latitude label |
| profile_lon_label_x | x of the longitude label |
| profile_lon_label_y | y of the longitude label |
| profile_label_box_x | x of the background box for the latitude and longitude labels |
| profile_label_box_y | y of the background box for the latitude and longitude labels |
| profile_label_box_width | width of the background box in pixel |
| profile_label_box_height | width of the background box in pixel |
| depth_slider_title | title of the depth slider |
| profile_slider_title | title of the profile location slider |
| button_ndepth | number of depth allow for the text output |
| button_width | width of the data downloading buttons |
| simple_text_button_label | button label for the simple text button |
| model96_button_label | button label for the model96 button |
| annotation_plot_width | width of the annotating text at the bottom of the HTML page |
| annotation_plot_height | height of the annotating text at the bottom of the HTML page |
| annotating_html01 | content of the annotating text at the lower left corner |
| annotating_html02 | content of the annotating text at the lower right corner |
| left_column_width | width of the left part of the HTML page |
| right_column_width | width of the right part of the HTML page |
| library_source | include the Bokeh libraries in the HTML file (inline) or not (CDN) |
| vmodel_filename | filename of the 3D velocity model |
| html_filename | filename of the output HTML file |
- Map projections are not supported
- The slider value does not change with clicking
The Python script plot_cross_sections_as_html.py can plot the 3D velocity model as depth slices and cross-sections side by side. The input file for this example is the same as the model viewer example. The output HTML allows user to slice the 3D model in three different directions. A screenshot of the HTML file is shown below.
The Python script plot_cross_sections_between_two_points_as_html.py can plot a cross-section between two points along a great arc. The two points are specified in the main function of the script. Other options are similar.
| Parameters of style_parameter | Functionality |
|---|---|
| html_title | title of the HTML page tab |
| xlabel_fontsize | fontsize of x axis label |
| xtick_label_fontsize | fontsize of x axis ticks |
| title_font_size | fontsize of the figure title |
| annotating_text_font_size | fontsize of the label text |
| map_view_ndepth | number of depth (horizontal layers) |
| nlat | number of cells in latitude direction |
| nlon | number of cells in longitude direction |
| map_view_figure_lat_min | minimum latitude of the velocity map figure |
| map_view_figure_lat_max | maximum latitude of the velocity map figure |
| map_view_figure_lon_min | minimum longitude of the velocity map figure |
| map_view_figure_lon_max | maximum longitude of the velocity map figure |
| map_view_image_lat_min | minimum latitude of the velocity image |
| map_view_image_lat_max | maximum latitude of the velocity image |
| map_view_image_lon_min | minimum longitude of the velocity image |
| map_view_image_lon_max | maximum longitude of the velocity image |
| map_view_plot_width | width of the velocity map figure in pixel |
| map_view_plot_height | height of the velocity map figure in pixel |
| map_view_title | title of the velocity map figure |
| map_view_xlabel | x axis label of the velocity map figure |
| map_view_ylabel | y axis label fo the velocity map figure |
| map_view_tools | interactive tools to be used for the velocity map figure |
| map_view_default_index | depth index of the default (prior to clicking) velocity map |
| map_view_depth_label_lon | longitude to place the depth label |
| map_view_depth_label_lat | latitude to place the depth label |
| map_view_depth_box_lon | longitude of the background box beneath the depth label |
| map_view_depth_box_lat | latitude of the background box beneath the depth label |
| map_view_depth_box_width | width of the background box in pixel |
| map_view_depth_box_height | height of the background box in pixel |
| map_view_grid_width | width of the rectangles that represent the model grid |
| map_view_grid_height | height of the rectangles that represent the model grid |
| spread_factor | a constant used to control the spread of color scale |
| min_vs_range | minimum spead allowed for the color scale |
| colorbar_title | title of the colorbar |
| colorbar_plot_height | height of the colorbar plot |
| depth_slider_title | title of the depth slider bar |
| profile_slider_title | title of the profile location slider |
| annotation_plot_width | width of the annotating text at the bottom of the HTML page |
| annotation_plot_height | height of the annotating text at the bottom of the HTML page |
| annotating_html01 | content of the annotating text at the lower left corner |
| cross_lat_plot_width | width of the cross-section along latitude in pixel |
| cross_lat_plot_height | height of the cross-section along latitude in pixel |
| cross_lat_default_index | index of the default view of the latitude cross-section |
| lat_slider_title | title of the latitude slider bar |
| cross_lat_view_label_lon | position (longitude value) of place the latitude label |
| cross_lat_view_lable_depth | position (depth value) of place the latitude label |
| cross_view_vs_min | minimum of the color scale |
| cross_view_vs_max | maximum of the color scale |
| cross_ddpeth | the step size of the cross-section along the depth direction |
| cross_dlat | the step size of the cross-section along the latitude direction |
| cross_dlon | the step size of the cross-section along the longitude direction |
| cross_lat_view_title | title of the cross-section plot along the latitude direction |
| cross_lat_view_tools | interactive tools to be used for the latitude cross-section |
| cross_lon_plot_width | width of the cross-section along longitude in pixel |
| cross_lon_plot_height | height of the cross-section along longitude in pixel |
| cross_lon_default_index | index of the default view of the longitude cross-section |
| lon_slider_title | title of the longitude slider bar |
| cross_lon_view_label_lat | position (latitude value) of place the longitude label |
| cross_lon_view_lable_depth | position (depth value) of place the longitude label |
| cross_lon_view_title | title of the cross-section plot along longitude |
| cross_lon_view_tools | interactive tools to be used for the longitude cross-section |
| left_column_width | width of the left part of the HTML page |
| right_column_width | width of the right part of the HTML page |
| library_source | include the Bokeh libraries in the HTML file (inline) or not (CDN) |
| vmodel_filename | filename of the 3D velocity model |
| html_filename | filename of the output HTML file |
- Map projections are not supported
- The slider value does not change with clicking
Another example can visualize dispersion models in map view and as dispersion curves on a same HTML page. A screenshot of the HTML file is shown below.
| Parameters of style_parameter | Functionality |
|---|---|
| html_title | title of the HTML page tab |
| xlabel_fontsize | fontsize of x axis label |
| xtick_label_fontsize | fontsize of x axis ticks |
| title_font_size | fontsize of the figure title |
| annotating_text_font_size | fontsize of the label text |
| marker_size | size of dots in the map view |
| selected_marker_size | size of the selected dot in the map view |
| map_view_lat_min | minimum latitude of the dispersion map figure |
| map_view_lat_max | maximum latitude of the dispersion map figure |
| map_view_lon_min | minimum longitude of the dispersion map figure |
| map_view_lon_max | maximum longitude of the dispersion map figure |
| map_view_plot_width | width of the dispersion map figure in pixel |
| map_view_plot_height | height of the dispersion map figure in pixel |
| map_view_title | title of the dispersion map figure |
| map_view_tools | interactive tools to be used for the dispersion map plot |
| map_view_xlabel | x axis label of the dispersion map figure |
| map_view_ylabel | y axis label fo the dispersion map figure |
| map_view_default_index | period index of the default (prior to clicking) dispersion map |
| map_view_period_label_lon | position (longitude) of the period label in the map view plot |
| map_view_period_label_lat | position (latitude) of the period label in the map view plot |
| map_view_period_box_lon | position (longitude) of the outline box for the period label |
| map_view_period_box_lat | position (latitude) of the outline box for the period label |
| map_view_period_box_width | width of the outline box for the period label |
| map_view_period_box_height | height of the outline box for the period label |
| nan_value | a value used to replace a missing data point |
| nan_color | a color for missing data points |
| spread_factor | a constant used to control the spread of color scale |
| colorbar_title | title of the colorbar |
| colorbar_plot_height | height of the colorbar plot |
| period_slider_plot_width | width of the period slider bar |
| period_slider_title | title of the period slider |
| curve_default_index | default index of the dispersion curve |
| curve_title | title of the dispersion curve plot |
| curve_xlabel | x axis label of the dispersion curve plot |
| curve_ylabel | y axis label of the dispersion curve plot |
| curve_plot_width | width of the dispersion curve plot |
| curve_plot_height | height of the dispersion curve plot |
| curve_x_min | minimum of the x axis scale |
| curve_x_max | maximum of the x axis scale |
| curve_y_min | minimum of the y axis scale |
| curve_y_max | maximum of the y axis scale |
| curve_lat_label_x | position (x axis) of the latitude label |
| curve_lat_label_y | position (y axis) of the latitude label |
| curve_lon_label_x | position (x axis) of the longitude label |
| curve_lon_label_y | position (y axis) of the longitude label |
| curve_label_box_x | position (x axis) of the outline box for the latitude and longitude labels |
| curve_label_box_y | position (y axis) of the outline box for the latitude and longitude labels |
| curve_label_box_width | width of the outline box |
| curve_lable_box_height | height of the outline box |
| curve_slider_title | title of the curve slider bar |
| annotation_plot_width | width of the annotating text at the bottom of the HTML page |
| annotation_plot_height | height of the annotating text at the bottom of the HTML page |
| annotating_html01 | content of the annotating text at the lower left corner |
| annotating_html02 | content of the annotating text at the lower right corner |
| left_column_width | width of the left part of the HTML page |
| right_column_width | width of the right part of the HTML page |
| library_source | include the Bokeh libraries in the HTML file (inline) or not (CDN) |
| dispersion_folder | the folder for the dispersion model |
| html_filename | filename of the output HTML file |
- Map projections are not supported
- The slider value does not change with clicking
The Waveform Viewer plots three-component seismograms from multiple stations with a station map on the side. A screenshot of the HTML file is shown below.
| Parameters of style_parameter | Functionality |
|---|---|
| html_title | title of the HTML page tab |
| xlabel_fontsize | fontsize of x axis label |
| xtick_label_fontsize | fontsize of x axis ticks |
| title_font_size | fontsize of the figure title |
| marker_size | size of dots in the map view |
| selected_marker_size | size of the selected dot in the map view |
| event_marker_size | size of the event symbol in the map view |
| map_view_lat_min | minimum latitude of the station map figure |
| map_view_lat_max | maximum latitude of the station map figure |
| map_view_lon_min | minimum longitude of the station map figure |
| map_view_lon_max | maximum longitude of the station map figure |
| map_view_plot_width | width of the station map figure in pixel |
| map_view_plot_height | height of the station map figure in pixel |
| map_view_title | title of the station map figure |
| map_view_tools | interactive tools to be used for the station map plot |
| map_view_xlabel | x axis label of the station map figure |
| map_view_ylabel | y axis label fo the station map figure |
| curve_title | title of the waveform plots |
| curve_xlabel | x axis label of the waveform plots |
| curve_ylabel | y axis label of the waveform plots |
| curve_plot_width | width of the waveform plots |
| curve_plot_height | height of the waveform plots |
| curve_default_index | default index of the station that recored the seismograms |
| curve_slider_title | 'title of the curve slider bar' |
| curve_reftime_label_x | position (x) of the reference time label |
| curve_reftime_label_y | position (y) of the reference time label |
| curve_channel_label_x | position (x) of the channel label |
| curve_channel_label_y | position (y) of the channel label |
| curve_filter_freqmin | minimum frequency of the bandpass filter |
| curve_filter_freqmax | maximum frequency of the bandpass filter |
| curve_taper_percentage | percentage of the taper |
| annotation_plot_width | width of the annotating text at the bottom of the HTML page |
| annotation_plot_height | height of the annotating text at the bottom of the HTML page |
| annotating_html01 | content of the annotating text at the lower left corner |
| annotating_html02 | content of the annotating text at the lower right corner |
| left_column_width | width of the left part of the HTML page |
| right_column_width | width of the right part of the HTML page |
| library_source | include the Bokeh libraries in the HTML file (inline) or not (CDN) |
| waveform_folder | the folder for the wavefom data |
| html_filename | filename of the output HTML file |
- Map projections are not supported
- The slider value does not change with clicking