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
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
Run Vega: Preview Vega Graph
command on an open .vg.json
|| .vl.json
Vega spec document to Preview 📈
Save updated Vega spec json
document to Preview updated Graph 📈
Use Vega: Preview Remote Vega Graph
command to preview URL encoded Vega specs from online
Vega Editor or github gists
Built-in Examples
Run Vega: Examples
command to view the list of built-in Vega Examples
Run Vega: Lite Examples
command to view all the Vega-Lite Maps 🗺 & Graphs 📈 created by the Vega dev community 🤗
Run Vega: Visual Vocabulary Examples
command to View quick list of Visual Vocabulary Vega Examples
...

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:
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 🐼, or @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:

Contributions
Any & all test, code || feedback contributions are welcome.
Open an issue || create a pull request to make Vega Viewer 📈 work better for all. 🤗