Vega-lite ![Build Status](https://travis-ci.org/uwdata/vega-lite.svg)
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.
The complete schema for specifications as JSON schema is at spec.json. Use Vega-lite in the online editor.
Example specification
Barleys
{
"data": {"url": "data/barley.json"},
"marktype": "point",
"enc": {
"x": {"type": "Q","name": "yield","aggr": "avg"},
"y": {
"sort": [{"name": "yield","aggr": "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",
"enc": {
"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.