From f3b23e9228bcf5a3e794e7b4a6558486ccb0055c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 6 May 2026 14:35:54 +0000
Subject: [PATCH 1/3] Initial plan
From 80d48efdf4cff74ad4a72a7d5e9e195f93c35f44 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 6 May 2026 15:01:08 +0000
Subject: [PATCH 2/3] Add 10 real-world example pages and Examples hub to
playground
Agent-Logs-Url: https://github.com/githubnext/tsessebe/sessions/866f6160-4548-40a9-bf34-f13d43109ad6
Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
---
playground/example_ab_test.html | 260 +++++++++++++++++
playground/example_customer_cohorts.html | 261 +++++++++++++++++
playground/example_log_analysis.html | 266 ++++++++++++++++++
playground/example_pricing_buckets.html | 266 ++++++++++++++++++
playground/example_sales_dashboard.html | 339 +++++++++++++++++++++++
playground/example_sports_standings.html | 234 ++++++++++++++++
playground/example_stock_returns.html | 258 +++++++++++++++++
playground/example_survey_crosstab.html | 230 +++++++++++++++
playground/example_weather_trends.html | 252 +++++++++++++++++
playground/example_web_analytics.html | 260 +++++++++++++++++
playground/examples.html | 241 ++++++++++++++++
playground/index.html | 11 +
12 files changed, 2878 insertions(+)
create mode 100644 playground/example_ab_test.html
create mode 100644 playground/example_customer_cohorts.html
create mode 100644 playground/example_log_analysis.html
create mode 100644 playground/example_pricing_buckets.html
create mode 100644 playground/example_sales_dashboard.html
create mode 100644 playground/example_sports_standings.html
create mode 100644 playground/example_stock_returns.html
create mode 100644 playground/example_survey_crosstab.html
create mode 100644 playground/example_weather_trends.html
create mode 100644 playground/example_web_analytics.html
create mode 100644 playground/examples.html
diff --git a/playground/example_ab_test.html b/playground/example_ab_test.html
new file mode 100644
index 000000000..be1ec074c
--- /dev/null
+++ b/playground/example_ab_test.html
@@ -0,0 +1,260 @@
+
+
+
+
+
+ tsb — A/B Test — Examples
+
+
+
+
+
+
Initializing playground…
+
🧪 A/B Test Results
+ Scenario: 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).
+ Skills: groupby().agg(), describe, lift calculation, boolean masks.
+
+
+
1 · Conversion rate by variant
+
Each row is one user session: which arm they were in, whether they converted, and order value.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Order value distribution per variant
+
Use describe to compare full distributions, not just means.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
👥 Customer Signup Cohorts
+ Scenario: A SaaS growth team wants to know how many customers signed up each month, the cumulative customer base, and which cohort grew fastest.
+ Skills: groupby, cumsum, pctChangeSeries.
+
+
+
1 · Monthly signups & cumulative growth
+
Group raw signup events by their cohort month, then take a running total.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Visualise cohort growth
+
Bar chart of new customers per month.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
🪵 Server Access Log Analysis
+ Scenario: An on-call engineer wants to know how many 5xx errors hit the API per hour during the last incident, broken down by status code class.
+ Skills: column transforms via Series.map, groupby, pivot, error rates.
+
+
+
1 · Parse and bucket access logs
+
Each row is one HTTP request. Extract the hour and the status class (2xx/4xx/5xx).
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Error rate per hour & alert threshold
+
Compute the 5xx error percentage per hour and flag any hour above 30%.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
🏷️ Product Pricing Tiers
+ Scenario: An e-commerce merchandiser wants to bucket the catalogue into 4 price tiers (Budget / Mid / Premium / Luxury) and see the count and average margin per tier.
+ Skills: cut with custom labels, valueCounts, groupby.
+
+
+
1 · Bucket products into price tiers
+
Use fixed bin edges with cut and named labels.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Avg margin by tier
+
Strategy question: do premium products carry meaningfully higher margins?
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
💰 Sales Dashboard
+ Scenario: You're an analyst at a regional retail chain. Q1 sales just landed in a CSV. Find top-performing regions and products, then visualize revenue with a quick ASCII bar chart.
+ Skills you'll use: readCsv, groupby().agg(), sortValues, nlargestDataFrame.
+
+
+
1 · Load the sales CSV
+
A typical first step: parse a CSV string into a DataFrame and inspect the schema.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Compute revenue & rank regions
+
Add a derived revenue column, then group by region.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
3 · Top products & best single order
+
Use groupby + nlargestDataFrame to surface the headline numbers.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
⚽ Sports League Standings
+ Scenario: An amateur football league played a round-robin. Build the league table from match results: wins, goal difference, points, and final rank.
+ Skills: concat, groupby().agg, rankSeries, sortValues.
+
+
+
1 · Build the standings table
+
Each match contributes two rows to the per-team view (one for each team).
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
📈 Stock Returns Analysis
+ Scenario: A junior quant wants to inspect a price history: compute daily returns, a 5-day rolling mean and volatility, and detect a simple moving-average crossover signal.
+ Skills: pctChangeSeries, Series.rolling().mean/std, derived columns, basic signal generation.
+
+
+
1 · Daily prices and returns
+
Compute daily percentage returns from raw closing prices.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Rolling stats & SMA crossover signal
+
A common workflow: fast SMA (3-day) crossing a slow SMA (5-day) is a buy signal; the reverse is a sell signal.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
📊 Survey Cross-tab Analysis
+ Scenario: You ran a 30-person survey asking which programming language people prefer, broken down by experience level. Build a contingency table and a percentage breakdown.
+ Skills: crosstab, normalisation modes ("index", "columns", "all").
+
+
+
1 · Build the crosstab
+
Each row in responses is one survey reply.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Row percentages
+
Row-normalise to see what each cohort actually prefers.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
🌦️ Monthly Weather Trends
+ Scenario: A climate journalist has a year of daily temperature observations and wants monthly averages, the hottest month, and a quick visual of the warming curve.
+ Skills: datetime parsing via the dt accessor, groupby, idxmaxSeries.
+
+
+
1 · Aggregate daily readings into monthly means
+
Synthetic but realistic year of daily highs in °C.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Visualise the seasonal curve
+
An ASCII bar chart of monthly averages — a quick health-check before reaching for proper plotting.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
+
Initializing playground…
+
🌐 Web Analytics Pivot Table
+ Scenario: A digital marketer has a stream of pageview events tagged with traffic source and device type. Pivot the data to see how each source performs across devices.
+ Skills: pivotTable, multiple aggregations, totals.
+
+
+
1 · Pivot pageviews by source × device
+
Sum pageviews into a 2-D table.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+
2 · Add row totals + bar chart of sources
+
Marketing wants the bottom line: total pageviews per source.
+
+
+
+
+
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
📚 Real-World Examples
+ Each example is a complete, real-world workflow built with tsb — the kind of analysis you'd typically reach for pandas to do. Click any card to open its interactive page; every code block runs live in your browser.
+ The dataset in each example is small, inline, and editable — change the numbers and re-run to see the analysis update instantly.
+
+
+
+ 💰
+ Sales Dashboard
+ Scenario: You're an analyst at a regional retail chain. Q1 sales just landed in a CSV. Find top-performing regions and products, then visualize revenue with a quick ASCII bar chart.
+
+
+
+ 📈
+ Stock Returns Analysis
+ Scenario: A junior quant wants to inspect a price history: compute daily returns, a 5-day rolling mean and volatility, and detect a simple moving-average crossover signal.
+
+
+
+ 🌦️
+ Monthly Weather Trends
+ Scenario: A climate journalist has a year of daily temperature observations and wants monthly averages, the hottest month, and a quick visual of the warming curve.
+
+
+
+ 👥
+ Customer Signup Cohorts
+ Scenario: A SaaS growth team wants to know how many customers signed up each month, the cumulative customer base, and which cohort grew fastest.
+
+
+
+ 📊
+ Survey Cross-tab Analysis
+ Scenario: You ran a 30-person survey asking which programming language people prefer, broken down by experience level. Build a contingency table and a percentage breakdown.
+
+
+
+ 🪵
+ Server Access Log Analysis
+ Scenario: An on-call engineer wants to know how many 5xx errors hit the API per hour during the last incident, broken down by status code class.
+
+
+
+ 🧪
+ A/B Test Results
+ Scenario: 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).
+
+
+
+ 🌐
+ Web Analytics Pivot Table
+ Scenario: A digital marketer has a stream of pageview events tagged with traffic source and device type. Pivot the data to see how each source performs across devices.
+
+
+
+ ⚽
+ Sports League Standings
+ Scenario: An amateur football league played a round-robin. Build the league table from match results: wins, goal difference, points, and final rank.
+
+
+
+ 🏷️
+ Product Pricing Tiers
+ Scenario: An e-commerce merchandiser wants to bucket the catalogue into 4 price tiers (Budget / Mid / Premium / Luxury) and see the count and average margin per tier.
+
+
pandas for TypeScript
+ 📚 Real-World Examples
+
+
+
+
Ten complete, real-world workflows running interactively in the browser — sales dashboards, stock returns, A/B tests, web analytics, league tables, and more.
+
✅ New — start here
+
+
Feature Roadmap
From 61f4d84ed9a26507fb4bc1983bfb3209a4d82886 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
Date: Mon, 11 May 2026 02:07:39 +0000
Subject: [PATCH 3/3] fix: exclude examples.html from conformance tests and
make Python blocks self-contained
- Add "examples.html" to NON_PLAYGROUND_PAGES in tests/playground.test.ts
and tests-e2e/playground-cells.test.ts (it's an index/gallery page, not
an interactive playground)
- Prepend data-setup code to each playground-python textarea block so every
block runs independently without depending on variables from the JS editor
or other blocks (fixes 18 Python validation failures)
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
playground/example_ab_test.html | 12 ++++++
playground/example_customer_cohorts.html | 11 +++++
playground/example_log_analysis.html | 20 +++++++++
playground/example_pricing_buckets.html | 12 ++++++
playground/example_sales_dashboard.html | 53 +++++++++++++++++++++++-
playground/example_sports_standings.html | 6 +++
playground/example_stock_returns.html | 15 ++++++-
playground/example_survey_crosstab.html | 5 +++
playground/example_weather_trends.html | 4 ++
playground/example_web_analytics.html | 24 +++++++++++
tests-e2e/playground-cells.test.ts | 2 +-
tests/playground.test.ts | 2 +
12 files changed, 163 insertions(+), 3 deletions(-)
diff --git a/playground/example_ab_test.html b/playground/example_ab_test.html
index be1ec074c..f686247fb 100644
--- a/playground/example_ab_test.html
+++ b/playground/example_ab_test.html
@@ -193,6 +193,13 @@ 1 · Conversion rate by variant
const lift = ((b - a) / a) * 100;
console.log(`\nLift in conversion rate: ${lift.toFixed(1)}%`);
diff --git a/playground/example_customer_cohorts.html b/playground/example_customer_cohorts.html
index 979726f86..6995c313c 100644
--- a/playground/example_customer_cohorts.html
+++ b/playground/example_customer_cohorts.html
@@ -194,6 +194,13 @@ 1 · Monthly signups & cumulative growth
console.log("");
console.log(out.toString());
diff --git a/playground/example_log_analysis.html b/playground/example_log_analysis.html
index 7d2542c79..367c4b469 100644
--- a/playground/example_log_analysis.html
+++ b/playground/example_log_analysis.html
@@ -199,6 +199,20 @@ 1 · Parse and bucket access logs
console.log("Requests per hour by status class:");
console.log(piv.toString());
@@ -258,6 +271,25 @@ 2 · Compute revenue & rank regions
console.log("");
chart("Revenue by region ($)", rows);
@@ -211,6 +213,9 @@ 2 · Row percentages
console.log("\nObservation: the largest cell in each row tells you that cohort's favourite language.");
Click ▶ Run to execute
diff --git a/playground/example_weather_trends.html b/playground/example_weather_trends.html
index 3b64c6cc9..b4743cc1b 100644
--- a/playground/example_weather_trends.html
+++ b/playground/example_weather_trends.html
@@ -187,6 +187,8 @@ 1 · Aggregate daily readings into monthly means
console.log("\nMin month avg:", Number(monthly.col("temp_c").min()).toFixed(2), "°C");
console.log("Max month avg:", Number(monthly.col("temp_c").max()).toFixed(2), "°C");
Click ▶ Run to execute
diff --git a/tests-e2e/playground-cells.test.ts b/tests-e2e/playground-cells.test.ts
index 481456fa4..8c6386e18 100644
--- a/tests-e2e/playground-cells.test.ts
+++ b/tests-e2e/playground-cells.test.ts
@@ -51,7 +51,7 @@ const PLAYGROUND_DIR = join(PROJECT_ROOT, "playground");
const KNOWN_FAILURES_PATH = join(import.meta.dir, "known-failures.json");
// Pages that are intentionally not interactive playgrounds.
-const NON_PLAYGROUND_PAGES = new Set(["index.html", "benchmarks.html"]);
+const NON_PLAYGROUND_PAGES = new Set(["index.html", "benchmarks.html", "examples.html"]);
const PORT = 3399;
const BASE_URL = `http://localhost:${PORT}`;
diff --git a/tests/playground.test.ts b/tests/playground.test.ts
index 10493600d..1fd6b68d2 100644
--- a/tests/playground.test.ts
+++ b/tests/playground.test.ts
@@ -28,6 +28,8 @@ const NON_PLAYGROUND_PAGES = new Set([
"index.html",
// The benchmarks page is a results chart (tsb vs pandas), not a playground.
"benchmarks.html",
+ // The examples page is an index/gallery page linking to individual examples.
+ "examples.html",
]);
function listPlaygroundHtmlFiles(): string[] {