Skip to content

Commit d573953

Browse files
jmort1021jmort1021
committed
titanic pie chart aswell as seeing other people
1 parent 4051bd8 commit d573953

1 file changed

Lines changed: 223 additions & 79 deletions

File tree

‎navigation/titanic.md‎

Lines changed: 223 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -5,124 +5,219 @@ search_exclude: true
55
permalink: /titanic/
66
---
77

8-
98
<head>
109
<meta charset="UTF-8" />
1110
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
1211
<title>Titanic Survival Prediction</title>
12+
13+
<!-- Chart.js CDN -->
14+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
15+
1316
<style>
14-
body {
15-
font-family: Arial, sans-serif;
16-
background-color: #121212;
17-
padding: 20px;
18-
color: white;
19-
}
20-
.container {
21-
max-width: 500px;
22-
margin: auto;
23-
background: #000;
24-
padding: 30px;
25-
border-radius: 15px;
26-
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
27-
}
28-
h2 {
17+
h2, h3 {
2918
text-align: center;
30-
color: white;
19+
color: #ffffff;
3120
}
21+
3222
label {
3323
display: block;
34-
margin-top: 15px;
35-
color: white;
24+
margin: 10px 0 5px;
25+
font-weight: bold;
3626
}
27+
3728
input, select {
3829
width: 100%;
3930
padding: 8px;
40-
margin-top: 5px;
4131
border-radius: 5px;
42-
border: 1px solid #666;
32+
border: 1px solid #333;
4333
background-color: #1e1e1e;
4434
color: white;
4535
}
36+
4637
button {
38+
margin-top: 15px;
39+
padding: 10px;
4740
width: 100%;
48-
padding: 12px;
49-
margin-top: 20px;
50-
background-color: #007BFF;
41+
background-color: #007bff;
5142
color: white;
5243
border: none;
53-
border-radius: 5px;
44+
border-radius: 8px;
5445
font-size: 16px;
5546
cursor: pointer;
5647
}
48+
5749
button:hover {
5850
background-color: #0056b3;
5951
}
52+
6053
.result {
6154
margin-top: 20px;
62-
text-align: center;
63-
font-size: 18px;
64-
padding: 10px;
55+
padding: 15px;
56+
background-color: #000;
57+
border-radius: 8px;
58+
box-shadow: 0 0 5px rgba(255,255,255,0.1);
59+
}
60+
61+
ul {
62+
list-style-type: none;
63+
padding-left: 0;
64+
}
65+
66+
li {
67+
margin: 8px 0;
68+
padding: 6px 10px;
69+
background: #1f1f1f;
70+
border-radius: 6px;
71+
color: #fff;
72+
}
73+
74+
/* Custom toggle switch style */
75+
.switch {
76+
position: relative;
77+
display: inline-block;
78+
width: 50px;
79+
height: 24px;
80+
}
81+
82+
.switch input {
83+
opacity: 0;
84+
width: 0;
85+
height: 0;
86+
}
87+
88+
.slider {
89+
position: absolute;
90+
cursor: pointer;
91+
top: 0; left: 0;
92+
right: 0; bottom: 0;
93+
background-color: #ccc;
94+
transition: 0.4s;
95+
border-radius: 24px;
96+
}
97+
98+
.slider:before {
99+
position: absolute;
100+
content: "";
101+
height: 18px;
102+
width: 18px;
103+
left: 3px;
104+
bottom: 3px;
105+
background-color: white;
106+
transition: 0.4s;
107+
border-radius: 50%;
108+
}
109+
110+
input:checked + .slider {
111+
background-color: #2196F3;
112+
}
113+
114+
input:checked + .slider:before {
115+
transform: translateX(26px);
116+
}
117+
118+
.checkbox-group {
119+
margin-top: 15px;
120+
display: flex;
121+
align-items: center;
122+
gap: 10px;
123+
}
124+
125+
.checkbox-label {
126+
flex-grow: 1;
127+
}
128+
129+
canvas {
130+
display: block;
131+
margin: 0 auto;
65132
background-color: #1e1e1e;
66-
border-radius: 10px;
133+
border-radius: 8px;
67134
}
68135
</style>
69136
</head>
70137
<body>
71-
<div class="container">
72-
<h2>Titanic Survival Predictor</h2>
73-
<form id="titanic-form">
74-
<label for="name">Name:</label>
75-
<input type="text" id="name" required />
76-
77-
<label for="pclass">Passenger Class:</label>
78-
<select id="pclass" required>
79-
<option value="1">1st</option>
80-
<option value="2">2nd</option>
81-
<option value="3">3rd</option>
82-
</select>
83-
84-
<label for="sex">Sex:</label>
85-
<select id="sex" required>
86-
<option value="male">Male</option>
87-
<option value="female">Female</option>
88-
</select>
89-
90-
<label for="age">Age:</label>
91-
<input type="number" id="age" min="0" step="any" required />
92-
93-
<label for="sibsp">Siblings/Spouses Aboard:</label>
94-
<input type="number" id="sibsp" min="0" required />
95-
96-
<label for="parch">Parents/Children Aboard:</label>
97-
<input type="number" id="parch" min="0" required />
98-
99-
<label for="fare">Fare Paid:</label>
100-
<input type="number" id="fare" step="any" min="0" required />
101-
102-
<label for="embarked">Embarked Port:</label>
103-
<select id="embarked" required>
104-
<option value="C">Cherbourg</option>
105-
<option value="Q">Queenstown</option>
106-
<option value="S">Southampton</option>
107-
</select>
108-
109-
<div class="checkbox-group">
110-
<input type="checkbox" id="alone" />
111-
<label for="alone">Traveling Alone</label>
112-
</div>
113-
114-
<button type="submit">Predict Survival</button>
115-
</form>
116-
117-
<div class="result" id="result"></div>
138+
139+
<h2>Titanic Survival Prediction</h2>
140+
<form id="titanic-form">
141+
<label for="name">Your Name:</label>
142+
<input type="text" id="name" required />
143+
144+
<label for="pclass">Passenger Class (1 = 1st, 2 = 2nd, 3 = 3rd):</label>
145+
<select id="pclass" required>
146+
<option value="1">1st</option>
147+
<option value="2">2nd</option>
148+
<option value="3">3rd</option>
149+
</select>
150+
151+
<label for="sex">Sex:</label>
152+
<select id="sex" required>
153+
<option value="male">Male</option>
154+
<option value="female">Female</option>
155+
</select>
156+
157+
<label for="age">Age:</label>
158+
<input type="number" id="age" min="0" step="0.1" required />
159+
160+
<label for="sibsp">Number of Siblings/Spouses Aboard:</label>
161+
<input type="number" id="sibsp" min="0" required />
162+
163+
<label for="parch">Number of Parents/Children Aboard:</label>
164+
<input type="number" id="parch" min="0" required />
165+
166+
<label for="fare">Fare Paid:</label>
167+
<input type="number" id="fare" min="0" step="0.01" required />
168+
169+
<label for="embarked">Port of Embarkation:</label>
170+
<select id="embarked" required>
171+
<option value="C">Cherbourg</option>
172+
<option value="Q">Queenstown</option>
173+
<option value="S">Southampton</option>
174+
</select>
175+
176+
<label for="alone">Traveling Alone:</label>
177+
<select id="alone" required>
178+
<option value="true">Yes</option>
179+
<option value="false">No</option>
180+
</select>
181+
182+
<div class="checkbox-group">
183+
<span class="checkbox-label">Share My Prediction Publicly</span>
184+
<label class="switch">
185+
<input type="checkbox" id="share" />
186+
<span class="slider"></span>
187+
</label>
188+
</div>
189+
190+
<button type="submit">Predict Survival</button>
191+
</form>
192+
193+
<div class="result" id="result"></div>
194+
195+
<!-- Added canvas for pie chart -->
196+
<canvas id="predictionChart" width="400" height="400" style="margin-top: 20px;"></canvas>
197+
198+
<div class="result" id="shared-results">
199+
<h3>Public Predictions</h3>
200+
<ul id="shared-list"></ul>
118201
</div>
119202

120203
<script>
204+
function updateSharedResults() {
205+
const shared = JSON.parse(localStorage.getItem("sharedPredictions") || "[]");
206+
const list = document.getElementById("shared-list");
207+
list.innerHTML = "";
208+
shared.forEach(entry => {
209+
const li = document.createElement("li");
210+
li.innerHTML = `<strong>${entry.name}</strong>: ${entry.survive}% survive, ${entry.die}% die`;
211+
list.appendChild(li);
212+
});
213+
}
214+
121215
document.getElementById("titanic-form").addEventListener("submit", async function (e) {
122216
e.preventDefault();
123217

218+
const name = document.getElementById("name").value;
124219
const data = {
125-
name: [document.getElementById("name").value],
220+
name: [name],
126221
pclass: [parseInt(document.getElementById("pclass").value)],
127222
sex: [document.getElementById("sex").value],
128223
age: [parseFloat(document.getElementById("age").value)],
@@ -133,11 +228,13 @@ permalink: /titanic/
133228
alone: [document.getElementById("alone").checked]
134229
};
135230

231+
const share = document.getElementById("share").checked;
136232
const responseBox = document.getElementById("result");
137233
responseBox.innerHTML = "Predicting...";
138234

139235
try {
140-
const res = await fetch("http://127.0.0.1:8887/api/titanic/predict", { method: "POST",
236+
const res = await fetch("http://127.0.0.1:8887/api/titanic/predict", {
237+
method: "POST",
141238
headers: { "Content-Type": "application/json" },
142239
body: JSON.stringify(data)
143240
});
@@ -153,10 +250,57 @@ permalink: /titanic/
153250
<span style="color: red;">Death Probability: ${die}%</span><br/>
154251
<span style="color: lime;">Survival Probability: ${survive}%</span>
155252
`;
253+
254+
// Remove existing chart if it exists
255+
if (window.predictionChart instanceof Chart) {
256+
window.predictionChart.destroy();
257+
}
258+
259+
// Draw pie chart
260+
const ctx = document.getElementById("predictionChart").getContext("2d");
261+
window.predictionChart = new Chart(ctx, {
262+
type: "pie",
263+
data: {
264+
labels: ["Survive", "Die"],
265+
datasets: [{
266+
data: [survive, die],
267+
backgroundColor: ["#00ff00", "#ff0000"]
268+
}]
269+
},
270+
options: {
271+
responsive: true,
272+
plugins: {
273+
legend: {
274+
position: "bottom",
275+
labels: {
276+
color: "white"
277+
}
278+
},
279+
title: {
280+
display: true,
281+
text: "Survival vs Death Probability",
282+
color: "white",
283+
font: {
284+
size: 18
285+
}
286+
}
287+
}
288+
}
289+
});
290+
291+
if (share) {
292+
const shared = JSON.parse(localStorage.getItem("sharedPredictions") || "[]");
293+
shared.push({ name, survive, die });
294+
localStorage.setItem("sharedPredictions", JSON.stringify(shared));
295+
updateSharedResults();
296+
}
156297
} catch (err) {
157298
responseBox.innerHTML = "Error: Could not get prediction.";
158299
console.error(err);
159300
}
160301
});
302+
303+
window.addEventListener("DOMContentLoaded", updateSharedResults);
161304
</script>
162-
</body>
305+
306+
</body>

0 commit comments

Comments
 (0)