Vega Viewer

Random Fractals Inc.

|
1,430 installs
| (8) | 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
  • Over 620 searchable built-in Vega & Vega-Lite Examples
  • Vega Themes Preview
  • Load Vega specs from online Vega Editor or github gists
  • View and Share Vega(-Lite) spec in online Vega Editor
  • 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

Recommended Extensions

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

Extension Description
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 Viewer SVG Viewer for Visual Studio Code
Geo Data Viewer 🗺️ 🗺️ Geo Data Viewer w/0 Py 🐍, pyWidgets, pandas 🐼, @reactjs ⚛️ required to gen. some snazzy maps 🗺️ with keplerGL ...

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. 🤗