index.html

---
# front matter tells Jekyll to process Liquid
# Front matter is a snippet of YAML placed between two triple-dashed lines at the start of a file.
# You can use front matter to set variables for the page.

layout: default
title: IOS OSD Mooring Stations
stations:
  - e01
  - scott2
  - a1
  - hak1
  - srn1
  - chat3
  - juan2
  - bp1
  - e03
  - scott3
plot_types:
  - annual-data-availability
  - monthly-data-availability
  - instrument-depths
  - raw-data
  - daily-mean-data
  - daily-climatologies
  - daily-mean-anomalies
  - monthly-mean-data
  - monthly-climatologies
  - monthly-mean-anomalies
datatypes:
  - Temperature
  - Salinity
---

<h1>{{ page.title }}</h1>
<p>
    This page hosts time series plots of temperature and salinity data from the
    Institute of Ocean Sciences (IOS) Ocean Sciences Division (OSD) mooring
    stations, located off the west coast of BC.
</p>
<a href="./map/mooring_map.png">
    <img src="./map/mooring_map.png" class="map" loading="lazy" width="600" height="450">
</a>

<div id="station-choice" class="tab">
    {% for station in site.data.stations %}
    <button class="station-tablinks" onclick="changeStation(event)" id="{{ station.id }}">
        {{ station.id | upcase }}
    </button>
    {% endfor %}
</div>

{% for station in site.data.stations %}
<p id="{{ station.id }}-description" class="station-content {{ station.id }}">
    Mooring data from station {{ station.id | upcase }}.
</p>
{% endfor %}

<div class="station-content e01 scott2 a1 hak1 srn1 chat3 juan2 bp1 e03 scott3">
<!--    Make subtab button for each station-->
    <div id="subtab-choice" class="tab">
        {% for type in page.plot_types %}
        {% assign words = type | split: "-" %}
        {% capture name %}
            {% for word in words %}
                {{ word | capitalize }}
            {% endfor %}
        {% endcapture %}
        <button class="subtab-tablinks" onclick="changeSubtab(event)" id="{{ type }}">
            {{ name }}
        </button>
        {% endfor %}
    </div>

    <div id="annual-data-availability-content" class="subtab-content">
        <h2>Annual Data Availability</h2>
        <p>
            The following plots count how many measurements are available
            for each year of the data record. Separate plots are provided
            for each of temperature and salinity.
        </p>
        {% for station in site.data.stations %}
        <div id="annual-data-availability-{{ station.id }}" class="station-content {{ station.id }}">
            {% for datatype in page.datatypes %}
            <a href="./{{ station.id }}/figures/{{ station.id }}_{{ datatype }}_annual_sampling_counts.png">
                <img src="./{{ station.id }}/figures/{{ station.id }}_{{ datatype }}_annual_sampling_counts.png" loading="lazy">
            </a>
            {% endfor %}
        </div>
        {% endfor %}
    </div>

    <div id="monthly-data-availability-content" class="subtab-content">
        <h2>Monthly Data Availability</h2>
        <p>
            The following plots count how many measurements are available for each month of the data record.
            Separate plots are provided for each of temperature and salinity.
        </p>
        {% for station in site.data.stations %}
        <div id="monthly-data-availability-{{ station.id }}" class="station-content {{ station.id }}">
            {% for datatype in page.datatypes %}
            <a href="./{{ station.id }}/figures/{{ station.id }}_{{ datatype }}_monthly_sampling_counts.png">
                <img src="./{{ station.id }}/figures/{{ station.id }}_{{ datatype }}_monthly_sampling_counts.png" loading="lazy">
            </a>
            {% endfor %}
        </div>
        {% endfor %}
    </div>

    <div id="instrument-depths-content" class="subtab-content">
        <h2>Instrument Depths</h2>

        {% for station in site.data.stations %}
        <div id="instrument-depths-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.instrument_depths }}</p>
            <a href="./{{ station.id }}/figures/{{ station.id }}_cur_ctd_depths.png">
                <img src="./{{ station.id }}/figures/{{ station.id }}_cur_ctd_depths.png"
                     loading="lazy" width="600" height="450">
            </a>
        </div>
        {% endfor %}
    </div>

    <div id="raw-data-content" class="subtab-content">
        <h2>Raw Data</h2>
        {% for station in site.data.stations %}

        <div id="raw-data-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.raw }}</p>
            <div class="grouped-plots">

                {% for depth in station.depth_list %}
                {% for datatype in page.datatypes %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_raw_{{ datatype }}_{{ depth }}m_cur_vs_ctd.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_raw_{{ datatype }}_{{ depth }}m_cur_vs_ctd.png" loading="lazy">
                </a>
                {% endfor %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>

    <div id="daily-mean-data-content" class="subtab-content">
        <h2>Daily Mean Data</h2>
        {% for station in site.data.stations %}

        <div id="daily-mean-data-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.daily_means }}</p>
            <div class="grouped-plots">

                {% for depth in station.depth_list %}
                {% if station == "e01" and depth == 35 %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_daily_mean_ts_{{ depth }}m_SST.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_daily_mean_ts_{{ depth }}m_SST.png" loading="lazy">
                </a>
                {% else %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_daily_mean_ts_{{ depth }}m.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_daily_mean_ts_{{ depth }}m.png" loading="lazy">
                </a>
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>

    <div id="daily-climatologies-content" class="subtab-content">
        <h2>Daily Climatologies</h2>

        {% for station in site.data.stations %}

        <div id="daily-climatologies-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.daily_climatologies }}</p>

            {% if station.climatology_years %}
            <div class="grouped-plots">

                {% for depth in station.depth_list %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_daily_clim_{{ station.climatology_years }}_ts_{{ depth }}m.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_daily_clim_{{ station.climatology_years }}_ts_{{ depth }}m.png" loading="lazy">
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <div id="daily-mean-anomalies-content" class="subtab-content">
        <h2>Daily Mean Anomalies</h2>

        {% for station in site.data.stations %}

        <div id="daily-mean-anomalies-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.daily_anomalies }}</p>

            {% if station.climatology_years %}
            <div class="grouped-plots">

                {% for depth in station.depth_list %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_daily_anom_ts_{{ depth }}m.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_daily_anom_ts_{{ depth }}m.png" loading="lazy">
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <div id="monthly-mean-data-content" class="subtab-content">
        <h2>Monthly Mean Data</h2>

        {% for station in site.data.stations %}

        <div id="monthly-mean-data-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.monthly_means }}</p>
            <div class="grouped-plots">

                {% for depth in station.depth_list %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_monthly_mean_ts_{{ depth }}m.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_monthly_mean_ts_{{ depth }}m.png" loading="lazy">
                </a>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>

    <div id="monthly-climatologies-content" class="subtab-content">
        <h2>Monthly Climatologies</h2>

        {% for station in site.data.stations %}

        <div id="monthly-climatologies-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.monthly_climatologies }}</p>

            {% if station.climatology_years %}
            <div class="grouped-plots">

                {% for depth in station.depth_list %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_monthly_clim_{{ station.climatology_years }}_ts_{{ depth }}m.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_monthly_clim_{{ station.climatology_years }}_ts_{{ depth }}m.png" loading="lazy">
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <div id="monthly-mean-anomalies-content" class="subtab-content">
        <h2>Monthly Mean Anomalies</h2>

        {% for station in site.data.stations %}

        <div id="monthly-mean-anomalies-{{ station.id }}" class="station-content {{ station.id }}">
            <p>{{ station.monthly_anomalies }}</p>

            {% if station.climatology_years %}
            <div class="grouped-plots">

                {% for depth in station.depth_list %}
                <a href="./{{ station.id }}/figures/{{ station.id }}_monthly_anom_ts_{{ depth }}m.png">
                    <img src="./{{ station.id }}/figures/{{ station.id }}_monthly_anom_ts_{{ depth }}m.png" loading="lazy">
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

</div>

<h2>Contact</h2>
<p>
    Data Products Team, Ocean Sciences Division<br>
    DFO.PAC.SCI.IOSData-DonneesISO.SCI.PAC.MPO@dfo-mpo.gc.ca
</p>

<script src="main.js"></script>