Vega Viewer provides language support and Interactive Preview of Vega and
JSON specification graphs.
Use Vega Viewer to find and prototype custom data visualizations using Vega maps 🗺️ and graphs 📈.
- Create Vega or Vega-Lite JSON
- Vega and Vega-Lite Graphs Preview 📈
- Local and http(s) data files support
- SVG and PNG Graph Export options
- 724 searchable built-in Vega and Vega-Lite Examples
- Vega Themes Preview
- Load Vega specs from online Vega Editor or github gists
- Preview Vega graphs 📈 from starred gists, playgrounds, and data visualizations in GistPad 📘
- View and Share Vega(-Lite) spec in the online Vega Editor
JSONdata display via Data Preview 🈸
Users of VSCodium, Azure Data Studio, and other VSCode-based IDEs can install Vega Viewer using
.vsix extension package attached in
Assets section from published releases of this extension on github. Follow install from .vsix instructions in your VSCode extensions compatible IDE or online container service to install it.
Note: VSCodium and other VSCode extension compatible IDE flavors are not officially supported as they require additional testing in those IDE variants.
Install Data Preview 🈸
or use built-in
vscode.open command to preivew
JSON data files referenced in your Vega graph 📈 specifications.
Vega: Create Vega Speccommand from
View -> Command Pallette...menu to Create and Save new Vega or Vega-Lite document with the corresponding Vega
Vega: Preview Vega Graphcommand on an open
.vl.jsonVega spec document to Preview Graph 📈.
Save updated Vega spec
jsondocument to Preview updated Graph 📈.
Vega: Examplescommand to view the list of built-in Vega Examples.
Vega: Lite Examplescommand to view all the Vega-Lite Maps 🗺 and Graphs 📈 created by the Vega dev community.
Vega: Visual Vocabulary Examplescommand to View quick list of Visual Vocabulary Vega Examples.
Vega Viewer VSCode Contributions
Vega Viewer Settings, Commands, Keyboard Shortcuts, Languages, and JSON Validation feature contributions:
Vega Viewer Commands
Vega Viewer provides the following Commands to view built-in Vega and Vega-Lite graph examples and create new visualization specification documents:
Vega Viewer GistPad Integration
Vega Viewer integrates with GistPad extension for Vega and Vega-Lite graph Previews:
Recommended extesnsions for working with data, gists, maps and SVG graphs 📈 in VSCode:
|Data Preivew 🈸||Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 & exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro & Excel data files.|
|GistPad 📘||VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists.|
|SVG||SVG language support extension.|
|Geo Data Viewer 🗺️||Geo Data Viewer for generating snazzy maps 🗺️ with keplerGL.|
See #VegaViewer 📈 tag on Twitter for the latest updates on this vscode extension development.
$ git clone https://github.com/RandomFractals/vscode-vega-viewer $ cd vscode-vega-viewer $ npm install $ code .
F5 to launch Vega Viewer extension VSCode debug session:
Any and all test, code and feedback contributions are welcome.
Open an issue or create a pull request to make Vega Viewer 📈 work better for all.