-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
144 lines (134 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nuclear Energy Analysis</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<link rel="icon" href="images/logo.png" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="loading-animation">
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#64ffda" stroke-width="8" fill="none" stroke-dasharray="251" stroke-dashoffset="251">
<animate attributeName="stroke-dashoffset" dur="2s" values="251;0" fill="freeze" />
</circle>
</svg>
</div>
<header>
<nav class="navbar">
<div class="nav-brand">
<a href="#overview" style="color: inherit; text-decoration: none;">Nuclear Energy Analysis</a>
</div>
<ul class="nav-links">
<li><a href="#nuclear-map">Capacity</a></li>
<li><a href="#efficiency">Generation</a></li>
<li><a href="#comparison">Incidents</a></li>
<li><a href="#waste">Waste</a></li>
</ul>
</nav>
</header>
<main>
<section id="overview" class="section">
<h2>Introduction</h2>
<p class="intro-text">
What role does nuclear energy play in shaping our future? How does it compare to other energy sources in terms of sustainability, safety, and efficiency? This set of data visualizations provides a comprehensive exploration of nuclear energy's evolution, its impact on global energy production, and its potential to drive a low-carbon future. Through detailed insights, we examine its benefits, challenges, and its place in the broader energy landscape.
</p>
<p class="intro-text">
Explore comprehensive data visualizations about nuclear energy efficiency,
safety records, and environmental impact over the past decades.
</p>
</section>
<section id="nuclear-map" class="section">
<h2>Global Nuclear Energy Capacity</h2>
<div id="map-container" class="visualization-container">
</div>
<div class="description">
<p>
This visualization provides an overview of the global nuclear energy capacity by country. It highlights the total capacity in megawatts (MW) with data from 1951 to 2024. 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. 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>
</div>
<a href="visualization1.html" class="link-a">View Visualization Protocol</a>
</section>
<section id="efficiency" class="section">
<h2>Electricity Generation (TWh)</h2>
<div class="flourish-embed flourish-bar-chart-race" data-src="visualisation/21051954"><script src="https://public.flourish.studio/resources/embed.js"></script><noscript><img src="https://public.flourish.studio/visualisation/21051954/thumbnail" width="100%" alt="bar-chart-race visualization" /></noscript></div> <p>This race chart visually represents the progression of electricity generation from nuclear reactors for various countries from 2000 to 2023. It dynamically illustrates how each country’s nuclear energy production has evolved over time, highlighting trends, key shifts in rankings, and changes in output levels. The animation provides a clear and engaging way to observe the global and regional landscape of nuclear power generation, showcasing leaders and emerging contributors in the field.</p>
</div>
<a href="visualization2.html" class="link-a">View Visualization Protocol</a>
</section>
<section id="comparison" class="section">
<h2>Incidents Analysis</h2>
<div class="description" style="display: flex; align-items: center;">
<div class="flourish-embed flourish-sankey" data-src="visualisation/21103223"><script src="https://public.flourish.studio/resources/embed.js"></script><noscript><img src="https://public.flourish.studio/visualisation/21103223/thumbnail" width="100%" alt="sankey visualization" /></noscript></div>
<div class="flourish-embed" data-src="story/2815036"><script src="https://public.flourish.studio/resources/embed.js"></script><noscript><img src="https://public.flourish.studio/story/2815036/thumbnail" width="100%" alt="visualization" /></noscript></div>
</div>
<div class="description">
<p>
The Chernobyl disaster started in 1986's April 26th, when the Chernobyl's nuclear power plant reactor caught on fire, lasting for 10 days, resulting in the unprecedented release of radioactive material from a nuclear reactor. The power plant is located at 100 km from Kievin (Ukraine), but the effects of this accident reached far beyond its country borders.
The assessment of the radionuclide intake with food and drinking water was based primarily on several measurements of I-131, Cs-134, and Cs-137 that were performed all over Europe, which are the radioisotopes reported in this dataset.
</p>
</div>
<div class="visualization-container">
<div class="flourish-embed flourish-chart" data-src="visualisation/21052744"><script src="https://public.flourish.studio/resources/embed.js"></script><noscript><img src="https://public.flourish.studio/visualisation/21052744/thumbnail" width="100%" alt="chart visualization" /></noscript></div>
</div>
<div class="description">
<p>
The plot showcases a clear timeline of nuclear incidents from 1945 to 2015. The dramatic spike in 1986 highlights the catastrophic Chernobyl nuclear disaster, one of the most severe nuclear accidents in history. The accident released massive amounts of radioactive material into the environment, affecting not only the Soviet Union (now Ukraine, Belarus, and Russia) but also much of Europe.
</p>
</div>
<a href="visualization3.html" class="link-a">View Visualization Protocol</a>
</section>
<section id="waste" class="section">
<h2>Nuclear Waste</h2>
<div style="display: flex; align-items: center;">
<div class="description" style="flex: 1;">
<p>Nuclear waste is the byproduct of nuclear power generation, medical treatments, and other applications of nuclear technology. It varies significantly in its volume, contamination levels, and the intensity of its radioactivity. While low-level waste dominates in volume (90%), it contributes only a negligible amount of radioactivity (1%), highlighting its minimal hazard. On the other hand, high-level waste, though just 3% of the total volume, carries a staggering 95% of the radioactivity, underscoring the need for robust containment and long-term storage solutions. Intermediate-level waste, at 7% of the volume and 4% of radioactivity, bridges the gap between the two extremes, reflecting moderate contamination levels requiring careful handling.</p>
</div>
<div class="flourish-embed flourish-hierarchy" data-src="visualisation/21098539" style="flex: 1; height: 600px;"><script src="https://public.flourish.studio/resources/embed.js"></script><noscript><img src="https://public.flourish.studio/visualisation/21098539/thumbnail" width="100%" alt="hierarchy visualization" /></noscript></div>
</div>
<div style="display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0;">
<div style="flex: 1; display: flex; justify-content: center; align-items: center;">
<img src="images/nuclear-waste.jpg" alt="Nuclear Waste" style="max-width: 100%; height: 800px; object-fit: cover;" />
</div>
<div class="description" style="flex: 1; margin-left: 0px;">
<p>The largest amounts of radioactive elements like uranium and radon are actually released by coal, not nuclear energy. Burning millions of tons of coal each year leaves ashes as a waste product, which includes about 36,000 tons of radioactive materials globally. This material—comprised of uranium and thorium—is less radioactive than high-level nuclear waste, but there’s far more of it, and it is handled with far less care, exposed to nearby populations constantly.
Nuclear power plants produce approximately 6,290 tons of high-level radioactive waste annually in the form of spent nuclear fuel. Nuclear waste is highly radioactive but tightly contained in pools, dry casks, or other secure facilities, minimizing its environmental impact. (IAEA)
</p>
</div>
</div>
<a href="visualization4.html" class="link-a">View Visualization Protocol</a>
</section>
</main>
<footer>
<section class="footer-content">
<div class="footer-left">
<div class="data-sources">
<h3>Nuclear Energy Efficency</h3>
<p>Data Analysis on Nuclear Energy efficiency and Pollution</p>
</div>
<div class="project-info">
<p>©</p>
<p>Alessio Carnevale</p>
<p>Manuel Cattoni</p>
<p>Carlo Schillaci</p>
</div>
</div>
<div class="footer-right">
<div class="institution-info">
<h3>SUPSI</h3>
<p>Bachelor in Data Science and Artificial Intelligence</p><br>
<p>Data Visualization Course</p>
<p>Teacher: Giovanni Profeta</p>
<p>Academic year: 2024-2025</p>
</div>
</div>
</section>
</footer>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>