uiFBMP/sppSummary.html at main · jloomisVCE/uiFBMP · 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<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/trends.js"></script>
<script type='module' src="js/VTshape.js"></script>
<script type='text/javascript' src="js/SpeciesSelector.js"></script>
<script type='module' src="js/Trendleaflet.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>

<div class="jumbotron text-center">
<h1 style= "text-align: center"> Forest Bird Monitoring Program Dashboard </h1>
</div>

<div class="container">
<div class="row">
  <div class="col-md-5">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

  <br>
  <p><h4>Select a species of interest:</h4> <select id="Species_Select" style="background-color: white;">
    <option value=AMGO>American Goldfinch (</em>Spinus tristis</em>)</option>
    <option value=AMRE>American Redstart (</em>Setophaga ruticilla</em>)</option>
    <option value=AMRO>American Robin (</em>Turdus migratorius</em>)</option>
    <option value=BAOR>Baltimore Oriole (</em>Icterus galbula</em>)</option>
    <option value=BAWW>Black-and-white Warbler (</em>Mniotilta varia</em>)</option>
    <option value=BCCH>Black-capped Chickadee (</em>Poecile atricapillus</em>)</option>
    <option value=BHCO>Brown-headed Cowbird (</em>Molothrus ater</em>)</option>
    <option value=BHVI>Blue-headed Vireo (</em>Vireo solitarius</em>)</option>
    <option value=BLBW>Blackburnian Warbler (</em>Setophaga fusca</em>)</option>
    <option value=BLJA>Blue Jay (</em>Cyanocitta cristata</em>)</option>
    <option value=BRCR>Brown Creeper (</em>Certhia americana</em>)</option>
    <option value=BTBW>Black-throated Blue Warbler (</em>Setophaga caerulescens</em>)</option>
    <option value=BTNW>Black-throated Green Warbler (</em>Setophaga virens</em>)</option>
    <option value=CAWA>Canada Warbler (</em>Cardellina canadensis</em>)</option>
    <option value=CEDW>Cedar Waxwing (</em>Bombycilla cedrorum</em>)</option>
    <option value=COYE>Common Yellowthroat (</em>Geothlypis trichas</em>)</option>
    <option value=CSWA>Chestnut-sided Warbler (</em>Setophaga pensylvanica</em>)</option>
    <option value=DOWO>Downy Woodpecker (</em>Dryobates pubescens</em>)</option>
    <option value=EAWP>Eastern Wood-Pewee (</em>Contopus virens</em>)</option>
    <option value=GCFL>Great Crested Flycatcher (</em>Myiarchus crinitus</em>)</option>
    <option value=GCKI>Golden-crowned Kinglet (</em>Regulus satrapa</em>)</option>
    <option value=GRCA>Gray Catbird (</em>Dumetella carolinensis</em>)</option>
    <option value=HAWO>Hairy Woodpecker (</em>Dryobates villosus</em>)</option>
    <option value=HETH>Hermit Thrush (</em>Catharus guttatus</em>)</option>
    <option value=LEFL>Least Flycatcher (</em>Empidonax minimus</em>)</option>
    <option value=MAWA>Magnolia Warbler (</em>Setophaga magnolia</em>)</option>
    <option value=MODO>Mourning Dove (</em>Zenaida macroura</em>)</option>
    <option value=MOWA>Mourning Warbler (</em>Geothlypis philadelphia</em>)</option>
    <option value=MYWA>Myrtle Warbler (</em>Setophaga coronata coronata</em>)</option>
    <option value=NAWA>Nashville Warbler (</em>Oreothlypis ruficapilla</em>)</option>
    <option value=NOPA>Northern Parula (</em>Setophaga americana</em>)</option>
    <option value=NOWA>Northern Waterthrush (</em>Parkesia noveboracensis</em>)</option>
    <option value="OVEN" selected>Ovenbird (</em>Seiurus aurocapilla</em>)</option>
    <option value=PIWO>Pileated Woodpecker (</em>Dryocopus pileatus</em>)</option>
    <option value=PUFI>Purple Finch (</em>Haemorhous purpureus</em>)</option>
    <option value=RBGR>Rose-breasted Grosbeak (</em>Pheucticus ludovicianus</em>)</option>
    <option value=RBNU>Red-breasted Nuthatch (</em>Sitta canadensis</em>)</option>
    <option value=RBWO>Red-bellied Woodpecker (</em>Melanerpes carolinus</em>)</option>
    <option value=RESQ>North American Red Squirrel (</em>Tamiasciurus hudsonicus</em>)</option>
    <option value=REVI>Red-eyed Vireo (</em>Vireo olivaceus</em>)</option>
    <option value=SCJU>Slate-colored Junco (</em>Junco hyemalis  hyemalis</em>)</option>
    <option value=SCTA>Scarlet Tanager (</em>Piranga olivacea</em>)</option>
    <option value=SOSP>Song Sparrow (</em>Melospiza melodia</em>)</option>
    <option value=SWSP>Swamp Sparrow (</em>Melospiza georgiana</em>)</option>
    <option value=SWTH>Swainson's Thrush (</em>Catharus ustulatus</em>)</option>
    <option value=TUTI>Tufted Titmouse (</em>Baeolophus bicolor</em>)</option>
    <option value=VEER>Veery (</em>Catharus fuscescens</em>)</option>
    <option value=WBNU>White-breasted Nuthatch (<em>Sitta carolinensis</em>)</option>
    <option value=WIWR>Winter Wren (</em>Troglodytes hiemalis</em>)</option>
    <option value=WOTH>Wood Thrush (</em>Hylocichla mustelina</em>)</option>
    <option value=WTSP>White-throated Sparrow (</em>Zonotrichia albicollis</em>)</option>
    <option value=YBFL>Yellow-bellied Flycatcher (</em>Empidonax flaviventris</em>)</option>
    <option value=YBSA>Yellow-bellied Sapsucker (</em>Sphyrapicus varius</em>)</option>
    <option value=YSFL>Yellow-shafted Flicker (</em>Colaptes auratus auratus</em>)</option>
    <option value=YTVI>Yellow-throated Vireo (</em>Vireo flavifrons</em>)</option>
    <option value=RESQ>North American Red Squirrel (</em>Tamiasciurus hudsonicus</em>)</option>
    <option value=CHIP>Eastern Chipmunk (</em>Tamias striatus</em>)</option>
    <option value=GRSQ>Eastern Gray Squirrel (</em>Sciurus carolinensis</em>)</option>
  </select></p>
  <br>

  </div>
  <div id="relative_abundance_div" class="col-md-7">
      <div id="RelativeAbundance_State"></div>
      <br>
  </div>
</div>
<div class="row">
  <div class="col-md-8">
      <div id="trendSites" class="tabContentBot" style="height:600px; width:100%; overflow:hidden;"></div>
      <br>
  </div>
  <div class="col-md-4">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
  </div>
  <br>
  </div> <!-- End of 1st Row -->

</html>