November 1 2022

Agenda

  • Examples of string concatenation
  • How to implement a map visualization in Vega
  • Case Study: Gapminder data
    • fill color schemes
    • legends

String Concatenation

Tooltip in hover

hover: {
  fill: { value: "black" },
  tooltip: { signal: "'number of sets:\\n'  + datum.n" }
}

Transform

{
  type: "formula",
  expr: "'52 weeks of ' + datum.year",
  as: ["year"]
}

Encode

From the vega website example on error bars:

update: {
          y: { scale: "yscale", field: "variety", band: 0.5},
          x: { scale: "xscale", signal: "datum[measure+'0']"},
          x2: { scale: "xscale", signal: "datum[measure+'1']"}
        }

Map Case Study: Gapminder data

The data

Data Joins

We can use the lookup transform to join the gapminder data to the world map data:

transform: [
  { 
    type: "lookup",
    from: "gapminder",
    key: "id",
    fields: ["id"],
    values: ["lifeExpectancy"] }
]

Legends

Add a legend to the visualization.

You can use the orient property.

Also, try making the svg canvas size wider.

Hover and Tooltip

We can use tooltip with signal to customize the ALT text that shows when hovering over a shape.

encode: {
          enter: {
            fill: { field: "lifeExpectancy", scale: "fillScale" },
            tooltip: { signal: "datum.country + ' ' + datum.lifeExpectancy"}
          },
          hover: {
            stroke: { value: "red" },
            strokeWidth: { value: 1.5}
          },
          update: {
            stroke: { value: "#bbb"},
            strokeWidth: { value: 0.5}
          }
        }

Color Schemes

We can change the scale type to be quantized scale:

scales: [
  {
    name: "fillScale",
    type: "quantize",
    domain: { data: "gapminder", field: "lifeExpectancy" },
    range: { scheme: "oranges", count: 15 }
  }
]

Change the count property in range – how does that change the overall map visualization?

Color Schemes

We use a custom domain so outliers don’t wash out the differences for other values.

 scales: [
        {
            name: "fillScale",
            type: "quantize",
            domain: [60, 80],
            range: { scheme: "oranges", count: 10 }
        }
    ],

Changing the legend

We can add a format property to the legend.

legends: [
      {
        fill: "fillScale",
        orient: "bottom-right",
        title: "Life Expectancy",
        format: "0"
      }
    ]

Case Study 2: US Election Map

The data