-
Notifications
You must be signed in to change notification settings - Fork 1
/
viz-exp.html
161 lines (143 loc) · 5.97 KB
/
viz-exp.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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link href="nv.d3.min.css" rel="stylesheet" type="text/css">
<link href="viz-exp.css" rel="stylesheet" type="text/css">
<script src="d3.v3.js"></script>
<script src="nv.d3.min.js"></script>
<script src="chart.js"></script>
<script src="info.js"></script>
<script src="selectChartDataType.js"></script>
<script>
function show_legend_text(ltype)
{
document.getElementById("hover_legend_" + ltype).style.display="block";
}
function hide_legend_text(ltype)
{
document.getElementById("hover_legend_" + ltype).style.display="none";
}
</script>
</head>
<body onload="selectChartDataType();">
<div class="heading">
<div class="intro" id="waste">
<h1>Radioactive Waste from Fuel Cycles</h1>
<p>One of the consequences of a nuclear fuel cycle is the generation of
radioactive waste, including spent nuclear fuel. Different nuclear fuel
cycle choices result in both different amounts of spent nuclear fuel and
different locations where that fuel is stored.</p>
<p>These figures show the amount of spent nuclear fuel generated by
different nuclear fuel cycles, categorized by where the waste is
located. (Hover over the legend for more details.)</p>
</div>
<div class="intro" id="cost">
<h1>Fuel Cycle Costs</h1>
<p>Operating any energy system, including a nuclear energy system, has a
variety of different costs, including the costs of the nuclear fuel
cycle. Different nuclear fuel cycle choices result in both different
total fuel cycle costs and different distributions of those costs.</p>
<p>These figures show the impact on the fuel cycle cost of different
fuel cycle options, broken down by the cost for different ways to
store and manage spent nuclear fuel. (Hover over the legend for more
details.)</p>
</div>
<div class="logo">
<img id="mit" src="http://cloudtimes.org/wp-content/uploads/2013/03/mit-logo.jpg"/>
<img id="doe" src="New_DOE_Logo_Color_042808.png"/>
</div>
</div>
<div class="hover_legend" id="hover_legend_ws">
<div id="waste">
Wet Storage: Spent fuel that is stored in cooling pools at reactor sites.
</div>
<div id="cost">
Wet Storage: The costs to store spent fuel in cooling pools at reactor sites.
</div>
</div>
<div class="hover_legend" id="hover_legend_ds">
<div id="waste">
Dry Storage: Spent fuel that is stored above ground at reactor sites.
</div>
<div id="cost">
Dry Storage: The costs to store spent fuel above ground at reactor sites.
</div>
</div>
<div class="hover_legend" id="hover_legend_r">
<div id="waste">
Repository: Spent fuel that is disposed in a centralized geologic repository.
</div>
<div id="cost">
Repository: The costs to dispose of spent fuel in a centralized geologic repository.
</div>
</div>
<div class="hover_legend" id="hover_legend_wr">
<div id="waste">
Waste Recycling: Spent fuel that has been reprocessed for use in other
reactors and therefore does not need to be stored.
</div>
<div id="cost">
Waste Recycling: The costs to reprocess spent fuel for use in other
reactors so that it does not need storage or disposal.
</div>
</div>
<div class="legendrow">
<div class="slider" id="info">
<div id="dynamic">
Please use the slider to get a detailed breakdown for each year.
</br>
<label for=yearsel><b>Year:</b> 2000</label>
<input type=range min=2000 max=2100 value=2000 id=yearsel step=1
oninput="yearUpdate(value)" autocomplete="off">
2100<br/>
<output for=yearsel id=yearlabel>2000</output>
</div>
</div>
<div class="legend">
<div id="legend_elem1" onmouseover="show_legend_text('ws')" onmouseout="hide_legend_text('ws')"><svg><g>
<circle cx="20" cy="20" r="10" style="fill: #1f77b4"></circle>
<text class="legend" x="35" y="27" text-anchor="left">Wet Storage</text>
</g></svg></div>
<div id="legend_elem2" onmouseover="show_legend_text('ds')" onmouseout="hide_legend_text('ds')"><svg><g>
<circle cx="20" cy="20" r="10" style="fill: #aec7e8"></circle>
<text class="legend" x="35" y="27" text-anchor="left">Dry Storage</text>
</g></svg></div>
<div id="legend_elem3" onmouseover="show_legend_text('r')" onmouseout="hide_legend_text('r')"><svg><g>
<circle cx="20" cy="20" r="10" style="fill: #ffbb78"></circle>
<text class="legend" x="35" y="27" text-anchor="left">Repository</text>
</g></svg></div>
<div id="legend_elem4" onmouseover="show_legend_text('wr')" onmouseout="hide_legend_text('wr')"><svg><g>
<circle id="cost" cx="20" cy="20" r="10" style="fill: #2ca02c"></circle>
<text id="cost" class="legend" x="35" y="27" text-anchor="left">Waste Recycling</text>
</g></svg></div>
</div>
</div>
<div class="chartrow">
<div class="chart" id="chart1">
<div id="dynamic">
<div id="chart">Please move your cursor over the graph to<br />
get a detailed breakdown for each year.</div>
</div>
<svg></svg><h3>Nuclear Fuel Cycle 1</h3>
</div>
<div class="chart" id="chart2">
<div id="dynamic">
<div id="chart">Please move your cursor over the graph to<br />
get a detailed breakdown for each year.</div>
</div>
<svg></svg><h3>Nuclear Fuel Cycle 2</h3>
</div>
<div class="chart" id="chart3">
<div id="dynamic">
<div id="chart">Please move your cursor over the graph to<br />
get a detailed breakdown for each year.</div>
</div>
<svg></svg><h3>Nuclear Fuel Cycle 3</h3>
</div>
</div>
<div class="footer">
<h2 id="waste">Mass of Waste by Fuel Cycle</h2>
<h2 id="cost">Cost by Fuel Cycle</h2>
</div>
</body>