forked from GustavLindberg99/NuclideChart
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex3.html
176 lines (153 loc) · 7.41 KB
/
index3.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
<html>
<head>
<title>Nuclide Chart</title>
<script type="text/javascript" src="./javascript-extras/jsbits/extras.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="zoomslider.js"></script>
<script type="text/javascript" src="scroll.js"></script>
<script type="text/javascript" src="d3.min.js"></script>
<script type="text/javascript" src="chart.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="zoomslider.css"/>
<link rel="stylesheet" type="text/css" href="chartstyle.css"/>
</head>
<body>
<div id="topbar">
<a id="downloadChart" disabled download>
<img class="inline" src="svg.svg" alt=""/>
Download Chart (SVG)
</a>
<a href="data.csv" download>
<img class="inline" src="csv.svg" alt=""/>
Download Data (CSV)
</a>
<button id="zoomOut" title="Zoom out">-</button>
<input type="range" id="zoomInput" min="0" max="100" value="100" title="Zoom"/>
<button id="zoomIn" title="Zoom in">+</button>
<button onclick="alert('Nuclide Chart\nCopyright \u00A9 2020 Gustav Lindberg\nSource code: https://github.com/GustavLindberg99/NuclideChart\n\nThe chart is licensed under the MIT license. The data is from https://www.nndc.bnl.gov/.\n\nIcons made by Smashicons and Icomoon from www.flaticon.com are licensed by CC 3.0 BY. Some of the icons have been modified.')">About this chart</button>
</div>
<!--<div class="ol-zoomslider ol-unselectable ol-control" style="pointer-events: auto;"><button type="button" class="ol-zoomslider-thumb ol-unselectable" style="top: 184.338px;"></button>-->
<link href="nuclideChart.css" rel="stylesheet" type="text/css" />
<script src="common.js" type="text/javascript"></script>
<script src="nuclideChart.js" type="text/javascript"></script>
<script type="text/javascript">
function disableControls() {
// Disable some controls, e.g. when loading the chart
disableElements("#goToInput", "#goToButton", "#colorModeSelect");
}
function enableControls() {
// Enable some controls, e.g. when the chart has loaded
enableElements("#goToInput", "#goToButton");
// Color modes not implemented yet, always disabled
//enableElements(".chartButton", "#goToInput", "#goToButton", "#colorModeSelect");
}
function getSelectedNuclideInput() {
// Get the id of the selected nuclide
return d3.select("#goToInput").node().value;
}
function populateNuclideList(data) {
// Remove the nuclide list options
d3.select("#nuclideDataList").remove();
// Populate the nuclide list
d3.select("#goToInput")
.attr("list", "nuclideDataList")
.append("datalist")
.attr("id", "nuclideDataList")
.selectAll("option")
.data(data)
.enter()
.append("option")
.attr("value", function (d) { return nc.nuclideId(d); });
}
function showDecayModes() {
return d3.select("#showDecayModesCheck").node().checked;
}
function showMagicNumbers() {
return d3.select("#showMagicNumbersCheck").node().checked;
}
$(function () {
var chartContainer = d3.select("#chartContainer");
// Container for stuff above the chart
var onChartDiv = chartContainer
.append("div")
.classed("onChartContainer", true);
// Container for navigation buttons
// Todo (Andreas Molander 05.07.2018): Sync the padding with the size of the axes.
var buttonDiv = onChartDiv
.append("div")
.classed("onChartButtonContainer", true);
// Legend
var legendDiv = onChartDiv
.append("div")
.classed("onChartLegendContainer", true);
// The chart object
var chart = nc.nuclideChart(chartContainer.node(), legendDiv.node());
chart.addNavigationButtons(buttonDiv.node());
function loadData() {
// Todo: check if the target type has changed
// Set notification
chart.notify("Loading data...");
// Disable controls while loading
disableControls();
chart.disableNavigationButtons();
// Load data
var apiUrl = "/API/isoldeyields";
$.getJSON(apiUrl)
.done(function (data) {
if (nc.verifyData(data)) {
populateNuclideList(data);
chart.draw(data, false, showDecayModes(), showMagicNumbers(), true);
enableControls();
chart.enableNavigationButtons();
} else {
badData();
};
})
.fail(function () { dataRequestFail() });
}
function dataRequestFail() {
chart.notify("Failed to get the ISOLDE yields.")
}
function badData() {
chart.notify("No data for the ISOLDE yields.")
}
// Assign click events to the controls
d3.select("#goToButton").on("click", function () {
var input = getSelectedNuclideInput();
var id = chart.goToNuclide(input);
if (id) d3.select("#goToInput").node().value = id;
});
d3.select("#showDecayModesCheck").on("click", function () {
chart.setDecayModeVisibility(showDecayModes());
} );
d3.select("#showMagicNumbersCheck").on("click", function () {
chart.setMagicNumberVisibility(showMagicNumbers());
});
// Disable controls as default
disableControls();
chart.disableNavigationButtons();
loadData();
});
</script>
<div class="onChartButtonContainer"><input type="button" class="ncChartButton" value="+"><input type="button" class="ncChartButton" value="-"><input type="button" class="ncChartButton" value="⇧"><input type="button" class="ncChartButton" value="⇦"><input type="button" class="ncChartButton" value="⇩"><input type="button" id="rightButton" class="ncChartButton" value="⇨"></div>
</div>
<div id="loading">
<img src="https://mapcollector.eu5.org/images/loading.svg" width="64" height="64" alt="Loading..."/>
<p>Loading...</p>
</div>
<div id="container" style="display:none" data-zoomable></div>
<div id="legend">
<h2>Decay Modes</h2>
<p><span class="box stable"></span> Stable</p>
<p><span class="box a"></span> α</p>
<p><span class="box bminus"></span> β-</p>
<p><span class="box doublebminus"></span> Double β-</p>
<p><span class="box n"></span> Neutron emission</p>
<p><span class="box bplus"></span> β+ or electron capture</p>
<p><span class="box doublebplus"></span> Double β+ or double electron capture</p>
<p><span class="box ec"></span> Electron capture only</p>
<p><span class="box p"></span> Proton emission</p>
<p><span class="box sf"></span> Spontaneous fission</p>
</div>
</body>
</html>