-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·207 lines (192 loc) · 9.15 KB
/
index.html
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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html>
<head>
<title>Horizontal Bar Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script src="https://cdn.plot.ly/plotly-2.24.1.min.js" charset="utf-8"></script>
<link type="text/css" rel="stylesheet" href="./css/common.css" async="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/saveSvgAsPng.js"></script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-80DP2C1J1Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-80DP2C1J1Y');
</script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<a class="skip-main" href="#main">Skip to main content</a>
<div>
<a href="https://cdola.colorado.gov/"><img class="logoSDO" src="./img/SDO-1600x400.jpg" alt="Department of Local Affairs Homepage"></a>
</div>
<div w3-include-html="./html/navheader.html"></div>
<!-- First Grid, linked images -->
<div class="grid-container2">
<div class="grid-item panel2_1_1">
<div w3-include-html="./html/sdotitle.html"></div>
</div>
<div class="grid-item app-panel_2_1" id="leftHand">
<div w3-include-html="./html/left_hand_index.html"></div>
</div>
<div class="grid-item app-panel_2_2">
<h1 class='h1_style' id="main" >Base Industries Chart</h1>
<h2 class='h2_style'>INSTRUCTIONS:</h2>
<p>
You can hover over specific bars graph to view the data for that specific point. <br>
Click on the download icon on the top right of the chart to download the chart and the underlying data.<br>
See below the chart for descriptions of the categories.
</p>
<p>
<b><i>This data visualization can only be viewed on a tablet or desktop.</i></b>
</p>
<hr>
<table class="lookup_tab" cellspacing="0" cellpadding="0">
<tr>
<td class="lookup_cll">
<label class="entry_text" for="sel" id="geo-lbl" alt='Counties' aria-label='Counties'>Counties:</label>
</td>
<td class="lookup_cll">
</td>
<td class="lookup_cll">
</td>
<td class="lookup_cll">
</td>
<td class="lookup_cll">
</td>
</tr>
<tr>
<td class="lookup_cll">
<select id="sel">
<option value="003" >Alamosa</option>
<option value="007" >Archuleta</option>
<option value="009" >Baca</option>
<option value="011" >Bent</option>
<option value="015" >Chaffee</option>
<option value="017" >Cheyenne</option>
<option value="019" >Clear Creek</option>
<option value="021" >Conejos</option>
<option value="023" >Costilla</option>
<option value="025" >Crowley</option>
<option value="027" >Custer</option>
<option value="029" >Delta</option>
<option value="033" >Dolores</option>
<option value="037" >Eagle</option>
<option value="039" >Elbert</option>
<option value="041" >El Paso</option>
<option value="043" >Fremont</option>
<option value="045" >Garfield</option>
<option value="047" >Gilpin</option>
<option value="049" >Grand</option>
<option value="051" >Gunnison</option>
<option value="053" >Hinsdale</option>
<option value="055" >Huerfano</option>
<option value="057" >Jackson</option>
<option value="061" >Kiowa</option>
<option value="063" >Kit Carson</option>
<option value="065" >Lake</option>
<option value="067" >La Plata</option>
<option value="069" >Larimer</option>
<option value="071" >Las Animas</option>
<option value="073" >Lincoln</option>
<option value="075" >Logan</option>
<option value="077" >Mesa</option>
<option value="079" >Mineral</option>
<option value="081" >Moffat</option>
<option value="083" >Montezuma</option>
<option value="085" >Montrose</option>
<option value="087" >Morgan</option>
<option value="089" >Otero</option>
<option value="091" >Ouray</option>
<option value="093" >Park</option>
<option value="095" >Phillips</option>
<option value="097" >Pitkin</option>
<option value="099" >Prowers</option>
<option value="101" >Pueblo</option>
<option value="103" >Rio Blanco</option>
<option value="105" >Rio Grande</option>
<option value="107" >Routt</option>
<option value="109" >Saguache</option>
<option value="111" >San Juan</option>
<option value="113" >San Miguel</option>
<option value="115" >Sedgwick</option>
<option value="117" >Summit</option>
<option value="119" >Teller</option>
<option value="121" >Washington</option>
<option value="123" >Weld</option>
<option value="125" >Yuma</option>
<option value="501" >Planning Region 1</option>
<option value="502" >Planning Region 2</option>
<option value="504" >Planning Region 4</option>
<option value="505" >Planning Region 5</option>
<option value="506" >Planning Region 6</option>
<option value="507" >Planning Region 7</option>
<option value="508" >Planning Region 8</option>
<option value="509" >Planning Region 9</option>
<option value="510" >Planning Region 10</option>
<option value="511" >Planning Region 11</option>
<option value="512" >Planning Region 12</option>
<option value="513" >Planning Region 13</option>
<option value="514" >Planning Region 14</option>
<option value="515" >Central Mountains</option>
<option value="516" >Eastern Plains</option>
<option value="518" >San Luis Valley</option>
<option value="519" >Western Slope</option>
<option value="521" >Denver-Boulder MSA</option>
</select>
</td>
<td class="lookup_cll">
<div class="dropdown AClass">
<button class="dropbtn" id="estimate"><i class="fas fas fa-download fa-2x" style='color: black;'></i></button>
<div class="dropdown-content">
<ul class='dd-list'>
<li><a href='https://drive.google.com/uc?export=download&id=1SNM-QZAL9mVf3vXfcEtXgtqfmbSKe4Hs' id='est_csv'>Download the Data</a></li>
<li><a href='#' id='downloadPNG' download="Base Industries.png">Download Image (PNG)</a></li>
</ul>
</div>
</div>
</td>
</tr>
</table>
<div id="container" style="width: 100%; height: 100%" >
<canvas id="canvas" width="1000" height="500">
<p>Your Browser Does Not Support Canvas</p>
</canvas>
</div>
<div id="other">
<p></p> <!-- change based on initial county -->
</div>
</div>
<div class="grid-item app-panel_3_2">
<p><b>Agriculture:</b> Jobs in agricultural production, inputs, processing, and related activities, as well as jobs supported by the agriculture industry.</p>
<p><b>Government:</b> Jobs in federal and state government, including higher education and military, along with jobs supported by government employment.</p>
<p><b>Manufacturing:</b> Jobs in manufacturing establishments and additional jobs supported by manufacturing activities.</p>
<p><b>Other Household Income:</b> Jobs providing local services and supported by resident spending of unearned income from dividends, interest, and rents.</p>
<p><b>Regional Service:</b> Jobs in construction, communications, trade & transportation, professional & business services, finance & insurance, private education & healthcare that serve a multi-county region or the nation, including jobs supported by these industries.</p>
<p><b>Retirees:</b> Jobs providing local services to retirees and supported by retiree spending from sources like Social Security, pensions, and investment income.</p>
<p><b>Tourism:</b> Jobs at resorts, tourist attractions, lodging, restaurants, retail, entertainment venues, and transportation services related to tourism, as well as additional jobs supported by tourist spending.</p>
<p><b>Transfer Payments:</b> Jobs providing services to recipients of public assistance programs and supported by their spending of transfer payment income.</p>
<p><b>Mining:</b> Jobs in mine operations, and mining support activities, as well as other jobs supported by the mining industry.</p>
<p><b>Commuter:</b> Jobs providing local services to, and supported by the spending of income earned by residents who commute to jobs outside the region.</p>
</div>
</div>
<!--<div id="exportdiv">-->
<!-- <button type="button" id="t_download" class="btn" onclick="saveSvgAsPng(document.getElementsByTagName('ctx')[0], 'diagram.png');" tabindex="8" accesskey="i">Download PNG</button>-->
<!-- </div>-->
<script>includeHTML();</script>
<script src="js/app2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>