mhkeller / interactive-nodejs

A demo showing how to use VS Code's debug view to analyze data in Node.js

Interactive Node.js

An example using VS Code for interactive coding and plotting

Install

npm install
# You may also need to do this for the plots...
npx playwright install 

Demo overview

demo-overview.mov

Demo showing the REPL to do interactive programming

demo-interactive-repl.mov

Running

1. Open the index.js file
2. Press F5 to launch in debug mode
3. Go to View > Debug Console to view the output
4. Step through the debugger to the various steps
5. Adjust the arquero query in the REPL and see the result
6. View the plot

What's going on here?

The .vscode/launch.json config file will run whatever file is currently in view in debug mode, which means it stops whenever it encounters a debugger line.

When your script is in a final state, you can simply execute it with node index.js and it will skip over the debugger statements.

In this example, we analyze data of Olympic gold medalists, launch a bar chart of the top 10 countries and also write that chart to a PNG.

Limitations

The UX of the VS Code REPL is not ideal and does not match the Google Chrome behavior. The issue is tracked here but is in the backlog.

It would also be nice if you could drag the REPL input area to be taller.