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

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

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

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

You can find the data in its original form at the Gapminder website

We will be working with data that has been already transformed to be used in a Vega map specification

The starter project for this case study is one of the zoomable world map example from Vega’s documentation website.

Download the project and look at the specification – what property do we need to connect with the gapminder data? How do we do that?

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

Add a legend to the visualization.

You can use the orient property.

Also, try making the svg canvas size wider.

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

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?

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

We can add a format property to the legend.

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

The original data come from Kaggle

Check the transformed data

Download the starter project