typescript-notebook icon indicating copy to clipboard operation
typescript-notebook copied to clipboard

Add Vega and Vega-Lite charts support

Open RandomFractals opened this issue 4 years ago • 2 comments
trafficstars

@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

RandomFractals avatar Sep 06 '21 12:09 RandomFractals

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.

DonJayamanne avatar Sep 06 '21 23:09 DonJayamanne

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

RandomFractals avatar Sep 07 '21 11:09 RandomFractals