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.

  References

  1. Vega-Lite Home Page
  Play Video

  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

  References

  1. JSON Introduction
  Play Video

  Copy Embed

  View Code

2. Data

• 
  2 Importing datasets into Vega-Lite

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

  References

  1. Vega-Lite's Data Model
  Play Video

  Copy Embed

3. Transforms

• 
  3 Transforms Overview

  Overview of transforms, how to declare them, and how to use the Vega Expression language.

  References

  1. Vega-Lite Transforms
  Play Video

  Copy Embed
• 
  3.1 Sampling and Filtering transforms examples

  Sampling "n" data points and filtering data using predicates (conditions).

  References

  1. Sampling Transform
  2. Filtering Transform
  Play Video

  Copy Embed

  View Code
• 
  3.2 Calculate transform example

  Adding a new attribute to your dataset, based on another attribute

  References

  1. Calculate Transform
  Play Video

  Copy Embed

  View Code
• 
  3.3 Aggregation transform example

  Averages, standard deviations, sums - this transform lets you aggregate your data

  References

  1. Aggregate Transform
  Play Video

  Copy Embed

  View Code
• 
  3.4 Lookup transform example

  Combining multiple datasets into one

  References

  1. Lookup Transform
  Play Video

  Copy Embed

  View Code
• 
  3.5 Binning transform example

  Another form of aggregation, especially useful for histograms and heatmaps

  References

  1. Binning Transform
  2. Histogram example
  Play Video

  Copy Embed

  View Code

4. Marks

• 
  4 Marks Overview

  Overview of the mark object, how to declare them and their relation to encodings

  References

  1. Vega-Lite Marks
  Play Video

  Copy Embed
• 
  4.1 Point, Line and Bar Marks Examples

  Examples for 3 mark types, and their specific encoding channels and properties

  References

  1. Point Mark
  2. Line Mark
  3. Bar Mark
  Play Video

  Copy Embed

  View Code
• 
  4.2 Rule and Area marks

  Overlaying rule marks on existing visualizations, and exploring area charts, stacked area charts and stream graphs

  References

  1. Rule Mark
  2. Rule x, x2, y, y2 interactive demo
  3. Area Mark
  4. Stream Graph Example
  Play Video

  Copy Embed

  View Code

5. Encoding

• 
  5 Encodings Overview

  Overview of encoding channels & channel definitions

  References

  1. Vega-Lite Encoding
  Play Video

  Copy Embed

  View Code
• 
  5.1 Scales - Overview & custom scales example

  Overview of scales, domains and ranges. Plus an example in code to set custom scales

  References

  1. Vega-Lite Scale Object
  Play Video

  Copy Embed

  View Code
• 
  5.2 Position Channels and Mark Property Encoding Channels Example

  Coding examples for:
  1) position ("x", "y") , and secondary position channels ("x2", "y2")
  2) mark property channels - color, shape, size

  References

  1. Position Channels
  2. Mark Property Channels
  3. Gantt Chart (Ranged bars)
  Play Video

  Copy Embed
• 
  5.3 Time Units example

  Different types of time-units, how Vega-Lite handles time-data and three ways of using time-units.

  References

  1. Time Units
  Play Video

  Copy Embed

  View Code

6. Params

• 
  6 Params Overview

  How interaction in Vega-Lite is defined with 2 types of params (variable and selection), how to declare them and how to use them as predicates, in expressions strings and for data extents.

  References

  1. Vega-Lite Params
  Play Video

  Copy Embed
• 
  6.1 Variable Parameters

  Drop-downs, sliders, input elements - variable parameters and how to use them

  References

  1. Variable Params
  2. Vega Signals - Input Element Binding
  Play Video

  Copy Embed

  View Code
• 
  6.2 Point Selections

  Click and select individual or a group of data points

  References

  1. Point Selections
  Play Video

  Copy Embed

  View Code
• 
  6.3 Interval Selections

  Drag and select to select data points in an interval, using a scatterplot matrix example.

  References

  1. Interval Selections
  Play Video

  Copy Embed

  View Code

7. View Composition

• 
  7 View Composition Overview

  Overview of methods for combining multiple views, and one-sliders on the four methods.

  References

  1. Vega-Lite View Composition
  Play Video

  Copy Embed

  View Code
• 
  7.1 Layering Example

  Layering one plot on top of the other

  References

  1. Layering
  2. Layering Rolling Mean Example
  Play Video

  Copy Embed

  View Code
• 
  7.2 Concatenation Example

  Placing multiple independent plots next to each other

  References

  1. Concatenation
  2. Histograms on Heatmap Example
  Play Video

  Copy Embed

  View Code
• 
  7.3 Faceting Example

  Repeating a visualization based on values of an attribute - especially useful for Trellis plots

  References

  1. Faceting
  Play Video

  Copy Embed

  View Code
• 
  7.4 Repeating Views Example

  Repeating a visualization based on different attributes

  References

  1. Repeating
  2. Repeating example with weather data
  3. SPLOM: ScatterPLOt Matrix
  Play Video

  Copy Embed

  View Code

8. Config

• 
  8 Config overview

  Overview of config object plus an example in code.

  References

  1. Config
  Play Video

  Copy Embed

  View Code

9. Cross-cutting examples

• 
  9.1 Interactive Dashboard Example

  Creating a dashboard based on the cars dataset with linking and brushing between histograms and a scatterplot.

  References

  1. "Brushing and Linking Example with Vega-Lite", Michele Weigle
  Play Video

  Copy Embed

  View Code
• 
  9.2 Geovisualization in Vega-Lite - Examples

  Topojsons, projections and geoviz in Vega-Lite with two examples.

  References

  1. Projections
  2. Chloropleth Example
  3. Layering on GeoVis Example
  Play Video

  Copy Embed

  View Code
• 
  9.3 Streaming Data Example with Vega-Lite API

  Handling data that changes over time, using the Vega-Lite and Vega View APIs

  References

  1. Streaming Data Tutorial
  Play Video

  Copy Embed

10. Embedding Vega-Lite projects

• 
  10.1 Embedding Vega-Lite Specifications

  Embedding Vega-Lite JSON into JavaScript, Python, Julia, R, and PowerBI

  References

  1. Using VegaEmbed()
  2. Converting Vega-Lite to Altair
  3. The vl string macro
  4. Coerce to vegaspec
  5. PowerBI and Vega - Using Deneb
  Play Video

  Copy Embed
• 
  10.2 Altair - Using Vega-Lite with Python

  Embedding Vega-Lite into python (jupyter) notebooks using the Altair API

  References

  1. Altair Home Page
  2. Cloropleth Map - Altair
  Play Video

  Copy Embed
• 
  10.3 Vega-Lite API

  Building visualizations in JavaScript using the Vega-Lite API

  References

  1. Vega-Lite API
  2. Stand-Alone Usage in a Web Browser - VL API Observable
  3. "Learning Vega-Lite API for Javascript on Observable", John Alexis Guerra Gomez
  Play Video

  Copy Embed
• 
  10.4 VegaLite.jl - Using Vega-Lite with Julia

  Embedding Vega-Lite into Julia (jupyter) notebooks using the VegaLite.jl package.

  References

  1. VegaLite.jl package for Julia
  Play Video

  Copy Embed