사용자 정의 차트 개요

Vega 시각화를 사용하여 W&B 프로젝트에서 사용자 정의 차트 만들기

W&B 프로젝트에서 사용자 정의 차트를 생성하세요. 임의의 데이터 테이블을 로깅하고 원하는 대로 시각화할 수 있습니다. Vega의 강력한 기능으로 폰트, 색상, 툴팁의 세부 설정을 제어하세요.

• 코드: 예제 Colab Colab 노트북을 실행해 보세요.
• 동영상: 워크스루 동영상을 시청하세요.
• 예제: 빠르게 살펴보는 Keras 및 Sklearn 데모 노트북

​

작동 방식

1. 데이터 로깅: 스크립트에서 config와 요약 데이터를 로깅합니다.
2. 차트 사용자 지정: GraphQL 쿼리로 로깅된 데이터를 가져옵니다. 강력한 시각화 문법인 Vega로 쿼리 결과를 시각화합니다.
3. 차트 로깅: 스크립트에서 wandb.plot_table()을 호출하여 직접 만든 프리셋을 사용합니다.

기대한 데이터가 보이지 않는 경우, 찾고 있는 열이 선택한 runs에서 로깅되지 않았을 수 있습니다. 차트를 저장한 뒤 runs 테이블로 돌아가 eye(눈) 아이콘을 사용해 선택한 runs를 확인하세요.

​

스크립트에서 차트 로그 기록하기

​

기본 제공 프리셋

W&B에는 스크립트에서 바로 로깅할 수 있는 여러 기본 제공 차트 프리셋이 있습니다. 여기에는 선형 플롯, 산점도, 막대 차트, 히스토그램, PR 곡선, ROC 곡선 등이 포함됩니다.

선 그래프

wandb.plot.line()

커스텀 선 그래프를 로깅합니다. 이 그래프는 임의의 x, y 축 위에 있는, 순서가 있는 연결된 점 (x, y)들의 목록으로 구성됩니다.

with wandb.init() as run:
  data = [[x, y] for (x, y) in zip(x_values, y_values)]
  table = wandb.Table(data=data, columns=["x", "y"])
  run.log(
      {
          "my_custom_plot_id": wandb.plot.line(
              table, "x", "y", title="Custom Y vs X Line Plot"
          )
      }
  )

선 그래프는 두 차원 상에서 곡선을 기록합니다. 두 개의 값 리스트를 서로 대응되도록 플로팅하려면, 각 리스트에 포함된 값의 개수가 정확히 같아야 합니다(예를 들어, 각 점에는 x와 y가 모두 있어야 합니다).

예시 리포트를 확인하세요 또는 예시 Google Colab 노트북을 사용해 보세요.

산점도

wandb.plot.scatter()

커스텀 산점도(두 축 x와 y 위의 점 (x, y) 목록)를 로그합니다.

with wandb.init() as run:
  data = [[x, y] for (x, y) in zip(class_x_prediction_scores, class_y_prediction_scores)]
  table = wandb.Table(data=data, columns=["class_x", "class_y"])
  run.log({"my_custom_id": wandb.plot.scatter(table, "class_x", "class_y")})

이를 사용하여 임의의 두 차원에 산점도 점을 로깅할 수 있습니다. 두 개의 값 리스트를 서로 대응되도록 플로팅하는 경우, 리스트에 들어 있는 값의 개수가 정확히 일치해야 합니다(예를 들어, 각 점에는 x와 y 값이 모두 있어야 합니다).

예시 리포트 보기 또는 예시 Google Colab 노트북 실행해 보기.

막대 차트

wandb.plot.bar()

몇 줄의 코드만으로 네이티브하게 사용자 정의 막대 차트를 기록합니다. 이 차트는 레이블이 있는 값 목록을 막대로 시각화합니다:

with wandb.init() as run:
  data = [[label, val] for (label, val) in zip(labels, values)]
  table = wandb.Table(data=data, columns=["label", "value"])
  run.log(
      {
          "my_bar_chart_id": wandb.plot.bar(
              table, "label", "value", title="Custom Bar Chart"
          )
      }
  )

이 기능을 사용해 임의의 막대 차트를 로깅할 수 있습니다. 리스트에 있는 레이블과 값의 개수는 반드시 정확히 일치해야 합니다(예를 들어, 각 데이터 포인트에는 둘 다가 있어야 합니다).

예시 리포트를 확인하거나 예시 Google Colab 노트북을 실행해 보세요.

히스토그램

wandb.plot.histogram()

몇 줄의 코드만으로 값 목록을 발생 빈도/횟수에 따라 구간(bin)으로 나눈 커스텀 히스토그램을 바로 로깅할 수 있습니다. 예를 들어 예측 신뢰도 점수(scores) 목록이 있고, 그 분포를 시각화하고 싶다고 해 보겠습니다.

with wandb.init() as run:
  data = [[s] for s in scores]
  table = wandb.Table(data=data, columns=["scores"])
  run.log({"my_histogram": wandb.plot.histogram(table, "scores", title=None)})

이를 사용해 임의의 히스토그램을 로깅할 수 있습니다. data는 리스트의 리스트로, 행과 열로 이루어진 2D 배열을 지원하기 위한 형식임에 유의하세요.

예시 리포트를 확인해 보세요 또는 예시 Google Colab 노트북을 사용해 보세요.

PR 곡선

wandb.plot.pr_curve()

한 줄의 코드로 Precision-Recall curve를 생성합니다:

with wandb.init() as run:
  plot = wandb.plot.pr_curve(ground_truth, predictions, labels=None, classes_to_plot=None)

  run.log({"pr": plot})

코드에서 다음에 접근할 수 있을 때마다 이를 로깅할 수 있습니다:

• 예제 집합에 대한 모델의 예측 점수(predictions)
• 해당 예제에 대한 정답 레이블(ground_truth)
• (선택 사항) 레이블 인덱스 0이 고양이, 1이 개, 2가 새 등을 의미하는 경우 레이블/클래스 이름 목록(labels=["cat", "dog", "bird"...])
• (선택 사항) 플롯에서 시각화할 레이블의 부분 집합(리스트 형식 유지)

예시 리포트 보기 또는 예시 Google Colab 노트북 사용해 보기.

ROC 곡선

wandb.plot.roc_curve()

한 줄 코드로 ROC curve를 생성합니다.

with wandb.init() as run:
  # ground_truth는 실제 레이블의 목록이고, predictions는 예측 점수의 목록입니다
  ground_truth = [0, 1, 0, 1, 0, 1]
  predictions = [0.1, 0.4, 0.35, 0.8, 0.7, 0.9]

  # ROC 커브 플롯을 생성합니다
  # labels는 클래스 이름의 선택적 목록이고, classes_to_plot은 시각화할 레이블의 선택적 서브셋입니다
  plot = wandb.plot.roc_curve(
      ground_truth, predictions, labels=None, classes_to_plot=None
  )

  run.log({"roc": plot})

코드에서 다음에 접근할 수 있을 때마다 이를 로그로 남길 수 있습니다:

• 예시 집합에 대한 모델의 예측 점수(predictions)
• 해당 예시들에 대한 정답 레이블(ground_truth)
• (선택 사항) 레이블 인덱스 0이 cat, 1 = dog, 2 = bird 등을 의미하는 경우의 레이블/클래스 이름 목록 (labels=["cat", "dog", "bird"...])
• (선택 사항) 플롯에서 시각화할 레이블들의 부분 집합(역시 리스트 형식)

예시 리포트 보기 또는 예시 Google Colab 노트북 열어 보기.

​

사용자 지정 프리셋

내장 프리셋을 조정하거나 새 프리셋을 만든 다음 차트를 저장하세요. 스크립트에서 해당 사용자 지정 프리셋으로 직접 데이터를 로깅하려면 차트 ID를 사용하세요. 예제 Google Colab 노트북을 실행해 보세요.

# 플롯할 열이 포함된 테이블 생성
table = wandb.Table(data=data, columns=["step", "height"])

# 테이블의 열을 차트의 필드에 매핑
fields = {"x": "step", "value": "height"}

# 테이블을 사용하여 새 커스텀 차트 프리셋 채우기
# 저장된 차트 프리셋을 사용하려면 vega_spec_name을 변경하세요
my_custom_chart = wandb.plot_table(
    vega_spec_name="carey/new_chart",
    data_table=table,
    fields=fields,
)

​

데이터 로깅

스크립트에서 다음과 같은 데이터 타입을 로깅하고, 커스텀 차트에서 사용할 수 있습니다:

• Config: 실험의 초기 설정값(독립 변수)입니다. 여기에는 트레이닝 시작 시 wandb.Run.config에 키로 기록한 모든 이름 있는 필드가 포함됩니다. 예: wandb.Run.config.learning_rate = 0.0001
• Summary: 트레이닝 중에 로깅된 단일 값(결과 또는 종속 변수)입니다. 예: wandb.Run.log({"val_acc" : 0.8}). 트레이닝 중 wandb.Run.log()를 통해 이 키에 여러 번 값을 기록하면, Summary는 해당 키의 마지막 값으로 설정됩니다.
• History: 로깅된 스칼라 값의 전체 시계열은 쿼리에서 history 필드를 통해 사용할 수 있습니다.
• summaryTable: 여러 값의 리스트를 로깅해야 하는 경우 wandb.Table()을 사용해 데이터를 저장한 다음, 커스텀 패널에서 이를 쿼리하세요.
• historyTable: 히스토리 데이터를 확인해야 하는 경우 커스텀 차트 패널에서 historyTable을 쿼리하세요. wandb.Table()을 호출하거나 커스텀 차트를 로깅할 때마다, 해당 스텝의 history에 새로운 테이블이 생성됩니다.

​

커스텀 테이블을 로깅하는 방법

wandb.Table()을 사용해서 데이터를 2차원(2D) 배열 형태로 로깅합니다. 일반적으로 이 테이블의 각 행은 하나의 데이터 포인트를 나타내고, 각 열은 시각화하려는 각 데이터 포인트의 관련 필드/차원을 나타냅니다. 커스텀 패널을 구성하면, 전체 테이블은 wandb.Run.log()에 전달한 이름이 지정된 키(아래 예시에서는 custom_data_table)를 통해 접근할 수 있으며, 개별 필드는 열 이름(x, y, z)을 통해 접근할 수 있습니다. 실험 전반에 걸쳐 여러 시점에서 테이블을 로깅할 수 있습니다. 각 테이블의 최대 크기는 10,000행입니다. Google Colab에서 예제를 실행해 보세요.

with wandb.init() as run:
  # 커스텀 데이터 테이블 로깅
  my_custom_data = [[x1, y1, z1], [x2, y2, z2]]
  run.log(
      {"custom_data_table": wandb.Table(data=my_custom_data, columns=["x", "y", "z"])}
  )

​

차트 사용자 지정

새 커스텀 차트를 추가한 다음, 현재 표시된 run에서 데이터를 선택하도록 쿼리를 수정하세요. 이 쿼리는 GraphQL을 사용해 run의 config, summary, history 필드에서 데이터를 가져옵니다.

​

사용자 정의 시각화

오른쪽 상단의 Chart를 선택해 기본 프리셋으로 시작합니다. 그런 다음 Chart fields를 선택해 쿼리에서 가져오는 데이터를 차트의 해당 필드에 매핑합니다.

다음 이미지는 메트릭을 선택한 뒤 이를 아래 막대 차트 필드에 매핑하는 방법의 예시를 보여줍니다.

​

Vega 편집 방법

패널 상단의 Edit을 클릭해 Vega 편집 모드로 들어갑니다. 여기에서 UI에 대화형 차트를 생성하는 Vega specification을 정의할 수 있습니다. 차트의 모든 요소를 변경할 수 있습니다. 예를 들어 제목을 바꾸거나, 다른 색상 스킴을 선택하거나, 곡선을 연결된 선 대신 일련의 점으로 표시하도록 바꿀 수 있습니다. 또한 Vega transform을 사용해 값 배열을 히스토그램용 구간으로 나누는(빈닝하는) 등 데이터 자체를 변경할 수도 있습니다. 패널 미리보기는 실시간으로 업데이트되므로 Vega 스펙이나 쿼리를 편집하면서 변경 사항의 효과를 바로 확인할 수 있습니다. 자세한 내용은 Vega documentation and tutorials 를 참고하세요.

필드 참조

차트에 W&B 데이터 값을 가져오려면 Vega 스펙의 아무 위치에나 "${field:<field-name>}" 형식의 템플릿 문자열을 추가하세요. 그러면 오른쪽 Chart Fields 영역에 드롭다운이 생성되어, 사용자가 Vega에 매핑할 쿼리 결과 컬럼을 선택할 수 있습니다.

필드의 기본값을 설정하려면 다음 문법을 사용하세요: "${field:<field-name>:<placeholder text>}"

​

차트 프리셋 저장하기

모달 하단의 버튼을 클릭해 특정 시각화 패널에 적용할 변경 사항을 저장할 수 있습니다. 또는 Vega 스펙을 저장해 프로젝트의 다른 위치에서 사용할 수도 있습니다. 재사용 가능한 차트 정의를 저장하려면 Vega 편집기 상단에서 Save as를 클릭하고 프리셋 이름을 입력하세요.

​

문서와 가이드

1. W&B 머신러닝 시각화 IDE
2. 어텐션 기반 NLP 모델 시각화
3. 어텐션이 그래디언트 흐름에 미치는 영향 시각화
4. 임의의 곡선 로깅

​

일반적인 활용 사례

• 오차 막대를 포함한 막대 그래프를 원하는 대로 설정하기
• 커스텀 x-y 좌표가 필요한 모델 검증 메트릭 표시하기 (예: precision-recall 곡선)
• 두 개의 다른 모델/실험에서 나온 데이터 분포를 히스토그램으로 겹쳐서 표시하기
• 트레이닝 중 여러 시점의 스냅샷으로 메트릭 변화 보여주기
• 아직 W&B에 없는 고유한 시각화를 만들고 (가능하다면 전 세계와 공유하기)