Skip to content

Commit 93b384b

Browse files
QuantalabsQuantalabs
committed
chore: 🎨 split up js/css/html
1 parent a0edb5a commit 93b384b

5 files changed

Lines changed: 165 additions & 176 deletions

File tree

‎index.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
2+
3+
body {
4+
font-family: "Outfit", sans-serif;
5+
font-optical-sizing: auto;
6+
font-weight: 300;
7+
font-style: normal;
8+
margin: auto;
9+
display: flex;
10+
flex-direction: column;
11+
align-items: center;
12+
justify-content: center;
13+
height: 100vh;
14+
}
15+
16+
#container {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
23+
#form {
24+
display: flex;
25+
flex-direction: column;
26+
align-items: center;
27+
}
28+
29+
#abrams,
30+
#diaz,
31+
#general {
32+
display: flex;
33+
flex-direction: row;
34+
gap: 0.5rem;
35+
margin: 2.5vh 0;
36+
align-items: center;
37+
justify-content: center;
38+
flex-wrap: wrap;
39+
max-width: 750px;
40+
}
41+
42+
.item {
43+
display: flex;
44+
flex-direction: row;
45+
gap: 0.5rem;
46+
align-items: center;
47+
}

‎index.html‎

Lines changed: 2 additions & 172 deletions
Original file line numberDiff line numberDiff line change
@@ -4,59 +4,11 @@
44
<meta charset="utf-8" />
55
<title>Lang Shift</title>
66
<link data-trunk rel="rust" />
7+
<link data-trunk rel="css" href="index.css" />
78
<link
89
rel="stylesheet"
910
href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
1011
/>
11-
<style>
12-
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
13-
14-
body {
15-
font-family: "Outfit", sans-serif;
16-
font-optical-sizing: auto;
17-
font-weight: 300;
18-
font-style: normal;
19-
margin: auto;
20-
display: flex;
21-
flex-direction: column;
22-
align-items: center;
23-
justify-content: center;
24-
height: 100vh;
25-
}
26-
27-
#container {
28-
display: flex;
29-
flex-direction: column;
30-
align-items: center;
31-
justify-content: center;
32-
}
33-
34-
#form {
35-
display: flex;
36-
flex-direction: column;
37-
align-items: center;
38-
}
39-
40-
#abrams,
41-
#diaz,
42-
#general {
43-
display: flex;
44-
flex-direction: row;
45-
gap: 0.5rem;
46-
margin: 2.5vh 0;
47-
align-items: center;
48-
justify-content: center;
49-
flex-wrap: wrap;
50-
max-width: 750px;
51-
}
52-
53-
.item {
54-
display: flex;
55-
flex-direction: row;
56-
gap: 0.5rem;
57-
align-items: center;
58-
}
59-
</style>
6012
</head>
6113
<body>
6214
<div id="container">
@@ -235,128 +187,6 @@
235187
<div id="plot"></div>
236188
</div>
237189

238-
<script type="module">
239-
import "https://cdn.plot.ly/plotly-3.1.0-rc.0.min.js";
240-
241-
let { solve_abrams_strogatz, solve_diaz_switkes } = wasmBindings;
242-
243-
const model = document.getElementById("model").value;
244-
document.getElementById("abrams").style.display =
245-
model === "abrams" ? "flex" : "none";
246-
document.getElementById("diaz").style.display =
247-
model === "diaz" ? "flex" : "none";
248-
249-
document
250-
.getElementById("model")
251-
.addEventListener("change", async (e) => {
252-
const model = e.target.value;
253-
document.getElementById("abrams").style.display =
254-
model === "abrams" ? "flex" : "none";
255-
document.getElementById("diaz").style.display =
256-
model === "diaz" ? "flex" : "none";
257-
258-
await solve();
259-
});
260-
261-
async function solve(e) {
262-
const model = document.getElementById("model").value;
263-
const params = {
264-
abrams: {
265-
x: Number(document.getElementById("x").value),
266-
y: Number(document.getElementById("y").value),
267-
c: Number(document.getElementById("c").value),
268-
a: Number(document.getElementById("a").value),
269-
s: Number(document.getElementById("s").value),
270-
},
271-
diaz: {
272-
x_1: Number(document.getElementById("x_1").value),
273-
x_2: Number(document.getElementById("x_2").value),
274-
b: Number(document.getElementById("b").value),
275-
m_1: Number(document.getElementById("m_1").value),
276-
m_2: Number(document.getElementById("m_2").value),
277-
g_1: Number(document.getElementById("g_1").value),
278-
g_2: Number(document.getElementById("g_2").value),
279-
alpha: Number(document.getElementById("alpha").value),
280-
beta: Number(document.getElementById("beta").value),
281-
},
282-
}[model];
283-
const t = document.getElementById("t").value;
284-
285-
if (model === "abrams") {
286-
const solution = await solve_abrams_strogatz(
287-
params.x,
288-
params.y,
289-
params.c,
290-
params.a,
291-
params.s,
292-
t,
293-
);
294-
plot([
295-
[solution, "Monolingual 1"],
296-
[
297-
solution.map((y) => params.x + params.y - y),
298-
"Monolingual 2",
299-
],
300-
]);
301-
} else {
302-
const x = await solve_diaz_switkes(
303-
[params.x_1, params.x_2, params.b],
304-
[params.m_1, params.m_2],
305-
[params.g_1, params.g_2],
306-
params.alpha,
307-
params.beta,
308-
t,
309-
0,
310-
);
311-
const b = await solve_diaz_switkes(
312-
[params.x_1, params.x_2, params.b],
313-
[params.m_1, params.m_2],
314-
[params.g_1, params.g_2],
315-
params.alpha,
316-
params.beta,
317-
t,
318-
1,
319-
);
320-
plot([
321-
[x, "Monlingual 1"],
322-
[b, "Bilingual"],
323-
[
324-
x.map(
325-
(y, i) =>
326-
params.x_1 +
327-
params.x_2 +
328-
params.b -
329-
(y + b[i]),
330-
),
331-
"Monlingual 2",
332-
],
333-
]);
334-
}
335-
}
336-
337-
document.getElementById("solve").addEventListener("click", solve);
338-
339-
solve();
340-
341-
function plot(data) {
342-
Plotly.purge("plot");
343-
let input = [];
344-
for (let i = 0; i < data.length; i++) {
345-
input.push({ y: data[i][0], name: `${data[i][1]}` });
346-
}
347-
348-
const layout = {
349-
title: "Lang Shift",
350-
xaxis: {
351-
title: "Time",
352-
},
353-
yaxis: {
354-
title: "Population",
355-
},
356-
};
357-
358-
Plotly.newPlot("plot", input, layout);
359-
}
360-
</script>
190+
<script data-trunk type="module" src="index.js"></script>
361191
</body>
362192
</html>

‎index.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import "https://cdn.plot.ly/plotly-3.1.0-rc.0.min.js";
2+
3+
let { solve_abrams_strogatz, solve_diaz_switkes } = wasmBindings;
4+
5+
const model = document.getElementById("model").value;
6+
document.getElementById("abrams").style.display =
7+
model === "abrams" ? "flex" : "none";
8+
document.getElementById("diaz").style.display =
9+
model === "diaz" ? "flex" : "none";
10+
11+
document.getElementById("model").addEventListener("change", async (e) => {
12+
const model = e.target.value;
13+
document.getElementById("abrams").style.display =
14+
model === "abrams" ? "flex" : "none";
15+
document.getElementById("diaz").style.display =
16+
model === "diaz" ? "flex" : "none";
17+
18+
await solve();
19+
});
20+
21+
async function solve(e) {
22+
const model = document.getElementById("model").value;
23+
const params = {
24+
abrams: {
25+
x: Number(document.getElementById("x").value),
26+
y: Number(document.getElementById("y").value),
27+
c: Number(document.getElementById("c").value),
28+
a: Number(document.getElementById("a").value),
29+
s: Number(document.getElementById("s").value),
30+
},
31+
diaz: {
32+
x_1: Number(document.getElementById("x_1").value),
33+
x_2: Number(document.getElementById("x_2").value),
34+
b: Number(document.getElementById("b").value),
35+
m_1: Number(document.getElementById("m_1").value),
36+
m_2: Number(document.getElementById("m_2").value),
37+
g_1: Number(document.getElementById("g_1").value),
38+
g_2: Number(document.getElementById("g_2").value),
39+
alpha: Number(document.getElementById("alpha").value),
40+
beta: Number(document.getElementById("beta").value),
41+
},
42+
}[model];
43+
const t = document.getElementById("t").value;
44+
45+
if (model === "abrams") {
46+
const solution = await solve_abrams_strogatz(
47+
params.x,
48+
params.y,
49+
params.c,
50+
params.a,
51+
params.s,
52+
t,
53+
);
54+
plot([
55+
[solution, "Monolingual 1"],
56+
[solution.map((y) => params.x + params.y - y), "Monolingual 2"],
57+
]);
58+
} else {
59+
const x = await solve_diaz_switkes(
60+
[params.x_1, params.x_2, params.b],
61+
[params.m_1, params.m_2],
62+
[params.g_1, params.g_2],
63+
params.alpha,
64+
params.beta,
65+
t,
66+
0,
67+
);
68+
const b = await solve_diaz_switkes(
69+
[params.x_1, params.x_2, params.b],
70+
[params.m_1, params.m_2],
71+
[params.g_1, params.g_2],
72+
params.alpha,
73+
params.beta,
74+
t,
75+
1,
76+
);
77+
plot([
78+
[x, "Monlingual 1"],
79+
[b, "Bilingual"],
80+
[
81+
x.map(
82+
(y, i) => params.x_1 + params.x_2 + params.b - (y + b[i]),
83+
),
84+
"Monlingual 2",
85+
],
86+
]);
87+
}
88+
}
89+
90+
document.getElementById("solve").addEventListener("click", solve);
91+
92+
solve();
93+
94+
function plot(data) {
95+
Plotly.purge("plot");
96+
let input = [];
97+
for (let i = 0; i < data.length; i++) {
98+
input.push({ y: data[i][0], name: `${data[i][1]}` });
99+
}
100+
101+
const layout = {
102+
title: "Lang Shift",
103+
xaxis: {
104+
title: "Time",
105+
},
106+
yaxis: {
107+
title: "Population",
108+
},
109+
};
110+
111+
Plotly.newPlot("plot", input, layout);
112+
}

‎src/abrams_strogatz.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ impl Community {
2424

2525
pub fn solve(&self, t: usize) -> Vec<f64> {
2626
let problem = OdeProblem::builder()
27-
.tspan_linspace(0.0, t as f64, t * 2)
27+
.tspan_linspace(0.0, t as f64, t * 100)
2828
.fun(|_, y| self.system(0.0, y))
2929
.init(vec![self.x / (self.n() as f64)])
3030
.build()
@@ -38,7 +38,7 @@ impl Community {
3838
.yout
3939
.iter()
4040
.enumerate()
41-
.filter(|(i, _)| i % 2 == 0)
41+
.filter(|(i, _)| i % 100 == 0)
4242
.map(|(_, y)| y[0] * (self.n() as f64))
4343
.collect()
4444
}

‎src/diaz_switkes.rs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ impl Community {
2727

2828
pub fn solve(&self, t: usize) -> Vec<Vec<f64>> {
2929
let problem = OdeProblem::builder()
30-
.tspan_linspace(0.0, t as f64, t * 2)
30+
.tspan_linspace(0.0, t as f64, t * 100)
3131
.fun(|_, y| self.system(0.0, y))
3232
.init(vec![(self.x[0] as f64) / (self.n() as f64), (self.x[1] as f64) / (self.n() as f64), (self.x[2] as f64) / (self.n() as f64)])
3333
.build()
@@ -41,7 +41,7 @@ impl Community {
4141
.yout
4242
.iter()
4343
.enumerate()
44-
.filter(|(i, _)| i % 2 == 0)
44+
.filter(|(i, _)| i % 100 == 0)
4545
.map(|(_, y)| y.clone().iter().map(|y| y * (self.n() as f64)).collect())
4646
.collect()
4747
}

0 commit comments

Comments
 (0)