This repository has been archived by the owner on Dec 18, 2020. It is now read-only.
forked from StartBootstrap/startbootstrap-business-casual
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharea.html
212 lines (177 loc) · 7.26 KB
/
area.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
207
208
209
210
211
212
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Parks Data Visualizations</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/business-casual.min.css" rel="stylesheet">
<!-- Chartist js script
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<head> -->
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text:"Area Changes Over Time"
},
axisX:{
interval: 1
},
axisY2:{
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(80, 66, 61, 1)",
title: "Area in Arces"
},
data: [{
type: "bar",
name: "area",
axisYType: "secondary",
color: "#318fb5",
dataPoints: [
{ y: 14075, label: "2010-2019" },
{ y: 564670, label: "1990-2009" },
{ y: 1821443, label: "1970-1989" },
{ y: 217347, label: "1950-1969"},
{ y: 765430, label: "1930-1949" },
{ y: 686225, label: "1910-1929" },
{ y: 278645, label: "1890-1909" },
{ y: 2219791, label: "1870-1889" }
]
}]
});
chart.render();
}
</script>
</head>
<body>
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">Area</span>
<span class="site-heading-lower"></span>
</h1>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
<div class="container">
<a class="navbar-brand text-uppercase text-expanded font-weight-bold d-lg-none" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mx-auto">
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="timeline.html">Timeline</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="area.html">Area</a>
</li>
<li class="nav-item px-lg-4">
<a class="nav-link text-uppercase text-expanded" href="visitors.html">Visitors</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="page-section about-heading">
<div class="container">
<div class="about-heading-content">
<div class="row">
<div class="col-xl-9 col-lg-10 mx-auto">
<div class="bg-faded rounded p-5">
<h2 class="section-heading mb-4">
<span class="section-heading-upper"></span>
<span class="section-heading-lower">How did the Average Area of U.S. National Parks Change from 1870 to 2019?</span>
</h2>
<br>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br>
<br>
<p class="mb-0">This chart shows that area size of National Parks was highest during the time periods 1870-1889 and 1970-1989. The time periods with the lowest average area size were 1950-1969 and 2010-2019.</p>
<br>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="page-section about-heading">
<div class="container">
<div class="about-heading-content">
<div class="row">
<div class="col-xl-9 col-lg-10 mx-auto">
<div class="bg-faded rounded p-5">
<h2 class="section-heading mb-4">
<span class="section-heading-upper"></span>
<span class="section-heading-lower">Presidents and Parks: Their Conservation Legacies Through the Years</span>
</h2>
<br>
<br>
<br>
<span class="section-heading-upper"><strong>1. Ulysses S. Grant: Yellowstone National Park</strong></span>
<br>
<div style="display:flex">
<div style="flex:1;padding-right:5px;">
<img src="img/grantyellowstone.jpg" height="200px" width:"300px">
</div>
<div style="flex:1;padding-left:40px;">
<img src="img/yellowstone.jpg" height="200px" width:"800px">
</div>
</div>
<br>
<p> In 1872, President Grant established the first national park in the United States. The park is among the largest within the country. Although much effort went into establishing the park, funding issues led to Yellowstone not being maintained or protected (Yellowstone National Park). </p>
<br>
<br>
<span class="section-heading-upper"><strong>2. Jimmy Carter: Parks in Alaska</strong></span>
<br>
<div style="display:flex">
<div style="flex:1;padding-right:20px;">
<img src="img/carter.jpg" height="200px" width:"300px">
</div>
<div style="flex:1;padding-left:40px;">
<img src="img/alaska.gif" height="200px" width:"800px">
</div>
</div>
<br>
<p> In 1980, President Carter signed the Alaska National Interest Lands Conservation Act. This act "protected more than 100 million acres of federal lands in Alaska, creating ten new national parks and enlarging three others" (Scott, nd.). </p>
<br>
<br>
<div>
<p><em>Several U.S. presidents have contributed to conservation efforts and environmental friendly legislation throughout the years. For instance, President Richard Nixon helped establish the Environmental Protection Agency in addition to a series of acts that proposed clean air initiatives, marine mammal conservation, endangered species protection and safe drinking water initiatives (Bove 2019). The presidents included in this section represent two leaders who established national parks consisting over a million acres.</em></p>
</div>
<!--<div class="row">
<div class="column">
<img src="img/grantyellowstone.jpg" alt="Grant" style="width:75%>
</div>
<div class="column">
<img src="img/yellowstone.jpg" alt="Yellowstone" style="width:100%">
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer text-faded text-center py-5">
<div class="container">
<p class="m-0 small">Copyright © Visualizing US National Parks 2019</p>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>