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

1. Download index.html to start this project
2. Change candy.js to visualize competitor names by their win percent (here’s the data)
3. Add a signal that binds to a check box for each candy feature (chocolate, caramel, etc.)
4. Use these signals to filter the data

Due to the pandemic, Google made data available on community mobility.

The Arizona data by county can be found on GitHub

Discuss with a classmate:

1. What categorical variables are present in the data?
2. What is the main numeric variable of importance here?
3. How can we build a visualization that displays the mean percent change by year, county, and place?

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?

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

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

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.

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

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.