-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathvisualization1.html
170 lines (149 loc) · 6.13 KB
/
visualization1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Global Nuclear Energy Capacity - Visualization Protocol</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
padding-top: 20px; /* Adds space at the top of the body */
}
header {
display: flex; /* Use flexbox for layout */
justify-content: space-between; /* Space between items */
align-items: center; /* Center items vertically */
margin-bottom: 1px; /* Adds space below the header */
padding: 0 40px; /* Adds horizontal padding */
}
h1 {
margin: 0; /* Remove default margin from h1 */
}
.back-button {
display: inline-block;
padding: 10px 20px;
background-color: #64ffda; /* Light teal background */
color: #000; /* Black text */
text-decoration: none; /* Remove underline */
border-radius: 5px; /* Rounded corners */
font-weight: bold; /* Bold text */
transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
}
.back-button:hover {
background-color: #50e0c0; /* Darker teal on hover */
transform: translateY(-2px); /* Slight lift effect */
}
section {
margin: 20px 0; /* Adds vertical space between sections */
padding: 15px; /* Adds padding inside each section */
}
.data-sources-list {
list-style-type: disc; /* Use disc bullets */
padding-left: 20px; /* Add padding to the left for indentation */
margin: 10px 0; /* Add vertical margin for spacing */
}
.data-sources-list li {
margin-bottom: 5px; /* Add space between list items */
font-size: 16px; /* Adjust font size for better readability */
}
.dataset-link {
color: #64ffda;
text-decoration: none;
position: relative;
padding-right: 20px;
font-weight: 500;
transition: all 0.3s ease;
}
.dataset-link:after {
content: '↗';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
transition: transform 0.3s ease;
}
.dataset-link:hover {
color: #50e0c0;
}
.dataset-link:hover:after {
transform: translate(2px, -50%);
}
</style>
</head>
<body>
<header>
<h1>Global Nuclear Energy Capacity</h1>
<nav>
<a href="index.html" class="back-button">Back to Main Page</a>
</nav>
</header>
<main>
<section>
<h2>Timestamp</h2>
<p>
1951 - 2024
</p>
</section>
<section>
<h2>Data Source</h2>
<p>
The data for this visualization was sourced from the Global Nuclear Energy Dataset. The capacities are represented as a choropleth map, where countries are color-coded based on their nuclear energy capacity. The data is plotted using the Plotly.js library.
</p>
</section>
<section>
<h2>Dataset Link</h2>
<p>
<a href="https://globalenergymonitor.org/projects/global-nuclear-power-tracker/download-data/" class="dataset-link">Go To Webpage</a><br>
<a href="https://github.com/Axeeh/Nuclear_Energy/blob/main/datasets/Global-Nuclear-Power-Tracker-July-2024%201(Data).csv" class="dataset-link back-button1" download>Download Dataset</a>
</p>
</section>
<section>
<h2>Metadata Link</h2>
<p>
<a href="https://github.com/Axeeh/Nuclear_Energy/blob/main/metadata/Globe_metadata.txt" class="dataset-link">Globe (Meta) </a><br>
</p>
</section>
<section>
<h2>Pre-Processing Steps</h2>
<ol>
<li>Filtered data only for <code>operating</code> reactors.</li>
<li>Kept only relevant columns (<code>country</code> and <code>capacity</code>).</li>
<li>Converted the dataset in a JSON file.</li>
<li>Dropped rows with zero values.</li>
<li>Grouped countries by capacity.</li>
<li>Calculated number of reactors per country.</li>
<li>Merged capacity and reactors count</li>
</ol>
</section>
<section>
<h2>Visualization</h2>
<ul>
<li><strong>Tool Used</strong>: Plotly.js</li>
<li><strong>Chart Type</strong>: Choropleth map</li>
<li><strong>Description</strong>:
<p>
Displays the Capacity of Electricity generated by active Nuclear Reactors in MW for each country.
</p>
</li>
</ul>
</section>
<section>
<h2>Insights</h2>
<p>
The visualization reveals significant disparities in nuclear energy capacity among countries. For instance, countries like the United States and France have substantial nuclear capacities, while many others have minimal or no nuclear energy production. This data is crucial for understanding global energy trends and the role of nuclear energy in achieving sustainable energy goals.
</p>
</section>
<section>
<h2>Conclusion</h2>
<p>
Understanding global nuclear energy capacity is essential for policymakers and researchers. This visualization serves as a tool for analyzing the current state of nuclear energy and its potential for future development in the context of global energy needs and environmental sustainability.
</p>
</section>
</main>
<footer>
<p>© Carnevale Cattoni Schillaci</p>
</footer>
</body>
</html>