FBMP_dashboard/siteSummary.html at main · HallworthMT/FBMP_dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
  <title>Transect Spotlight</title>
  <link rel="icon" type = "jgp" href="etc/VCE bird sun only.jpg" />
<head>
<meta charset="utf-8"/> <!-- resolve 'character encoding' error -->
<!-- don't allow the browser to cache results -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.min.css" integrity="sha512-KJRB1wUfcipHY35z9dEE+Jqd+pGCuQ2JMZmQPAjwPjXuzz9oL1pZm2cd79vyUgHQxvb9sFQ6f05DIz0IqcG1Jw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.min.js" integrity="sha512-Io0KK/1GsMMQ8Vpa7kIJjgvOcDSwIqYuigJEYxrrObhsV4j+VTOQvxImACNJT5r9O4n+u9/58h7WjSnT5eC4hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-minimap/3.6.1/Control.MiniMap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="css/common_page.css">

<script type='module' scr="./js/VTshapes.js"></script>
<script type='module' src="./js/trend_dotplot.js"></script>
<script type='module' src="./js/Site_abundance.js"></script>
<script type='module' src="./js/yearSurveyed.js"></script>
<script type='module' src="./js/siteInset.js"></script>
<script type='module' src="./js/siteTrendDonut.js"></script>

<style>
  .tooltip {
position: absolute;
text-align: center;
padding: 8px;
font: 12px sans-serif;
background: #F9F9F9;
border: 1px solid #888;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1 style= "text-align: center;">Site Summary </h1>
</div>

<div class="container-fluid" style="margin: 30px;">
  <div class="row" style="height: 600px; width: 100%">
      <p>Use the dropdown menu above the map on the left to select a Study Site. The survey transect will appear on the map, and the species chart and trend graphic will update. The chart in the center displays the relative abundance of each species detected at the selected point. To view each species' trend, hover over the trend lines. Species are indicated by their <a href="https://vtecostudies.org/wp-content/uploads/2014/08/vce-fbmp-four-letter-codes.pdf" target="_blank" rel="noopener noreferrer">4-letter code</a>.</p>
    <div class="col-lg-4" style="width:100%">
      <div class="row">
        <p><h4>Select a survey site:</h4>&nbsp</p>
        <select id="SelectSite" style="height:40px;margin-bottom:10px;"></select>
        &#13
      </div> <!-- end row within column -->
      <div class="row" style="height: 500px" id ="SiteFocusPlot"></div>
    </div>
  <!--   <div class="row" id="relative_abundance_div" style="position: relative; height: 50%; border: black">
        <div id="RelativeAbundance_State"></div>
      </div> -->
    <div class="col-lg-4" style="width:100%">
      <div class="row" style="height: 400px;" id="site_abundance_div">
        <div id="Site_Relative_Abundance" style="height: 100%; width:100%; overflow: hidden;"></div>
      </div>
      <div class="row" style="margin: auto; height: 5%; width: 90%">
        <div style="background-color: rgb(235, 237, 238);
                        border-radius: 10px;
                        padding: 15px;
                        border-color: black;
                        border-width: 3;
                        text-align: left;">
        <i class="fa fa-binoculars" aria-hidden="true" style="float:left; font-size: 48px; padding: 5px"></i>
            <p style="font-weight: bold">This transect was surveyed between <span id="SiteSurveyYears"></span></p>
            <span id="SiteResearchers"></span>
            </div>
      </div>
    </div>

    <div class="col-lg-4" style="width:100%">
      <div class="row" style="height: 500px;" id="TransTrend_doughnut">
        <div id="TransTrendCircle" style="height: 100%; width:100%"></div>
      </div>
    </div>
  </div>
  <hr>
  <p>
    <a href="/FBMP_dashboard" id="home_route" class="landing-item-link">Back to home</a>
    <a href="https://vtecostudies.org">
      <img src="/etc/VCE_logo_vertical_RGB_transparent.png" class="landing-item-logo">
    </a>
  </p>
</div>
</body>
</html>