Vega Viewer

Random Fractals Inc.

|
1,158 installs
| (7) | Free
VSCode extension for Interactive Preview of Vega & Vega-Lite maps 🗺️ & graphs 📈
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Vega Viewer

Version Installs Downloads https://ko-fi.com/dataPixy

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

You can use it in 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! :)

Box Plot

Features

  • Create Vega Spec JSON documents
  • Vega & Vega-Lite Graphs Preview
  • Local & http(s) data files support
  • SVG & PNG Graph Export options
  • 598 built-in Vega & Vega-Lite Examples
  • Vega Themes Preview
  • Preview Vega specs from online Vega Editor or github gists
  • Referenced CSV & JSON data display via Data Preview 🈸

Vega Viewer Data Preview

Settings

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

Vega Viewer Data Preview Command Setting

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

Alt text

Vega Viewer VSCode Contributions

Alt text

Vega Viewer Commands

Alt text

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:

Alt text

Contributions

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

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