search

DonJayamanne / typescript-notebook

Run JavaScript and TypeScript in node.js within VS Code notebooks with excellent support for debugging, tensorflowjs visulizations, plotly, danfojs, etc
https://marketplace.visualstudio.com/items?itemName=donjayamanne.typescript-notebook
MIT License
905 stars 40 forks source link

Add Vega and Vega-Lite charts support #28

Open RandomFractals opened 3 years ago

RandomFractals commented 3 years ago

@DonJayamanne I noticed you have Vega plots on your roadmap: https://github.com/DonJayamanne/typescript-notebook#roadmap

Not sure you've seen it, but some time ago I created Vega Viewer vscode extension to load and render preview of Vega and Vega-Lite charts in vscode: https://github.com/RandomFractals/vscode-vega-viewer

That extension has a few integrations with online Vega Editor too and ships with built-in examples.

My extension is somewhat outdated, but I think you can peruse it for Vega and Vega-Lite chart rendering, theming, and data loading setup.

See: https://github.com/RandomFractals/vscode-vega-viewer/blob/master/web/scripts/vega-viewer.js

and Vega Viewer/Preview panel code here: https://github.com/RandomFractals/vscode-vega-viewer/blob/master/src/vega.preview.ts

DonJayamanne commented 3 years ago

Thanks, my plan is to generate vega output & let a renderer handle rendering the vega charts. I know the Jupyter renderer extension supports vega today. The plan is to ship that (https://github.com/microsoft/vscode-notebook-renderers) as a standalone renderer for the next release https://github.com/microsoft/vscode-jupyter/issues/1909

Once that happens, I'll defer rendering of Plotly plots to other extnsions as well (just as Jupyter notebook renderer or others that support plotly), i.e. lets VS Code extensions deal with rendering the outputs.

RandomFractals commented 3 years ago

I like that. Having a separate extension pack of renderers that handles most popular charting libs and maybe maps later is a great idea.