Vega-lite

Vega-lite is still in alpha phase and we are working on improving the code and documentation. Note that our syntax might change slight before we release 1.0.

Provides a higher-level grammar for visual analysis, comparable to ggplot or Tableau, that generates complete Vega specifications.

Vega-lite specifications consist of simple mappings of variables in a data set to visual encoding channels such as position (x,y), size, color and shape. These mappings are then translated into full visualization specifications using the Vega visualization grammar. These resulting visualizations can then be exported or further modified to customize the display.

If you are using Vega-lite for your project(s), please let us know by emailing us at Vega-lite [at] cs.washington.edu. Feedbacks are also welcomed. If you find a bug or have a feature request, please create an issue.

Use Vega-lite in the online editor.

The complete schema for specifications as JSON schema is at spec.json.

Example specification

We have more example visualizations in our gallery.

Barleys

{
  "data": {"url": "data/barley.json"},
  "marktype": "point",
  "encoding": {
    "x": {"type": "Q","name": "yield","aggregate": "avg"},
    "y": {
      "sort": [{"name": "yield","aggregate": "avg","reverse": false}],
      "type": "O",
      "name": "variety"
    },
    "row": {"type": "O","name": "site"},
    "color": {"type": "O","name": "year"}
  }
}

Simple bar chart

This is a similar chart as one of the Vega examples in https://github.com/trifacta/vega/wiki/Tutorial. See how much simpler it is.

{
  "data": {
    "values": [
      {"x":"A", "y":28}, {"x":"B", "y":55}, {"x":"C", "y":43},
      {"x":"D", "y":91}, {"x":"E", "y":81}, {"x":"F", "y":53},
      {"x":"G", "y":19}, {"x":"H", "y":87}, {"x":"I", "y":52}
    ]
  },
  "marktype": "bar",
  "encoding": {
    "y": {"type": "Q","name": "y"},
    "x": {"type": "O","name": "x"}
  }
}

Setup Instructions

Make sure you have node.js. (We recommend using homebrew and simply run brew install node.)

Then, cd into your local clone of the repository, and install all the npm dependencies:

cd vega-lite
npm install

Commands

You can run npm run build to compile vega-lite or run npm start to open the live vega-lite editor.

You can npm run watch to start a watcher task that regenerate the spec.json file whenever schema.js changes, and lints and tests all JS files when any .js file in test/ or src/ changes.

Note: These commands use Gulp internally; to run them directly (instead of through the npm run aliases), install gulp globally with

npm install -g gulp

Developing Vega-lite and Datalib

Vega-lite depends on Datalib. If you plan to make changes to datalib and test Vega-lite without publishing / copying compiled datalib all the time, use npm's link function.

# first link datalib global npm
cd path/to/datalib
npm link
# then link vega-lite to datalib
cd path/to/vega-lite
npm link datalib

Now all the changes you make in Datalib are reflected in your Vega-lite automatically.