CODEWITHSUNDEEP
javascriptvegavega-lite
Matthew
Matthew

Reputation: 105

Why are the encodings split up like this in this vega-lite graph?

In this multi-line graph with a ruler style tooltip they split up the encoding between three layers & nest a layer inside an outer layer.

https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html

Specifically:

 "encoding": {"x": {"field": "date", "type": "temporal"}},
  "layer": [
    {
      "encoding": {
        "color": {"field": "symbol", "type": "nominal"},
        "y": {"field": "price", "type": "quantitative"}
      },
      "layer": [
        {"mark": "line"},
        {"transform": [{"filter": {"selection": "hover"}}], "mark": "point"}
      ]
    },
    {
      "transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
      "mark": "rule",
      "encoding": {
        "opacity": {
          "condition": {"value": 0.3, "selection": "hover"},
          "value": 0
        },
        "tooltip": [ ... ],
        "selection": { ... }
      }
    }

There's an encoding first outside the layers defining the x channel. Then they add an encoding inside the first layer, defining the y & color channels. Then they seem to nest a layer inside this outer layer and define the points that show up? Finally they add a second layer to define the tooltip.

What i'm not understanding however is

  1. What the point of this encoding block that is outside of the layers array. Whats the effect of this? Why split up the encoding like this?

  2. There's a layer inside an outer layer, why?

The docs don't seem to explain any of this.

Upvotes: 1

Views: 167

Answers (1)

jakevdp
jakevdp

Reputation: 86463

1) What the point of this encoding block that is outside of the layers array. Whats the effect of this?

Encodings above the layer are inherited by every subchart in the layer.

2) Why split up the encoding like this. There's a layer inside an outer layer, why?

The main reason you might use a multi-layer structure like this is to avoid repetition of encoding specifications. You could create an equivalent result by moving all encodings into each layer, and using a single layer statement, like this (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/stocks.csv"},
  "width": 400,
  "height": 300,
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "transform": [{"filter": {"selection": "hover"}}],
      "mark": "point",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "transform": [{"pivot": "symbol", "value": "price", "groupby": ["date"]}],
      "mark": "rule",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "opacity": {
          "condition": {"value": 0.3, "selection": "hover"},
          "value": 0
        },
        "tooltip": [
          {"field": "AAPL", "type": "quantitative"},
          {"field": "AMZN", "type": "quantitative"},
          {"field": "GOOG", "type": "quantitative"},
          {"field": "IBM", "type": "quantitative"},
          {"field": "MSFT", "type": "quantitative"}
        ]
      },
      "selection": {
        "hover": {
          "type": "single",
          "fields": ["date"],
          "nearest": true,
          "on": "mouseover",
          "empty": "none",
          "clear": "mouseout"
        }
      }
    }
  ]
}

It just involves a lot of repetition of equivalent encodings.

Upvotes: 2

Related Questions