Copied embed code to clipboard

Vega-Lite Tutorial

Welcome to the tutorial on Vega-Lite - a declarative visualization grammar! It provides a concise JSON syntax for supporting quick creation of visualizations to support analysis. You can read more about Vega-Lite at
Here, you will find videos explaining the features of Vega-Lite, code walkthroughs for each feature and examples of visualizations.

Play video - Opens a new tab playing the video
Copy Embed - Copies HTML code to embed the video
View Code - Opens the online Vega-Lite Editor with the JSON code

1. Introduction

  • 1 Overview of Vega-Lite

    Introducting Vega-Lite, a declarative visualization grammar that makes coding visualizations easier! This video compares imperative vs. declarative visualizations, motivate the use of Vega-Lite and the structure of the Vega stack.

    1. Vega-Lite Home Page
    Copy Embed
  • 1.1 JSON and the online Vega Editor

    Checking out the online editor and a brief overview of the Vega-Lite JSON schema

    1. JSON Introduction

2. Data

  • 2 Importing datasets into Vega-Lite

    Overview of Vega-Lite's data model, how to import datasets, and how to generate data.

    Copy Embed

3. Transforms

4. Marks

5. Encoding

6. Params

7. View Composition

8. Config

9. Cross-cutting examples

10. Embedding Vega-Lite projects