September 20, 2022

Agenda

  1. Reproduce penguins scatterplot with Vega

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">
    <head>
       <title>CSC 444 First Vega Plot</title>
       <meta charset="UTF-8" />
       <script src="https://vega.github.io/vega/vega.min.js"></script>
    </head>
    <body>
       <div id="view"></div>
    </body>
    <script src="source/penguins.js"></script>
</html>

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)
                   .renderer("svg")
                   .initialize("#view")
                   .hover();

// run it
view.run();

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: "https://raw.githubusercontent.com/picoral/csc-444-data/main/penguins.json",
          name: "penguins"
        }
      ]

Scales

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"
          }
        ]

Marks

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" },
                   }
                 }
              }
        ]

Axes

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

axes: [
        {
            scale: "xScale",
            orient: "bottom",
        }
      ]

Challenge

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