{"id":13588677,"url":"https://github.com/RandomFractals/vscode-vega-viewer","last_synced_at":"2025-04-08T06:32:34.231Z","repository":{"id":36308853,"uuid":"162168994","full_name":"RandomFractals/vscode-vega-viewer","owner":"RandomFractals","description":"VSCode extension for Interactive Preview of Vega and Vega-Lite maps 🗺️ and graphs  📈. ","archived":false,"fork":false,"pushed_at":"2023-03-04T03:02:26.000Z","size":27455,"stargazers_count":128,"open_issues_count":13,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-02T05:41:22.034Z","etag":null,"topics":["charts","extension","graphs","maps","preview","vega","vega-lite","viewer","vscode"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RandomFractals.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["RandomFractals"],"ko_fi":"dataPixy"}},"created_at":"2018-12-17T17:47:55.000Z","updated_at":"2024-11-24T13:17:20.000Z","dependencies_parsed_at":"2023-01-17T01:16:42.897Z","dependency_job_id":"4ebe78b1-60b6-4935-ada5-79e9cc703d33","html_url":"https://github.com/RandomFractals/vscode-vega-viewer","commit_stats":null,"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-vega-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-vega-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-vega-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RandomFractals%2Fvscode-vega-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RandomFractals","download_url":"https://codeload.github.com/RandomFractals/vscode-vega-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247792147,"owners_count":20996878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["charts","extension","graphs","maps","preview","vega","vega-lite","viewer","vscode"],"created_at":"2024-08-01T15:06:51.599Z","updated_at":"2025-04-08T06:32:29.214Z","avatar_url":"https://github.com/RandomFractals.png","language":"TypeScript","funding_links":["https://github.com/sponsors/RandomFractals","https://ko-fi.com/dataPixy","https://ko-fi.com/F1F812DLR'","https://ko-fi.com/dataPixy'","https://github.com/sponsors/RandomFractals/sponsorships?tier_id=18883\u0026preview=false"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Vega Viewer\n\n[![Version](https://img.shields.io/visual-studio-marketplace/v/RandomFractalsInc.vscode-vega-viewer.svg?color=orange\u0026style=?style=for-the-badge\u0026logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer)\n[![Installs](https://img.shields.io/visual-studio-marketplace/i/RandomFractalsInc.vscode-vega-viewer.svg?color=orange)](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer)\n[![Downloads](https://img.shields.io/visual-studio-marketplace/d/RandomFractalsInc.vscode-vega-viewer.svg?color=orange)](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-vega-viewer)\n\u003ca href='https://ko-fi.com/F1F812DLR' target='_blank' title='support: https://ko-fi.com/dataPixy'\u003e\n  \u003cimg height='24' style='border:0px;height:20px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=2' alt='https://ko-fi.com/dataPixy' /\u003e\u003c/a\u003e\n\n[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\n[Vega-Lite](https://vega.github.io/vega-lite/) `JSON` specification graphs.\nUse Vega Viewer to find and prototype custom data visualizations using Vega maps 🗺️ and graphs 📈.\n\n![Advanced Vega Charts](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vega-viewer-advanced-charts.png?raw=true\n \"Vega Viewer Advanced Charts Multipanel View\")\n\n# Features\n\n- Create Vega or Vega-Lite JSON `{}` specification documents\n- Vega and Vega-Lite Graphs Preview 📈\n- Local and http(s) data files support\n- SVG and PNG Graph Export options\n- 724 searchable built-in [Vega](https://vega.github.io/vega/examples/) and [Vega-Lite Examples](https://vega.github.io/vega-lite/examples/)\n- [Vega Themes](https://twitter.com/search?q=%23vegaThemes\u0026src=typed_query) Preview\n- Load Vega specs from online [Vega Editor](https://vega.github.io/editor) or github gists\n- Preview Vega graphs 📈 from starred gists, playgrounds, and data visualizations in [GistPad 📘](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs)\n- View and Share Vega(-Lite) spec in the online [Vega Editor](https://vega.github.io/editor)\n- Referenced `CSV` and `JSON` data display via [Data Preview 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview)\n\n![Vega Viewer Data Preview](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vega-viewer-data-preview.png?raw=true\n \"Vega Viewer Data Preview\")\n\n# Installation\n\nInstall [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.\n\nUsers 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.\n\n**Note:**  VSCodium and other VSCode extension compatible IDE flavors are not officially supported as they require additional testing in those IDE variants.\n\n# Settings\n\nInstall [Data Preview 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview)\nor use built-in `vscode.open` command to preivew `CSV` and `JSON` data files referenced in your Vega graph 📈 specifications.\n\n![Vega Viewer Data Preview Command Setting](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vega-viewer-data-preview-command-setting.png?raw=true\n \"Vega Viewer Data Preview Command Setting\")\n\n# Usage\n\n1. Use `Vega: Create Vega Spec` command from `View -\u003e Command Pallette...` menu\nto Create and Save new Vega or Vega-Lite document with the corresponding Vega `json` `$schema` reference.\n\n2. Use `Vega: Preview Vega Graph` command on an open `.vg.json` or `.vl.json` Vega spec document to Preview Graph 📈.\n\n3. Save updated Vega spec `json` document to Preview updated Graph 📈.\n\n4. Use `Vega: Preview Remote Vega Graph` command to preview URL encoded Vega specs from online\n[Vega Editor](https://vega.github.io/editor) or [github gists](https://gist.github.com/).\n\n## Built-in Examples\n\n1. Use `Vega: Examples` command to view the list of built-in [Vega Examples](https://vega.github.io/vega/examples/).\n\n2. 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.\n\n3. Use `Vega: Visual Vocabulary Examples` command to View quick list of [Visual Vocabulary Vega](https://github.com/gramener/visual-vocabulary-vega/) Examples.\n\n...\n\n## Example: [Vega Contour Plot Preview](https://vega.github.io/vega/examples/contour-plot/)\n\n![Vega Viewer Plot Example](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vega-viewer-contour.png?raw=true\n \"Vega Viewer Contour Plot Preview\")\n\n# Vega Viewer VSCode Contributions\n\nVega Viewer Settings, Commands, Keyboard Shortcuts, Languages, and JSON Validation feature contributions:\n\n![Vega Viewer Contributions](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vega-viewer-contributions.png?raw=true\n \"Vega Viewer VSCode Contributions\")\n\n# Vega Viewer Commands\n\nVega Viewer provides the following Commands to view built-in Vega and Vega-Lite graph examples and create new visualization specification documents:\n\n![Vega Viewer Commands](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vega-viewer-commands.png?raw=true\n \"Vega Viewer VSCode Commands\")\n\n# Vega Viewer GistPad Integration\n\nVega Viewer integrates with [GistPad](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs) extension for Vega and Vega-Lite graph Previews:\n\n![Vega Viewer Gistpad Integration](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vega-viewer-gistpad-integration.png?raw=true\n \"Vega Viewer GistPad Integration\")\n\n# Recommended Extensions\n\nRecommended extesnsions for working with data, gists, maps and SVG graphs 📈 in [VSCode](https://code.visualstudio.com/):\n\n| Extension | Description |\n| --- | --- |\n| [Data Preivew 🈸](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.vscode-data-preview) | Data Preview 🈸 extension for importing 📤 viewing 🔎 slicing 🔪 dicing 🎲 charting 📊 \u0026 exporting 📥 large JSON array/config, YAML, Apache Arrow, Avro \u0026 Excel data files. |\n| [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. |\n| [SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg) | SVG language support extension. |\n| [Geo Data Viewer 🗺️](https://marketplace.visualstudio.com/items?itemName=RandomFractalsInc.geo-data-viewer) | Geo Data Viewer for generating snazzy maps 🗺️ with keplerGL. |\n\n# Dev Log\n\nSee [#VegaViewer 📈 tag on Twitter](https://twitter.com/hashtag/vegaviewer?src=hash\u0026f=live\u0026vertical=default) for the latest updates on this vscode extension development.\n\n# Dev Build\n\n```bash\n$ git clone https://github.com/RandomFractals/vscode-vega-viewer\n$ cd vscode-vega-viewer\n$ npm install\n$ code .\n```\n`F5` to launch Vega Viewer extension VSCode debug session:\n\n![Alt text](https://github.com/RandomFractals/vscode-vega-viewer/blob/master/docs/images/vscode-vega-viewer-dev-screen.png?raw=true\n \"Vega Viewer Dev Preview\")\n\n# Contributions\n\nAny and all test, code and feedback contributions are welcome.\n\nOpen an issue or create a pull request to make Vega Viewer 📈 work better for all.\n\n# Support\n\nBecome a [Fan](https://github.com/sponsors/RandomFractals/sponsorships?tier_id=18883\u0026preview=false) and sponsor our dev efforts on this and other [Random Fractals, Inc.](https://twitter.com/search?q=%23RandomFractalsInc\u0026src=typed_query\u0026f=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:\n\n☕️ https://ko-fi.com/dataPixy\n💖 https://github.com/sponsors/RandomFractals\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRandomFractals%2Fvscode-vega-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRandomFractals%2Fvscode-vega-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRandomFractals%2Fvscode-vega-viewer/lists"}