-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (55 loc) · 2.78 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>US Power Plant Fuel Sources</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h1>US Power Plants</h1>
<h2>sources of electricity</h2>
<p>Welcome! This webpage is a valuable tool for <b>data analysis and visualization</b> of US power plants. It
utilizes <b>Leaflet</b>, a widely-used open-source <b>JavaScript library</b> for interactive maps, to display
information on the location and fuel sources of power plants across the United States. By clicking on a specific
location on the map, users can access a popup containing details on the plant's name, fuel source(s), and distance
from the selected location.</p>
</header>
<section>
<div id='map'>
<button id="reset">Reset</button>
</div>
<p>The webpage also features a stats section displaying a pie chart of power generation by fuel source within 500
kilometers of the selected location, along with a breakdown of total power generation in the area by fuel source.
The combination of the interactive map and detailed data visualization makes this webpage an excellent tool for
analyzing and visualizing regional power generation trends in the United States.</p>
<h2>Exploring Regional Power Generation Capacities</h2>
<hr>
<h3 id="stats-header">Click Any Location on the Map to Discover Energy Source Statistics</h3>
<div id="stats-div" class="flex-container">
<div id="stats-svg" class="flex-item">
</div>
<div class="flex-item">
<div id="stats"></div>
</div>
</div>
</section>
<footer>
<p>Built with <b>HTML, CSS, and JavaScript</b>, this webpage offers a user-friendly interface for exploring and
understanding the complex network of power plants in the United States. Its sophisticated <b>data analysis and
visualization</b> tools are useful for researchers, policymakers, and anyone interested in energy trends and
patterns across the country.</p>
<p>Map authored by Phillip Ashford</p>
<p>Check out my <a href="https://github.com/phillipashford">Github!</a></p>
</footer>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<script src="data/power-plants.js"></script>
<script src="js/svg-generator.js"></script>
<script src="js/app.js"></script>
</body>
</html>