jupyterlab_vega

A JupyterLab and Jupyter Notebook extension for rendering Vega and Vega-lite

Prerequisites

• JupyterLab >=0.11.0 and/or Notebook >=4.3

Usage

To render Vega output in IPython:

from jupyterlab_vega import Vega

Vega({
    "width": 400,
    "height": 200,
    "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
    "data": [
        {
            "name": "table",
            "values": [
                {"x": 1,  "y": 28}, {"x": 2,  "y": 55},
                {"x": 3,  "y": 43}, {"x": 4,  "y": 91},
                {"x": 5,  "y": 81}, {"x": 6,  "y": 53},
                {"x": 7,  "y": 19}, {"x": 8,  "y": 87},
                {"x": 9,  "y": 52}, {"x": 10, "y": 48},
                {"x": 11, "y": 24}, {"x": 12, "y": 49},
                {"x": 13, "y": 87}, {"x": 14, "y": 66},
                {"x": 15, "y": 17}, {"x": 16, "y": 27},
                {"x": 17, "y": 68}, {"x": 18, "y": 16},
                {"x": 19, "y": 49}, {"x": 20, "y": 15}
            ]
        }
    ],
    "scales": [
        {
            "name": "x",
            "type": "ordinal",
            "range": "width",
            "domain": {"data": "table", "field": "x"}
        },
        {
            "name": "y",
            "type": "linear",
            "range": "height",
            "domain": {"data": "table", "field": "y"},
            "nice": True
        }
    ],
    "axes": [
        {"type": "x", "scale": "x"},
        {"type": "y", "scale": "y"}
    ],
    "marks": [
        {
            "type": "rect",
            "from": {"data": "table"},
            "properties": {
                "enter": {
                    "x": {"scale": "x", "field": "x"},
                    "width": {"scale": "x", "band": True, "offset": -1},
                    "y": {"scale": "y", "field": "y"},
                    "y2": {"scale": "y", "value": 0}
                },
                "update": {
                    "fill": {"value": "steelblue"}
                },
                "hover": {
                    "fill": {"value": "red"}
                }
            }
        }
    ]
})

Or Vega-lite:

from jupyterlab_vega import VegaLite

VegaLite({
    "data": {
        "values": [
            {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
            {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
            {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
        ]
    },
    "mark": "bar",
    "encoding": {
        "x": {"field": "a", "type": "ordinal"},
        "y": {"field": "b", "type": "quantitative"}
    }
})

To render a .vg or .vl (.vg.json and .vl.json are also supported) file as a tree, simply open it:

Install

To install using pip:

pip install jupyterlab_vega
# For JupyterLab
jupyter labextension install --py --sys-prefix jupyterlab_vega
jupyter labextension enable --py --sys-prefix jupyterlab_vega
# For Notebook
jupyter nbextension install --py --sys-prefix jupyterlab_vega
jupyter nbextension enable --py --sys-prefix jupyterlab_vega

Development

Set up using install script

Use the install.sh script to build the Javascript, install the Python package, and install/enable the notebook and lab extensions:

bash install.sh --sys-prefix

Use the build.sh script to rebuild the Javascript:

bash build.sh

Set up manually

Alternatively, see the README.md in /labextension and /nbextension for extension-specific build instructions.

To install the Python package:

pip install -e .

To install the extension for JupyterLab:

jupyter labextension install --symlink --py --sys-prefix jupyterlab_vega
jupyter labextension enable --py --sys-prefix jupyterlab_vega

To install the extension for Jupyter Notebook:

jupyter nbextension install --symlink --py --sys-prefix jupyterlab_vega
jupyter nbextension enable --py --sys-prefix jupyterlab_vega