Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/randomfractals/vscode-vega-viewer
VSCode extension for Interactive Preview of Vega and Vega-Lite maps 🗺️ and graphs 📈.
https://github.com/randomfractals/vscode-vega-viewer
charts extension graphs maps preview vega vega-lite viewer vscode
Last synced: 3 months ago
JSON representation
VSCode extension for Interactive Preview of Vega and Vega-Lite maps 🗺️ and graphs 📈.
- Host: GitHub
- URL: https://github.com/randomfractals/vscode-vega-viewer
- Owner: RandomFractals
- License: apache-2.0
- Created: 2018-12-17T17:47:55.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T03:02:26.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T22:49:00.803Z (4 months ago)
- Topics: charts, extension, graphs, maps, preview, vega, vega-lite, viewer, vscode
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer
- Size: 26.2 MB
- Stars: 125
- Watchers: 3
- Forks: 11
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vega Viewer
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer)
[](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer)
[Vega Viewer](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) provides language support and Interactive Preview of [Vega](https://vega.github.io/vega/) and
[Vega-Lite](https://vega.github.io/vega-lite/) `JSON` specification graphs.
Use Vega Viewer to find and prototype custom data visualizations using Vega maps 🗺️ and graphs 📈.
# Features
- Create Vega or Vega-Lite JSON `{}` specification documents
- Vega and Vega-Lite Graphs Preview 📈
- Local and http(s) data files support
- SVG and PNG Graph Export options
- 724 searchable built-in [Vega](https://vega.github.io/vega/examples/) and [Vega-Lite Examples](https://vega.github.io/vega-lite/examples/)
- [Vega Themes](https://twitter.com/search?q=%23vegaThemes&src=typed_query) Preview
- Load Vega specs from online [Vega Editor](https://vega.github.io/editor) or github gists
- Preview Vega graphs 📈 from starred gists, playgrounds, and data visualizations in [GistPad 📘](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs)
- View and Share Vega(-Lite) spec in the online [Vega Editor](https://vega.github.io/editor)
- Referenced `CSV` and `JSON` data display via [Data Preview 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview)
# Installation
Install [Vega Viewer](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) 📈 from VSCode Extensions tab (`Ctrl+Shift+X`) by searching for `Vega`, or directly from [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer) link in your browser.
Users of [VSCodium](https://vscodium.com), [Azure Data Studio](https://github.com/microsoft/azuredatastudio), and other VSCode-based IDEs can install Vega Viewer using `.vsix` extension package attached in `Assets` section from published [releases](https://github.com/RandomFractals/vscode-vega-viewer/releases) of this extension on github. Follow [install from .vsix](https://code.visualstudio.com/docs/editor/extension-marketplace#_install-from-a-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.
# Settings
Install [Data Preview 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview)
or use built-in `vscode.open` command to preivew `CSV` and `JSON` data files referenced in your Vega graph 📈 specifications.
# Usage
1. Use `Vega: Create Vega Spec` command from `View -> Command Pallette...` menu
to Create and Save new Vega or Vega-Lite document with the corresponding Vega `json` `$schema` reference.
2. Use `Vega: Preview Vega Graph` command on an open `.vg.json` or `.vl.json` Vega spec document to Preview Graph 📈.
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](https://vega.github.io/editor) or [github gists](https://gist.github.com/).
## Built-in Examples
1. Use `Vega: Examples` command to view the list of built-in [Vega Examples](https://vega.github.io/vega/examples/).
2. Use `Vega: Lite Examples` command to view all the [Vega-Lite Maps 🗺 and Graphs 📈](https://vega.github.io/vega-lite/examples/) created by the Vega dev community.
3. Use `Vega: Visual Vocabulary Examples` command to View quick list of [Visual Vocabulary Vega](https://github.com/gramener/visual-vocabulary-vega/) Examples.
...
## Example: [Vega Contour Plot Preview](https://vega.github.io/vega/examples/contour-plot/)
# 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](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) extension for Vega and Vega-Lite graph Previews:
# Recommended Extensions
Recommended extesnsions for working with data, gists, maps and SVG graphs 📈 in [VSCode](https://code.visualstudio.com/):
| Extension | Description |
| --- | --- |
| [Data Preivew 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview) | Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 & exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro & Excel data files. |
| [GistPad 📘](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) | VS Code extension for managing and sharing code snippets, notes and interactive samples using GitHub Gists. |
| [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg) | SVG language support extension. |
| [Geo Data Viewer 🗺️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.geo-data-viewer) | Geo Data Viewer for generating snazzy maps 🗺️ with keplerGL. |
# Dev Log
See [#VegaViewer 📈 tag on Twitter](https://twitter.com/hashtag/vegaviewer?src=hash&f=live&vertical=default) for the latest updates on this vscode extension development.
# Dev Build
```bash
$ 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 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.
# Support
Become a [Fan](https://github.com/sponsors/RandomFractals/sponsorships?tier_id=18883&preview=false) and sponsor our dev efforts on this and other [Random Fractals, Inc.](https://twitter.com/search?q=%23RandomFractalsInc&src=typed_query&f=live) code and [data viz extensions](https://marketplace.visualstudio.com/publishers/RandomFractalsInc) if you find them useful, educational, or enhancing your daily dataViz/dev code workflows:
☕️ https://ko-fi.com/dataPixy
💖 https://github.com/sponsors/RandomFractals