October 25 2022


  • Multiple views
    • Case Studies:
      • Halloween Candy
      • Google Mobility Data

Case Study 1: Halloween Candy

Multiple Views with Interaction

Case Study 2: Google Mobility Data

The data

Getting Started

  1. Download starter project
  2. Filter the data for a specific year (e.g., 2020) and a specific county
  3. Visualize mean change over week, add color for the different types of places

How to display many years in different facets?

Faceting – Signals

We need to divide our total height by the number of subplots we will create. We will use signals to specify the space between subplots (offset), each subplot height (cellHeight) and the total height (facetHeight) of the entire plot.

 signals: [
        { name: "offset", value: 100},
        { name: "cellHeight", value: 200},
        { name: "facetHeight", update: "3 * (offset + cellHeight)"}

Faceting – Using Signals

For our y scale, we now need to adjust the range using the cellHeight signal. Remember that the y range needs to start with the highest value first (because zero is at the top).

range: [{ signal: "cellHeight" }, 0]

We will then add a facet scale to our scales. The idea is to facet the plot by year, to distribute the start point on the svg canvas across the different years in the data.

  name: "facetScale",
  type: "band",
  domain: { data: "mobility", field: "year" },
  range: [0, { signal: "facetHeight" }]

Marks – Using Groups Again

We will have our marks inside a group mark again. We will have an encode property for our group mark where we get the y for each facet from our facetScale and the height for each subplot from our cellHeight signal.

Marks – Using Groups Again

  name: "years",
  type: "group",
  from: {
    facet: {
      data: "mobility",
      name: "facets",
      groupby: "year"
  encode: {
    enter: {
      y: { field: "year", scale: "facetScale" },
      height: { signal: "cellHeight" }


  1. Move the marks you created for the initial plot inside the group mark we just created.
  2. Move the axes to be inside the group mark as well.


To add a subtitle for each plot, we need to use a text mark outside our group mark but using the group mark name (i.e., years).

  type: "text",
  from: { data: "years" },
  encode: {
    enter: {
      x: { value: 200 },
      y: { field: "y" },
      text: { field: "datum.year" },
      align: { value: "center" }

Add Interaction

We still have different counties to visualize.

Should place be filtered and have county encoded as color in the map?

We can add a HTML input element for the filtering.