Skip to content

Add real-world examples section to the playground#281

Draft
Copilot wants to merge 2 commits intomainfrom
copilot/add-real-life-in-browser-examples
Draft

Add real-world examples section to the playground#281
Copilot wants to merge 2 commits intomainfrom
copilot/add-real-life-in-browser-examples

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 6, 2026

The playground had a page per individual feature but nothing showing tsb used end-to-end on realistic data. This adds an Examples section: 10 self-contained, in-browser tutorials covering common pandas workflows.

Hub

  • playground/examples.html — grid of 10 example cards.
  • playground/index.html — new "Real-World Examples" section above the feature roadmap, linking to the hub.

Examples (playground/example_*.html)

Each page has 1–3 editable code blocks with inline realistic data, a Python equivalent tab, and ASCII bar-chart output rendered through console.log.

Example Domain APIs exercised
💰 Sales Dashboard Retail analytics readCsv, groupby().agg, nlargestDataFrame
📈 Stock Returns Finance pctChangeSeries, Series.rolling().mean/std, SMA crossover
🌦️ Weather Trends Climate dt accessor, groupby
👥 Customer Cohorts SaaS growth groupby().size, cumsum, pctChangeSeries
📊 Survey Cross-tabs Research crosstab with normalize: "index"
🪵 Server Log Analysis DevOps Series.map, groupby, pivot, fillna
🧪 A/B Test Results Experimentation groupby().agg, lift, describe
🌐 Web Analytics Pivot Marketing pivotTable (source × device)
⚽ Sports Standings Sports analytics concat, groupby, rankSeries, sortValues
🏷️ Pricing Buckets E-commerce cut with labels, valueCounts

All pages reuse the existing playground-runtime.js (TS-compiler + tsb bundle + transparent-textarea highlighting) — no runtime changes.

Charts

Examples render visual output by emitting unicode block bars through console.log, which the runtime captures and shows in the output panel:

function chart(title: string, rows: Array<[string, number]>): void {
  const max = Math.max(...rows.map(r => r[1]));
  console.log(title);
  for (const [label, value] of rows) {
    const len = Math.round((value / max) * 28);
    console.log(label.padEnd(14) + " | " + "█".repeat(len) + " " + value.toFixed(2));
  }
}

Verification

A Playwright harness loads all 11 new pages, clicks every Run button, and asserts every block runs without error and produces output (22/22 blocks pass). The examples use only existing public tsb APIs; no src/ changes.

Copilot AI assigned Copilot and mrjf May 6, 2026
Copilot AI linked an issue May 6, 2026 that may be closed by this pull request
Copilot AI changed the title [WIP] Add real-life in-browser examples for Pandas Add real-world examples section to the playground May 6, 2026
Copilot finished work on behalf of mrjf May 6, 2026 15:03
Copilot AI requested a review from mrjf May 6, 2026 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Real-life in-browser examples

2 participants