Create visualizations with vega on your machine using your preferred editor

tl;dr: vega online editor is great for trial and learning but when you want to develop locally, you can use vega-desktop with your preferred editor to overcome the limitations of the online editor.

I have been playing around with UW Interactive Data Lab ‘s vega and vega-lite for creating visualization based on their “grammar of interactive graphics” concept. The vega team provide an online editor which you can modify the spec (JSON) on the left side and see updates immediately on the right side. The editor has auto-complete and many great examples.

vega’s online editor

This is great for demo, learning and experimenting without the need to install anything. However, it is not practical for heavy usage for multiple reasons:

1. Passing data to the editor. Either you have to put your data in the spec or make it available through a url. Including data in the spec is ok for small dataset, but if your data is large, the text-editor would have to do a lot more work to display the data text, slowing everything down. Uploading data somewhere and access it via url is another option, but can be slower for large dataset and you will not want to make your sensitive data available through a public url.
2. In-browser editor has its limitations. We all have our favorite editors with short keys, plugins, etc. which are perfectly setup on our machine. It will be much faster to use that to edit the JSON.
3. You can’t save to local disk.

Time to go local

To go beyond these limitations, you can use your favorite editor to write vega spec locally on your machine and see the vis updated in vega-desktop. vega-desktop can watch a vega/vega-lite json file and automatically re-render when the file is changed.

What about auto-complete? The auto-complete in vega editor is based on JSON schema validation. See the magic line below that you will notice in each vega spec. The editor just follows this schema URL and use it to validate the JSON. Visual Studio Code has this validation built-in so you don’t have to do anything. Atom and sublime require additional plugins. I haven’t tried with other editors though, but I believe there should be plugins available.

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  ...
}

Let me show you how to set this up with Visual Studio Code then.

1. I first save the vega file locally. Let’s call it mySpec.vg.json
2. I open mySpec.vg.json in VS Code on the left side of the screen
3. I open mySpec.vg.json in vega-desktop on the right side of the screen, and click on “watch”. The button should turn yellow.
4. Edit the file, save and see changes.
5. Enjoy!

(left) VSCode (right) vega-desktop. Both open the same file. Editing the file on the left and save will trigger vega-desktop to re-render automatically.

So if you are interested, go ahead and download vega-desktop.