Vega-lite

Vega-lite is work in progress and we are working on improving the code and documentation.

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.)

Install gulp globally by running

npm install -g gulp

Then install all the npm dependencies:

npm install

You can run gulp to compile vega-lite or run gulp serve to open the live vega-lite editor.

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.