Add real-world examples section to the playground#281
Draft
Conversation
Agent-Logs-Url: https://github.com/githubnext/tsessebe/sessions/866f6160-4548-40a9-bf34-f13d43109ad6 Co-authored-by: mrjf <180956+mrjf@users.noreply.github.com>
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.readCsv,groupby().agg,nlargestDataFramepctChangeSeries,Series.rolling().mean/std, SMA crossoverdtaccessor,groupbygroupby().size,cumsum,pctChangeSeriescrosstabwithnormalize: "index"Series.map,groupby,pivot,fillnagroupby().agg, lift,describepivotTable(source × device)concat,groupby,rankSeries,sortValuescutwith labels,valueCountsAll 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: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.