Vega와 Vega-Lite 시각화

Quiver의 Vega plot은 JSON 명세로 사용자 정의 차트를 구성합니다. 데이터 로딩과 변환, 스케일, 지도 투영, 축, 범례와 사각형 및 선 같은 그래픽 요소를 직접 정할 수 있습니다.

Vega-Lite는 Vega 위의 상위 수준 문법으로 일반적인 차트를 더 짧게 표현합니다. 처음에는 Vega-Lite를 사용하고 필요한 표현을 지원하지 않을 때 Vega를 검토하는 것이 권장됩니다. 기본 문법과 예제는 Vega 및 Vega-Lite에서 제공합니다.

카드 생성과 템플릿

원하는 입력 카드의 다음 작업 메뉴에서 Visualize > Vega plot을 선택합니다.

편집기에서 Vega 또는 Vega-Lite를 선택합니다. Choose a template에는 버블, 상자, 선버스트 등 일반적인 시각화 템플릿이 있습니다.

템플릿을 고른 뒤 각 매개변수를 입력 transform table의 열에 매핑합니다.

Apply를 선택하면 템플릿으로 명세를 생성합니다. 비워 둔 필드는 매개변수 이름을 기본값으로 사용합니다. 템플릿을 적용하면 편집기에 있던 기존 값을 덮어씁니다.

입력과 카드 문맥

Vega plot은 표준 Quiver 카드로 제공되며 transform table 안의 변환은 아닙니다. 카드의 입출력 유형은 Transform table이고, 선택한 데이터를 표로 출력하는 구성은 선택과 드릴다운을 따릅니다.

Quiver 입력을 명세에 연결

데이터 영역에는 표나 배열의 전역 ID를, 필드 이름에는 $A.column_name 형태의 열 참조를 사용할 수 있습니다. 열 참조는 표시 이름 자체가 아닌 해당 열의 ID 문자열로 해석됩니다.

다음은 Quiver 편집기에 입력하는 Vega-Lite 예제입니다. $A는 숫자형 x와 y 열을 가진 실제 transform table, $C는 숫자 지표 카드라고 가정합니다. 실제 분석의 카드 ID와 열 선택에 맞춰 연결합니다.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"values": $A},
  "layer": [
    {
      "mark": "point",
      "encoding": {
        "x": {"field": $A.x, "type": "quantitative"},
        "y": {"field": $A.y, "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "rule", "color": "red"},
      "encoding": {"y": {"datum": $C}}
    }
  ]
}

인용하지 않은 $A, $A.x, $A.y와 $C는 Quiver가 해석하는 참조 표현식입니다. 일반 JSON 도구나 외부 Vega 편집기에서는 해석 전의 이 문서를 그대로 사용할 수 없습니다.

해석된 명세 예

표의 x와 y가 내부 열 ID인 col_x와 col_y로 해석되고 지표가 6이라고 가정한 가상 데이터 명세는 다음과 같습니다. values는 행 객체들의 배열이며, encoding의 field는 해당 행 키를 가리키는 문자열입니다.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"col_x": 10, "col_y": 5},
      {"col_x": 13, "col_y": 6},
      {"col_x": 16, "col_y": 8}
    ]
  },
  "layer": [
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "col_x", "type": "quantitative"},
        "y": {"field": "col_y", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "rule", "color": "red"},
      "encoding": {"y": {"datum": 6}}
    }
  ]
}

편집기의 Preview로 참조가 해석된 Vega 명세를 볼 수 있습니다. 참조 입력의 모든 데이터 점을 포함하므로 큰 데이터에서는 표시가 느릴 수 있습니다.

앱에 삽입할 때의 표시

Quiver 대시보드로 Workshop에 삽입할 때 다음 설정을 사용합니다.

AIP Configure

Vega plot 카드 오른쪽 위의 AIP Configure를 선택하고 원하는 변경을 설명합니다. Configure로 제안을 생성한 뒤 검토하고 Apply로 적용합니다. 다른 제안이 필요하면 요청을 바꾸고 Reconfigure를 선택합니다.

예제는 caffeine과 pH의 산점도에 X=13, Y=6의 빨간선을 그리도록 요청합니다.

기존 차트에 이어서 두 선이 만든 네 사분면을 서로 다른 색으로 표시하도록 요청할 수 있습니다.

AIP Generate의 다단계 분석

상단 AIP Generate로 만든 분석 그래프에도 Vega plot이 포함될 수 있습니다. 기본 Quiver 차트 대신 Vega를 원하면 “caffeine과 pH의 산점도를 Vega plot으로 만들어 주세요”처럼 카드 종류를 명시합니다.

기존 카드의 설정 변경은 AIP Configure 경로를 사용합니다. 두 경로의 제공 여부는 플랫폼 인스턴스에 따라 달라질 수 있습니다.

규모와 외부 편집기

Quiver의 Vega plot에는 50,000개 객체 제한이 있습니다. 더 큰 입력은 객체 집합 차트나 dataset 차트처럼 이 Vega 제한을 받지 않는 경로를 검토하고 해당 경로의 집계 및 서비스 한도를 확인합니다.

Vega 편집기와 공식 문법 자료는 명세를 이해하는 데 유용합니다. 해석된 명세에는 원래 데이터가 포함되므로 민감한 데이터나 내부 객체 정보를 외부 편집기에 붙여 넣지 않습니다.