Vega Viewer

Vega Viewer provides language support & Interactive Preview of Vega & Vega-Lite JSON spec graphs 📈

You can use it in a disconnected mode, unlike other online dataViz devTools, to prototype your maps 🗺️ & graphs 📈 on a go, on a ✈️, on a 🚄, on a 🚤, in a 📦 with a 🐐, and no d3 py plotly || rstats required! :)

Features

• Create Vega || Vega-Lite JSON {} spec documents
• Vega & Vega-Lite Graphs Preview 📈
• Local & http(s) data files support
• SVG & PNG Graph Export options
• ~ 700 searchable built-in Vega & Vega-Lite Examples
• Vega Themes Preview
• Load Vega specs from online Vega Editor or github gists
• Preview Vega graphs 📈 from ⭐️ Starred Gists, Playgrounds & featured Data Visualizations in GistPad 📘
• View and Share Vega(-Lite) spec in the online Vega Editor
• Referenced CSV & JSON data display via Data Preview 🈸

Settings

Install Data Preview 🈸 or use built-in vscode.open command to preivew referenced CSV & JSON data files for your Vega graphs 📈

Usage

1. Use Vega: Create Vega Spec command from View -> Command Pallette... menu to Create & Save new Vega || Vega-Lite document with the corresponding Vega json $schema reference

2. Run Vega: Preview Vega Graph command on an open .vg.json || .vl.json Vega spec document to Preview 📈

3. Save updated Vega spec json document to Preview updated Graph 📈

4. Use Vega: Preview Remote Vega Graph command to preview URL encoded Vega specs from online Vega Editor or github gists

Built-in Examples

1. Run Vega: Examples command to view the list of built-in Vega Examples

2. Run Vega: Lite Examples command to view all the Vega-Lite Maps 🗺 & Graphs 📈 created by the Vega dev community 🤗

3. Run Vega: Visual Vocabulary Examples command to View quick list of Visual Vocabulary Vega Examples

...

Example: Vega Contour Plot Preview

Vega Viewer VSCode Contributions

Vega Viewer Commands

Vega Viewer GistPad Integration

Recommended Extensions

Other extensions Vega Viewer replaces, enhances or supplements for working with data and graphs 📈 in VSCode:

Dev Log

See #VegaViewer 📈 tag on Twitter for the latest & greatest updates on this vscode extension & what's in store next.

Dev Build

$ 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:

Contributions

Any & all test, code || feedback contributions are welcome.

Open an issue || create a pull request to make Vega Viewer 📈 work better for all. 🤗