-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (100 loc) · 4.34 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
<!-- State Demography Office Homepage 8/2023 A. Bickford -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Colorado State Demography Office Home Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT AWESOME CSS Source for buttons the list of icons is here: https://fontawesome.com/icons?d=gallery&p=2 -->
<!-- angle-down, angle-double-down, angle-circle-down, angle-right, angle-circle-right, the new button is in common.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" crossorigin="anonymous">
<!-- SDO CSS -->
<link type="text/css" rel="stylesheet" href="./assets/css/common.css" async="">
<!-- adding d3.js for data manipulation-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<!-- Adding Plotly.js for charting -->
<!-- Adding jquery and datatables for table production -->
<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>
<!-- SDO suport functions, genSYA, insertHTML, -->
<script src="./assets/js/funct.js"></script>
<!-- GoogleAnalytics Script -->
<script defer src="./assets/js/googleAnalytics.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-W27DQ8VRCX"></script>
<a href="#main" class="skip-main">Skip to main content</a>
</head>
<body>
<div>
<a href="https://coloradodemography.github.io/new_website/"><img class="logoSDO" src="./assets/img/SDO-1600x400.jpg" alt="Colorado Department of Local Affairs State Demography Office"></a>
</div>
<p></p>
<div w3-include-html="./assets/html/navheader.html"></div
<!-- First Grid, linked images -->
<div class="grid-container">
<div class="grid-item panel_1_1">
<div w3-include-html="./assets/html/sdotitle.html"></div>
</div>
<div class="grid-item panel_2_1" id="leftHand">
<
<div w3-include-html="./assets/html/left_hand_index.html"></div>
</div>
<div class="grid-item panel_2_2">
<a name="contenttarget"></a>
<label for="county-dropdown" alt="Download population data for specific geographies">Select County:</label>
<select class="county-dropdown" id="county-dropdown" alt="Download population data for specific geographies"></select>
</div>
<div class="grid-item panel_3_2">
<div id="PopTab"></div>
<div id="COCTab"></div>
<div id="RaceTab"></div>
</div>
<div class="grid-item panel_3_3">
<div id="HousTab"></div>
<div id="TenureTab"></div>
</div>
<div class="grid-item panel_3_4">
<div id="ACSTab"></div>
</div>
<div class="grid-item panel_4_2">
<div w3-include-html="./assets/html/bodycontent1.html"></div>
</div>
<div class="grid-item panel_4_3">
<div w3-include-html="./assets/html/bodycontent2.html"></div>
</div>
<div class="grid-item panel_4_4">
<div w3-include-html="./assets/html/bodycontent3.html"></div>
</div>
</div> <!-- End Grid -->
<script>
//Setting HTML include and Accordion
includeHTML();
document.getElementsByTagName('a')[2].focus(); //set focus to the second link (the story map)
/* Populate County Dropdown */
popDropdown('county','county-dropdown')
//generating maximum year value for estimates
var urlstr = "https://gis.dola.colorado.gov/lookups/componentYRS";
d3.json(urlstr).then(function(yeardata){
var maxest = yeardata.filter(function(d){return d.datatype == 'Estimate'});
var yrsList = maxest.map(function(d){return d.year;});
var yrvalue = d3.max(yrsList)
var acsyr = 2021; //Update this to current ACS Year
//Generate Initial Tables
genSYA("000",yrvalue);
genCOC("000",yrvalue);
genRaceEth("000",yrvalue);
genACS("000",acsyr);
genTenure("000",acsyr);
genHousing("000",yrvalue);
d3.select("#county-dropdown").on("change", function(d,i) {
var selectedfips = d3.select("#county-dropdown").property('value');
var selectedcounty = d3.select('#county-dropdown option:checked').text();
genSYA(selectedfips,yrvalue);
genCOC(selectedfips,yrvalue);
genRaceEth(selectedfips,yrvalue)
genACS(selectedfips,acsyr);
genTenure(selectedfips,acsyr);
genHousing(selectedfips,yrvalue);
});
}); //end of maximum year value
</script>
</body>
</html>