diff --git a/playground/example_ab_test.html b/playground/example_ab_test.html new file mode 100644 index 00000000..be1ec074 --- /dev/null +++ b/playground/example_ab_test.html @@ -0,0 +1,260 @@ + + + + + + tsb — A/B Test — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

🧪 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.

+
+
+ TypeScript +
+ + +
+
+ + +
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.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_customer_cohorts.html b/playground/example_customer_cohorts.html new file mode 100644 index 00000000..979726f8 --- /dev/null +++ b/playground/example_customer_cohorts.html @@ -0,0 +1,261 @@ + + + + + + tsb — Customer Cohorts — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

👥 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.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ +
+

2 · Visualise cohort growth

+

Bar chart of new customers per month.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_log_analysis.html b/playground/example_log_analysis.html new file mode 100644 index 00000000..7d2542c7 --- /dev/null +++ b/playground/example_log_analysis.html @@ -0,0 +1,266 @@ + + + + + + tsb — Log Analysis — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

🪵 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).

+
+
+ TypeScript +
+ + +
+
+ + +
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%.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_pricing_buckets.html b/playground/example_pricing_buckets.html new file mode 100644 index 00000000..4598f29a --- /dev/null +++ b/playground/example_pricing_buckets.html @@ -0,0 +1,266 @@ + + + + + + tsb — Pricing Buckets — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

🏷️ 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.

+
+
+ TypeScript +
+ + +
+
+ + +
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?

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_sales_dashboard.html b/playground/example_sales_dashboard.html new file mode 100644 index 00000000..bc325f72 --- /dev/null +++ b/playground/example_sales_dashboard.html @@ -0,0 +1,339 @@ + + + + + + tsb — Sales Dashboard — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

💰 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.

+
+
+ TypeScript +
+ + +
+
+ + +
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.

+
+
+ TypeScript +
+ + +
+
+ + +
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.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_sports_standings.html b/playground/example_sports_standings.html new file mode 100644 index 00000000..360409f7 --- /dev/null +++ b/playground/example_sports_standings.html @@ -0,0 +1,234 @@ + + + + + + tsb — Sports Standings — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

⚽ 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).

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_stock_returns.html b/playground/example_stock_returns.html new file mode 100644 index 00000000..27f348a1 --- /dev/null +++ b/playground/example_stock_returns.html @@ -0,0 +1,258 @@ + + + + + + tsb — Stock Returns — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

📈 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.

+
+
+ TypeScript +
+ + +
+
+ + +
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.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_survey_crosstab.html b/playground/example_survey_crosstab.html new file mode 100644 index 00000000..27303654 --- /dev/null +++ b/playground/example_survey_crosstab.html @@ -0,0 +1,230 @@ + + + + + + tsb — Survey Cross-tabs — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

📊 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.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ +
+

2 · Row percentages

+

Row-normalise to see what each cohort actually prefers.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_weather_trends.html b/playground/example_weather_trends.html new file mode 100644 index 00000000..3b64c6cc --- /dev/null +++ b/playground/example_weather_trends.html @@ -0,0 +1,252 @@ + + + + + + tsb — Weather Trends — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

🌦️ 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.

+
+
+ TypeScript +
+ + +
+
+ + +
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.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/example_web_analytics.html b/playground/example_web_analytics.html new file mode 100644 index 00000000..dc8c8f3d --- /dev/null +++ b/playground/example_web_analytics.html @@ -0,0 +1,260 @@ + + + + + + tsb — Web Analytics — Examples + + + +
+
+
Initializing playground…
+
+ + ← Back to examples +

🌐 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.

+
+
+ TypeScript +
+ + +
+
+ + +
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.

+
+
+ TypeScript +
+ + +
+
+ + +
Click ▶ Run to execute
+
Ctrl+Enter to run · Tab to indent
+
+
+ + + + + diff --git a/playground/examples.html b/playground/examples.html new file mode 100644 index 00000000..52eeeb1f --- /dev/null +++ b/playground/examples.html @@ -0,0 +1,241 @@ + + + + + + tsb — Real-World Examples + + + + ← Back to roadmap +

📚 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.

+
+
+ + + + diff --git a/playground/index.html b/playground/index.html index 27ccedd2..00fb6e9f 100644 --- a/playground/index.html +++ b/playground/index.html @@ -127,6 +127,17 @@

pandas for TypeScript

+

📚 Real-World Examples

+
+
+

📚 End-to-end pandas-style scenarios

+

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