September 20, 2022


  1. Reproduce penguins scatterplot with Vega


Visualization Grammar

  1. Vega is a visualization grammar
  2. Vega allows us to create objects that describe the visualization elements

Go to the Vega website

First Vega project

Download seed project

<!DOCTYPE html>
<html lang="en">
       <title>CSC 444 First Vega Plot</title>
       <meta charset="UTF-8" />
       <script src=""></script>
       <div id="view"></div>
    <script src="source/penguins.js"></script>

Set up runtime

In your penguins.js you already have some code that sets up a new vega View (based on the #view div in index.html).

// create runtime
var runtime = vega.parse(spec);

// create view
var view = new vega.View(runtime)

// run it;

Adding to spec

For our spec we define what our visualization will look like.

Let’s start with width and height of our svg (and some padding)

var spec = {
    width: 500,
    height: 500,
    padding: 50

Note how the spec object is an object like we’ve seen before, with property: value syntax.

Loading data

I have the penguins data in json format on GitHub for us to use.

data: [
          url: "",
          name: "penguins"


Scales use the same concepts as d3:

  1. type can be linear, ordinal, etc.
  2. specify a domain and a range
  3. use vega keywords like width
  4. give your scale a name so you can call it later in your spec
scales: [
            name: "xScale",
            type: "linear",
            domain: {data: "penguins", field: "billLength"},
            range: "width"


To draw on the svg using the data observations, we do what we did for d3, but in an object format:

marks: [
          type: "symbol",
          from: { data: "penguins" },
          encode: {
            enter: {
              x: { field: "billLength", scale: "xScale" },
              y: { field: "billDepth", scale: "yScale" },


For adding axes, we need to specify the scale and the orientation.

axes: [
            scale: "xScale",
            orient: "bottom",


Add color

Add a legend

  1. Add a legends property to the spec
  2. Add an object inside legends with your color scale mapped to fill
  3. Add a title

Check the Vega documentation on legends

Add titles

  1. Add titles to your axes
  2. Add a title property to your spec with an object that specifies a string for text, subtitle, fontSize, and any other property you can find in the documentation