Skip to content

Commit a56a8b5

Browse files
mrjfmrjf
authored
Merge pull request #281 from githubnext/copilot/add-real-life-in-browser-examples
Add real-world examples section to the playground
2 parents 315beaa + 3e3ea37 commit a56a8b5

14 files changed

Lines changed: 3039 additions & 1 deletion

‎playground/example_ab_test.html‎

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>tsb — A/B Test — Examples</title>
7+
<style>
8+
:root {
9+
--bg: #0d1117;
10+
--surface: #161b22;
11+
--border: #30363d;
12+
--text: #e6edf3;
13+
--accent: #58a6ff;
14+
--green: #3fb950;
15+
--orange: #d29922;
16+
--red: #f85149;
17+
--font-mono: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
18+
}
19+
* { box-sizing: border-box; margin: 0; padding: 0; }
20+
body {
21+
background: var(--bg);
22+
color: var(--text);
23+
font-family: system-ui, -apple-system, sans-serif;
24+
line-height: 1.6;
25+
padding: 2rem;
26+
max-width: 920px;
27+
margin: 0 auto;
28+
}
29+
a { color: var(--accent); }
30+
h1 { color: var(--accent); margin-bottom: 0.5rem; }
31+
h2 { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.25rem; }
32+
h3 { font-size: 1.05rem; margin: 1rem 0 0.4rem; }
33+
p { color: #8b949e; margin-bottom: 1rem; }
34+
ul { color: #8b949e; margin-left: 1.25rem; margin-bottom: 1rem; }
35+
li { margin-bottom: 0.25rem; }
36+
code {
37+
font-family: var(--font-mono);
38+
font-size: 0.875em;
39+
background: var(--surface);
40+
border: 1px solid var(--border);
41+
border-radius: 0.3rem;
42+
padding: 0.1rem 0.4rem;
43+
}
44+
.back { margin-bottom: 1.25rem; display: inline-block; }
45+
.scenario {
46+
background: rgba(88, 166, 255, 0.06);
47+
border-left: 3px solid var(--accent);
48+
padding: 0.75rem 1rem;
49+
border-radius: 0 0.4rem 0.4rem 0;
50+
margin: 1rem 0 1.5rem;
51+
color: #c9d1d9;
52+
}
53+
.scenario strong { color: var(--accent); }
54+
#playground-loading {
55+
position: fixed; inset: 0;
56+
background: rgba(13, 17, 23, 0.92);
57+
display: flex; flex-direction: column;
58+
align-items: center; justify-content: center;
59+
z-index: 1000; gap: 1rem;
60+
}
61+
.spinner {
62+
width: 40px; height: 40px;
63+
border: 3px solid var(--border);
64+
border-top-color: var(--accent);
65+
border-radius: 50%;
66+
animation: spin 0.8s linear infinite;
67+
}
68+
@keyframes spin { to { transform: rotate(360deg); } }
69+
#playground-status { color: #8b949e; font-size: 0.95rem; }
70+
.section {
71+
background: var(--surface);
72+
border: 1px solid var(--border);
73+
border-radius: 0.75rem;
74+
padding: 1.5rem;
75+
margin-bottom: 1.5rem;
76+
}
77+
.section p { margin-bottom: 0.75rem; }
78+
.playground-block { margin-top: 0.75rem; }
79+
.playground-header {
80+
display: flex; align-items: center; justify-content: space-between;
81+
background: #1c2128; border: 1px solid var(--border);
82+
border-bottom: none; border-radius: 0.5rem 0.5rem 0 0;
83+
padding: 0.4rem 0.75rem;
84+
}
85+
.playground-label {
86+
font-size: 0.75rem; color: #8b949e;
87+
text-transform: uppercase; letter-spacing: 0.05em;
88+
}
89+
.playground-actions { display: flex; gap: 0.5rem; }
90+
.playground-actions button {
91+
background: transparent; color: var(--accent);
92+
border: 1px solid var(--border); border-radius: 0.35rem;
93+
padding: 0.25rem 0.7rem; font-size: 0.8rem;
94+
cursor: pointer; font-family: system-ui, sans-serif;
95+
transition: background 0.15s, border-color 0.15s;
96+
}
97+
.playground-actions button:hover:not(:disabled) {
98+
background: rgba(88, 166, 255, 0.1);
99+
border-color: var(--accent);
100+
}
101+
.playground-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
102+
.playground-run { font-weight: 600; }
103+
.playground-editor {
104+
display: block; width: 100%; min-height: 80px;
105+
background: #0d1117; color: var(--text);
106+
border: 1px solid var(--border);
107+
border-top: none; border-bottom: none;
108+
padding: 1rem;
109+
font-family: var(--font-mono);
110+
font-size: 0.875rem; line-height: 1.55;
111+
resize: vertical; outline: none;
112+
tab-size: 2; white-space: pre; overflow-x: auto;
113+
}
114+
.playground-editor:focus {
115+
border-color: var(--accent);
116+
box-shadow: inset 0 0 0 1px var(--accent);
117+
}
118+
.playground-output {
119+
background: #1c2333;
120+
border: 1px solid var(--border);
121+
border-radius: 0 0 0.5rem 0.5rem;
122+
padding: 0.75rem 1rem;
123+
font-family: var(--font-mono);
124+
font-size: 0.85rem; color: #8b949e;
125+
white-space: pre-wrap; min-height: 2rem;
126+
word-break: break-word;
127+
}
128+
.playground-output.active { color: var(--green); border-color: var(--green); }
129+
.playground-output.error { color: var(--red); border-color: var(--red); }
130+
.playground-hint {
131+
font-size: 0.75rem; color: #484f58;
132+
margin-top: 0.35rem; text-align: right;
133+
}
134+
footer {
135+
text-align: center; padding: 2rem 0;
136+
color: #8b949e; font-size: 0.85rem;
137+
border-top: 1px solid var(--border);
138+
margin-top: 2rem;
139+
}
140+
</style>
141+
</head>
142+
<body>
143+
<div id="playground-loading">
144+
<div class="spinner"></div>
145+
<div id="playground-status">Initializing playground…</div>
146+
</div>
147+
148+
<a class="back" href="examples.html">← Back to examples</a>
149+
<h1>🧪 A/B Test Results</h1>
150+
<div class="scenario"><strong>Scenario:</strong> A product manager just shipped a new checkout button (variant B) to half of users. Compare conversion rates and order values between the control (A) and the variant (B).</div>
151+
<p>Skills: <code>groupby().agg()</code>, <code>describe</code>, lift calculation, boolean masks.</p>
152+
153+
<div class="section">
154+
<h2>1 · Conversion rate by variant</h2>
155+
<p>Each row is one user session: which arm they were in, whether they converted, and order value.</p>
156+
<div class="playground-block">
157+
<div class="playground-header">
158+
<span class="playground-label">TypeScript</span>
159+
<div class="playground-actions">
160+
<button class="playground-run" disabled>▶ Run</button>
161+
<button class="playground-reset">↺ Reset</button>
162+
</div>
163+
</div>
164+
<textarea class="playground-editor" spellcheck="false">import { DataFrame } from "tsb";
165+
166+
const variant = [
167+
"A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A",
168+
"B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B",
169+
];
170+
const converted = [
171+
0,1,0,0,1,0,0,0,1,0, 1,0,0,0,1,0,0,1,0,0, // 5 / 20 = 25%
172+
1,1,0,1,0,1,1,0,1,0, 1,1,0,1,1,0,0,1,1,1, // 13 / 20 = 65%
173+
];
174+
const order_value = [
175+
0, 42, 0, 0, 35, 0, 0, 0, 51, 0, 28, 0, 0, 0, 60, 0, 0, 33, 0, 0,
176+
47, 51, 0, 39, 0, 64, 38, 0, 55, 0, 41, 47, 0, 33, 58, 0, 0, 49, 36, 52,
177+
];
178+
179+
const sessions = DataFrame.fromColumns({ variant, converted, order_value });
180+
181+
const summary = sessions.groupby("variant").agg({
182+
converted: "mean",
183+
order_value: "mean",
184+
}, false);
185+
const out = summary.rename({
186+
converted: "conv_rate",
187+
order_value: "avg_order_value",
188+
});
189+
console.log(out.toString());
190+
191+
const a = Number(out.col("conv_rate").iloc(0));
192+
const b = Number(out.col("conv_rate").iloc(1));
193+
const lift = ((b - a) / a) * 100;
194+
console.log(`\nLift in conversion rate: ${lift.toFixed(1)}%`);</textarea>
195+
<textarea class="playground-python" style="display:none">import pandas as pd
196+
sessions = pd.DataFrame({
197+
"variant": ["A"]*20 + ["B"]*20,
198+
"converted": [0,1,0,0,1,0,0,0,1,0,1,0,0,0,1,0,0,1,0,0,
199+
1,1,0,1,0,1,1,0,1,0,1,1,0,1,1,0,0,1,1,1],
200+
"order_value": [0,42,0,0,35,0,0,0,51,0,28,0,0,0,60,0,0,33,0,0,
201+
47,51,0,39,0,64,38,0,55,0,41,47,0,33,58,0,0,49,36,52],
202+
})
203+
summary = sessions.groupby("variant", as_index=False).agg(
204+
conv_rate=("converted", "mean"),
205+
avg_order_value=("order_value", "mean"),
206+
)
207+
print(summary)</textarea>
208+
<div class="playground-output">Click ▶ Run to execute</div>
209+
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
210+
</div>
211+
</div>
212+
213+
<div class="section">
214+
<h2>2 · Order value distribution per variant</h2>
215+
<p>Use <code>describe</code> to compare full distributions, not just means.</p>
216+
<div class="playground-block">
217+
<div class="playground-header">
218+
<span class="playground-label">TypeScript</span>
219+
<div class="playground-actions">
220+
<button class="playground-run" disabled>▶ Run</button>
221+
<button class="playground-reset">↺ Reset</button>
222+
</div>
223+
</div>
224+
<textarea class="playground-editor" spellcheck="false">import { DataFrame, describe } from "tsb";
225+
226+
const variant = [
227+
"A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A","A",
228+
"B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B","B",
229+
];
230+
const order_value = [
231+
0, 42, 0, 0, 35, 0, 0, 0, 51, 0, 28, 0, 0, 0, 60, 0, 0, 33, 0, 0,
232+
47, 51, 0, 39, 0, 64, 38, 0, 55, 0, 41, 47, 0, 33, 58, 0, 0, 49, 36, 52,
233+
];
234+
const sessions = DataFrame.fromColumns({ variant, order_value });
235+
236+
// Filter to converted-only orders for AOV
237+
const isConverted = sessions.col("order_value").map(v =&gt; Number(v) &gt; 0);
238+
const converted = sessions.filter(isConverted);
239+
240+
const isA = converted.col("variant").map(v =&gt; v === "A");
241+
const isB = converted.col("variant").map(v =&gt; v === "B");
242+
const a = converted.filter(isA).col("order_value");
243+
const b = converted.filter(isB).col("order_value");
244+
245+
console.log("Variant A order values:");
246+
console.log(describe(a).toString());
247+
console.log("\nVariant B order values:");
248+
console.log(describe(b).toString());</textarea>
249+
<textarea class="playground-python" style="display:none">import pandas as pd
250+
sessions = pd.DataFrame({
251+
"variant": ["A"]*20 + ["B"]*20,
252+
"order_value": [0,42,0,0,35,0,0,0,51,0,28,0,0,0,60,0,0,33,0,0,
253+
47,51,0,39,0,64,38,0,55,0,41,47,0,33,58,0,0,49,36,52],
254+
})
255+
converted = sessions[sessions["order_value"] &gt; 0]
256+
print(converted[converted["variant"]=="A"]["order_value"].describe())
257+
print(converted[converted["variant"]=="B"]["order_value"].describe())</textarea>
258+
<div class="playground-output">Click ▶ Run to execute</div>
259+
<div class="playground-hint">Ctrl+Enter to run · Tab to indent</div>
260+
</div>
261+
</div>
262+
263+
<footer>
264+
<p>
265+
<a href="examples.html">All examples</a> ·
266+
<a href="index.html">tsb playground</a> ·
267+
Built by <a href="https://github.com/githubnext/autoloop">Autoloop</a>
268+
</p>
269+
</footer>
270+
<script type="module" src="playground-runtime.js"></script>
271+
</body>
272+
</html>

0 commit comments

Comments
 (0)