FBMP_dashboard/sppSummary.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
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
  <title>Species 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>

<script type='module' src="./js/sppSummary.js"></script>
<script type='module' scr="./js/VTshapes.js"></script>

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

<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;
}

.dot {
  height: 12px;
  width: 12px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}
</style>
</head>
<body>
<div class="jumbotron text-center" style="height: 25px;">
<h1 style= "text-align: center;">Species Focus</h1>
</div>

<div class="container-fluid" style="margin: 30px;">
  <div class="row" style="height:750px;">
    <div class="col-lg-4" style="width:100%">
      <div class="row">
      <p>Select a species from the dropdown menu to view its long-term population trend at all sites combined. Hover over the chart to see relative abundance by year. The grey outline indicates the 95% confidence interval of relative abundance. </p>
      <p><h4>Select a species of interest:</h4></p>
      <p><select id="Species_Select" style="background-color: white;"></select></p>
      <br>
      <br>
      </div>
      <div class="row" style="height: 100%; position: relative">
        <div id="relative_abundance_div" style="height: 75%; width: 100%; position: relative">
          <div id="RelativeAbundance_State"></div>
        </div>
      </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%">
      <p style="min-height:120px;">
        In the map below the color of the dot indicates whether your selected species is signficantly
        increasing (<span class="dot" style="background-color: blue;"></span>),
        possibly increasing (<span class="dot" style="background-color: blue; opacity: 0.5;"></span>),
        possibly decreasing (<span class="dot" style="background-color: red; opacity: 0.5;"></span>), or
        decreasing (<span class="dot" style="background-color: red;"></span>) at a given site.
        Click on the dot to see the name of the study site and the species' population trend estimate for that site.
      </p>
      <div id="trendSites" class="tabContentBot" style="height:600px; width:100%; overflow:hidden;"></div>
      <br>
    </div>

    <div class="col-lg-4" id="ABUNDANCE_SITE_div" style="width:100%">
      <p style="min-height:120px;">
        The map below shows the relative abundance of the selected species at each study site by the size
        of the circle. Click on the circle to display the site name and the mean abundance at that site.
      </p>
      <div id="ABUNSites" style="height:600px; width:100%; overflow:hidden;"></div>
    </div>
  </div>
</div> <!-- end container -->

<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>


</body>
</html>