DS.js: Turn Any Webpage into an Example-Centric Live Programming Environment for Learning Data ...

on YouTube ↗20m

" summary

DS.js is a bookmarklet that injects an example-centric IDE into any webpage, automatically parsing HTML tables and CSV/TSV files into a lightweight DSTable API for table ops and visualizations. Code executes live as the cursor moves (no run button), shows bidirectional code-to-data and data-to-code previews, and serializes code and state in the URL for sharing. An 8-participant study finds novices start and perform analyses immediately, demonstrating the idea works in practice.

AI-written summary · about

" chapters (6)

1. 0:00Introduction and motivation
2. 1:02Identifying tool limitations
3. 5:06System design of the tool
4. 13:15Exploratory study results
5. 15:10Conclusion and summary
6. 16:52Q&A session

" related talks

• 06mTool demoRishav · Meta Refresh 2013
• 20mTypeCell: A New Live Programming Environment for the WebYousef El-Dardiry · LIVE 2021
• 38mJavascript Considered...UsefulJenn Schiffer · JSConf EU 2019
• 30mVisualization Driven DevelopmentJason Gilman · Strange Loop 2013
• 32mFull Disclosure – Visualizing JavaScript with the CSE MachineMartin Henz · XtremeJS 2025
• 33mEssential JavaScript debugging tools for the modern detectiveRebecca Hill · You Gotta Love Frontend 2019
• 15mLive Programming a Live Programming Environment: An Experience ReportJack Rusher, Andrea Amantini, Philippa Markovics, Martin Kavalar, Elliot Evans · LIVE 2024
• 34mKick ass code editing and end to end JavaScript debuggingFabian Jakobs · JSConf.eu 2010