Vega-Lite 선택을 Quiver 표로 출력

Vega-Lite 차트의 선택값을 transform table로 내보내 후속 카드의 입력으로 사용할 수 있습니다. 객체 집합 차트의 자동 드릴다운과 달리, 선택한 인코딩 값으로 원래 표를 필터링하는 논리를 직접 구성합니다.

Vega 명세 자체의 입력과 Quiver 참조는 Vega plot 구성에 설명되어 있습니다.

두 선택 방식

일부 플롯은 선택을 지원하지 않습니다. 상자 그림과 신뢰구간 플롯은 이 선택 출력 경로에서 지원하지 않습니다.

선택 출력 설정

1. Vega plot 편집기의 Selection Options를 엽니다.
2. Enable output point selections as transform table 또는 Enable output interval selections as transform table을 켭니다. 두 방식을 함께 사용할 수도 있습니다.
3. JSON 명세의 params에 선택 매개변수를 추가합니다.

select.encodings에는 x, y 또는 color처럼 선택 기준으로 사용할 채널을 하나 이상 지정합니다. 어떤 값이 선택되고 출력되는지가 이 설정에 따라 달라집니다. Interval은 x와 y 같은 축 채널만 사용할 수 있습니다.

선택 후 나타나는 카드 아래쪽에서 Output Selection을 누릅니다. 다음 작업 메뉴의 Convert > New Transform Table 경로로도 출력할 수 있습니다.

출력되는 값

Point 선택은 지정한 인코딩의 필드와 값을 표로 반환합니다. 열은 선택한 필드이며 행은 선택값을 나타냅니다.

Interval 선택에서 연속형 필드는 최소 및 최대 경계의 범위로, 이산형 필드는 선택한 값의 배열로 출력합니다.

선택 출력이 원래 입력 데이터를 자동으로 필터링하지는 않습니다. 선택값을 이용해 후속 필터를 만들어야 합니다.

X값을 기준으로 점 선택

다음 Vega-Lite 예제는 가상 데이터에서 x 값이 같은 점을 함께 선택하고 선택한 점을 주황색으로 표시합니다. empty=false이므로 선택이 비어 있을 때는 모든 점을 선택한 것으로 처리하지 않습니다.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 2, "category": "A"},
      {"x": 1, "y": 4, "category": "B"},
      {"x": 2, "y": 3, "category": "A"},
      {"x": 3, "y": 5, "category": "B"}
    ]
  },
  "params": [
    {
      "name": "quiverDefaultClick",
      "select": {"type": "point", "encodings": ["x"]}
    }
  ],
  "mark": {"type": "point", "filled": true},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {
      "condition": {
        "param": "quiverDefaultClick",
        "empty": false,
        "value": "orange"
      },
      "value": "steelblue"
    }
  }
}

Quiver 표를 입력으로 사용할 때는 data.values를 실제 표의 전역 참조로, 각 field를 해당 열 참조로 바꿉니다. 선택 출력용 채널 이름은 그대로 유지합니다.

색상 채널의 범주 선택

select.encodings를 color로 정하면 color 인코딩이 참조하는 범주를 선택합니다. 다음 가상 예제는 선택한 범주의 불투명도를 높여 표시합니다.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 2, "category": "A"},
      {"x": 1, "y": 4, "category": "B"},
      {"x": 2, "y": 3, "category": "A"},
      {"x": 3, "y": 5, "category": "B"}
    ]
  },
  "params": [
    {
      "name": "quiverDefaultClick",
      "select": {"type": "point", "encodings": ["color"]}
    }
  ],
  "mark": {"type": "point", "filled": true},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"},
    "opacity": {
      "condition": {
        "param": "quiverDefaultClick",
        "empty": false,
        "value": 1
      },
      "value": 0.3
    }
  }
}

선 차트에서도 색상으로 구분한 계열을 기준으로 점 선택을 구성할 수 있습니다.

Y축에 한정한 구간 선택

Interval 매개변수의 encodings에 y만 지정하면 세로 값 범위를 선택합니다.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 2},
      {"x": 1, "y": 4},
      {"x": 2, "y": 3},
      {"x": 3, "y": 5}
    ]
  },
  "params": [
    {
      "name": "quiverDefaultBrush",
      "select": {"type": "interval", "encodings": ["y"]}
    }
  ],
  "mark": {"type": "point", "filled": true},
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {
      "condition": {
        "param": "quiverDefaultBrush",
        "empty": false,
        "value": "orange"
      },
      "value": "steelblue"
    }
  }
}

선택 방식을 함께 사용하려면 같은 명세에 이름이 다른 두 매개변수를 구성합니다. Quiver로 내보내는 선택은 플롯마다 quiverDefaultClick 한 개와 quiverDefaultBrush 한 개로 제한됩니다.

선택으로 드릴다운 구성

1. 선택 매개변수와 출력 설정을 마친 뒤 선택 결과를 transform table로 출력합니다.

2. 필터에 사용할 선택 열에서 Pop out column as array를 선택합니다.

3. 원래 transform table의 별도 분기 또는 그 표를 만든 루트 객체 집합의 별도 분기에 필터를 추가합니다. 선택값 배열을 필터 입력으로 연결합니다.

4. 차트에서 선택을 바꾸면 해당 배열과 필터 결과가 갱신됩니다.

출력된 값의 형식에 맞게 필터를 구성합니다. 연속형 Interval이 반환한 범위는 범위 조건에, 선택값 목록은 값 포함 조건에 사용합니다.

지원 플롯과 제한

다음은 알려진 지원 범위이며 전체 플롯 종류의 목록은 아닙니다.

Vega-Lite 명세 자체에는 고유 이름의 매개변수를 여러 개 정의할 수 있지만 Quiver 표로 출력하는 것은 정해진 두 이름뿐입니다.

집계한 필드의 선택

명세 안에서 y 필드에 aggregate를 적용했다면 해당 집계 결과의 일부를 Quiver 선택으로 꺼내는 구성이 제한될 수 있습니다. 이 드릴다운 경로에서는 피벗 표 등으로 Quiver에서 먼저 집계한 뒤 결과 열을 Vega에 전달합니다.

Vega-Lite 자체의 집계 필드 선택은 정의된 뷰 범위 등 별도 제약을 가지므로, 일반 라이브러리에서 가능한 설정과 Quiver의 선택 출력 연결을 구분합니다.

Invalid data selection

명세가 처리되어도 선택 때 Invalid data selection이 발생하면 다음을 확인합니다.

• 선택 매개변수마다 encodings가 비어 있지 않아야 합니다.
• Interval의 encodings에는 color나 shape 같은 비축 채널을 넣지 않습니다. 필요한 축 채널만 남깁니다.

외부 Vega 편집기로 명세를 검토할 때는 데이터 보안 주의를 따릅니다.