The Next Generation of Data Science Education
Interactive Coding in Web Browsers: A WebAssembly Demonstration
Welcome to the Future of Data Science Education
In this demonstration, we showcase cutting-edge technology that brings interactive coding directly into slide decks using WebAssembly (WASM) through the new official Quarto WebAssembly backend: quarto-live
by George Stagg. This innovative approach revolutionizes how we present and teach data science concepts by allowing for real-time code execution, visualization, and exercises within the presentation itself.
You can view the demonstration of this technology in the following slide deck:
For more on the Quarto WebAssembly backend, see the official documentation.
What’s Inside
This demonstration includes a Linear Regression overview that uses both R and Python code snippets to illustrate the concepts. You can interact with the code blocks, modify them, and see the results instantly. We’ve also included a built-in timer on the exercise page to provide a stoppage time for the exercise.
The Power of WebAssembly in Presentations
WebAssembly is a binary instruction format for a stack-based virtual machine, designed as a portable target for high-level languages like C, C++, and Rust. By leveraging WebAssembly:
- We can run R and Python code directly in the browser.
- Presentations become interactive, allowing audience members to modify and run code in real-time.
- Complex computations and visualizations can be performed client-side, reducing server load and improving responsiveness.
How It Works
- R Integration: webR, an R distribution compiled to WebAssembly, is used by
quarto-live
to run R code in the browser. - Python Integration: Pyodide, a Python distribution for the browser, is used by
quarto-live
to execute Python code. - Quarto + RevealJS: The presentation is built using Quarto and RevealJS, providing a smooth, web-based slide experience.
- Quarto Extensions: Additional Quarto extensions like
quarto-live
,quarto-drop
, andquarto-countdown
enhance the interactivity and functionality of the presentation.
Benefits of This Approach
- Engagement: Audience members can experiment with code in real-time, fostering active learning.
- Flexibility: Presenters can easily modify examples on the fly to answer questions or explore different scenarios.
- Accessibility: No need for local installations; everything runs in the browser.
- Reproducibility: Ensures everyone sees the same results, regardless of their local setup.
Getting Started
To explore this demo:
- Navigate through the links above to view each component.
- In the slide decks and tutorials, look for interactive code blocks where you can modify and run code.
- Experiment with different inputs and see how the outputs change in real-time.
Technical Requirements
For Viewers and Presenters
- A modern web browser with WebAssembly support (most up-to-date browsers support this).
- For the best experience, use a desktop or laptop computer rather than a mobile device.
Feedback and Questions
Question or comments? Let me know either on the issue tracker or via socials.
Enjoy exploring the future of interactive data science presentations!