Using Python Altair for Data Storytelling/

...

/

Vega and Vega-Lite

Vega and Vega-Lite

Learn about the basics of Vega and Vega-Lite and render a sample graph in Vega.

We'll cover the following...

Vega is a visualization grammar that describes the visual appearance and interactive behavior of a chart. To create a design, we’ll write the code in JSON format, and Vega will generate a web-based view using HTML5 Canvas or SVG.

We define a Vega visualization through a specification. A specification is composed of properties and definitions for the data to visualize. The following piece of code shows a basic example of a Vega specification.

Press + to interact
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "An example of vega specification.",
  "width": 600,
  "height": 400,
  "padding": 2,
  "autosize": "pad",
  "signals": [],
  "data": [],
  "scales": [],
  "projections": [],
  "axes": [],
  "legends": [],
  "marks": []
}

Vega supports the following top-level properties:

  • $schema: This is the URL to the Vega schema.

  • description: This is a textual description of the visualization.

  • width, height: This is the width and height in pixels of the data ...