Here’s a very simple barchart defined in vega-lite.

The code to generate it:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.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}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "b", "type": "quantitative"},
    "y": {"field": "a", "type": "nominal"}
  }
}

What do we see in this code (called the specification for this plot)? The "$schema" key indicates what version of vega-lite (or vega) we are using. Always provide this, but we won’t mention it further in this tutorial.

The keys in the example above are data, mark and encoding. On the documentation website, you see these three in the menu on the left of the screen.

  • data: either lists the data that will be used, or provides a link to an external source
  • mark: tells us what type of visual we want. In this case, we want bars. These can be area, bar, circle, line, point, rect, rule, square, text, tick and geoshape.
  • encoding: tells us how to link the data to the marks.

Exercise - Check in the documentation: [1] what types of data can be loaded, [2] what the different types of marks are, and [3] what the different encoding channels are (i.e. what is available apart from x and y?)