vega-lite

What is vega-lite?

Vega-Lite is a high-level grammar of interactive graphics. It provides a concise JSON syntax for rapidly generating visualizations to support analysis. Vega-Lite specifications can be compiled to Vega specifications.

What are vega-lite's main functionalities?

Basic Chart

This code sample demonstrates how to create a simple bar chart using Vega-Lite. The data is embedded directly in the specification, and the chart maps the 'a' field to the x-axis and the 'b' field to the y-axis.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "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": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"}
  }
}

Interactive Chart

This code sample demonstrates how to create an interactive scatterplot using Vega-Lite. The chart allows users to select a region (brush) to highlight points based on the 'Cylinders' field.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A scatterplot with interactive selection.",
  "data": {"url": "data/cars.json"},
  "mark": "point",
  "encoding": {
    "x": {"field": "Horsepower", "type": "quantitative"},
    "y": {"field": "Miles_per_Gallon", "type": "quantitative"},
    "color": {
      "condition": {
        "selection": "brush",
        "field": "Cylinders",
        "type": "ordinal"
      },
      "value": "grey"
    }
  },
  "selection": {
    "brush": {"type": "interval"}
  }
}

Layered Chart

This code sample demonstrates how to create a layered chart using Vega-Lite. The chart combines a line mark and a point mark to visualize stock prices over time.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A layered chart with a line and point marks.",
  "data": {"url": "data/stocks.csv"},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    }
  ]
}

Other packages similar to vega-lite

plotly.js

Plotly.js is a high-level, declarative charting library. It supports a wide range of chart types and is highly interactive. Compared to Vega-Lite, Plotly.js offers more built-in interactivity and a broader range of chart types, but it can be more complex to use.

chart.js

Chart.js is a simple yet flexible JavaScript charting library. It offers a variety of chart types and is easy to use for basic visualizations. Compared to Vega-Lite, Chart.js is more straightforward but less powerful for complex, interactive visualizations.

d3

D3.js is a powerful JavaScript library for creating data-driven documents. It provides fine-grained control over the visual appearance and behavior of charts. Compared to Vega-Lite, D3.js offers more flexibility and customization options but requires more effort and expertise to use effectively.

README

Vega-Lite

Vega-Lite provides a higher-level grammar for visual analysis that generates complete Vega specifications.

You can find more details, documentation, examples, usage instructions, and tutorials on the Vega-Lite website.

Try using Vega-Lite in the online Vega Editor.

Contributions are also welcome. Please see CONTRIBUTING.md for contribution and development guidelines and our Code of Conduct.

Read about future plans in our roadmap.

Team

The development of Vega-Lite is led by the alumni and members of the University of Washington Interactive Data Lab (UW IDL), including Kanit "Ham" Wongsuphasawat (now at Databricks), Dominik Moritz (now at CMU and Apple), Arvind Satyanarayan (now at MIT), and Jeffrey Heer (UW IDL).

Vega-Lite gets significant contributions from its community--in particular Will Strimling, Yuhan (Zoe) Lu, Souvik Sen, Chanwut Kittivorawong, Matthew Chun, Akshat Shrivastava, Saba Noorassa, Sira Horradarn, Donghao Ren, and Halden Lin. Please see the contributors page for the full list of contributors.

Citing Vega-Lite

@article{2017-vega-lite,
  doi = {10.1109/tvcg.2016.2599030},
  year = {2017},
  author = {Arvind Satyanarayan and Dominik Moritz and Kanit Wongsuphasawat and Jeffrey Heer},
  title = {Vega-Lite: A Grammar of Interactive Graphics},
  journal = {{IEEE} Transactions on Visualization \& Computer Graphics (Proc. InfoVis)},
  url = {http://idl.cs.washington.edu/papers/vega-lite},
}

Changelog

5.9.0 (2023-05-05)

Features

• allow custom tooltip formatting (#8883) (e7b45b8)
• support grouped bars inside time axis with time bins (#8874) (b29fa64)