이 섹션의 다중 페이지 출력 화면임. 여기를 클릭하여 프린트.

이 페이지의 일반 화면으로 돌아가기.

Custom charts

W&B 프로젝트에서 커스텀 차트를 만드세요. 임의의 데이터 테이블을 기록하고 원하는 방식으로 시각화하세요. Vega의 강력한 기능을 사용하여 글꼴, 색상 및 툴팁의 세부 사항을 제어하세요.

vega.github.io/vega에서 지원하는 차트

작동 방식

  1. 데이터 기록: 스크립트에서 config 및 요약 데이터를 기록합니다.
  2. 차트 사용자 정의: GraphQL 쿼리로 기록된 데이터를 가져옵니다. 강력한 시각화 문법인 Vega로 쿼리 결과를 시각화합니다.
  3. 차트 기록: wandb.plot_table()로 스크립트에서 자체 프리셋을 호출합니다.

예상되는 데이터가 보이지 않으면 찾고 있는 열이 선택된 runs에 기록되지 않았을 수 있습니다. 차트를 저장하고 runs 테이블로 돌아가서 아이콘을 사용하여 선택한 runs를 확인합니다.

스크립트에서 차트 기록

내장 프리셋

W&B에는 스크립트에서 직접 기록할 수 있는 여러 내장 차트 프리셋이 있습니다. 여기에는 선 플롯, 산점도, 막대 차트, 히스토그램, PR 곡선 및 ROC 곡선이 포함됩니다.

wandb.plot.line()

임의의 축 x와 y에서 연결되고 정렬된 점 목록(x,y)인 사용자 지정 선 플롯을 기록합니다.

data = [[x, y] for (x, y) in zip(x_values, y_values)]
table = wandb.Table(data=data, columns=["x", "y"])
wandb.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)인 사용자 지정 산점도를 기록합니다.

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"])
wandb.log({"my_custom_id": wandb.plot.scatter(table, "class_x", "class_y")})

이를 사용하여 두 차원에 대한 산점도를 기록할 수 있습니다. 두 값 목록을 서로 플롯하는 경우 목록의 값 수는 정확히 일치해야 합니다(예: 각 점에 x와 y가 있어야 함).

예제 리포트를 보거나 예제 Google Colab 노트북을 사용해 보세요.

wandb.plot.bar()

몇 줄 안에 레이블이 지정된 값 목록을 막대로 사용자 지정 막대 차트로 기본적으로 기록합니다.

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

이를 사용하여 임의의 막대 차트를 기록할 수 있습니다. 목록의 레이블 및 값 수는 정확히 일치해야 합니다(예: 각 데이터 점에 둘 다 있어야 함).

예제 리포트를 보거나 예제 Google Colab 노트북을 사용해 보세요.

wandb.plot.histogram()

값 목록을 발생 횟수/빈도별로 구간으로 정렬하여 사용자 지정 히스토그램으로 기본적으로 몇 줄 안에 기록합니다. 예측 신뢰도 점수 목록(scores)이 있고 해당 분포를 시각화하려는 경우를 예로 들어 보겠습니다.

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

이를 사용하여 임의의 히스토그램을 기록할 수 있습니다. data는 행과 열의 2D 배열을 지원하기 위한 목록의 목록입니다.

예제 리포트를 보거나 예제 Google Colab 노트북을 사용해 보세요.

wandb.plot.pr_curve()

한 줄로 Precision-Recall 곡선을 만듭니다.

plot = wandb.plot.pr_curve(ground_truth, predictions, labels=None, classes_to_plot=None)

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

코드가 다음에 엑세스할 수 있을 때마다 이를 기록할 수 있습니다.

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

예제 리포트를 보거나 예제 Google Colab 노트북을 사용해 보세요.

wandb.plot.roc_curve()

한 줄로 ROC 곡선을 만듭니다.

plot = wandb.plot.roc_curve(
    ground_truth, predictions, labels=None, classes_to_plot=None
)

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

코드가 다음에 엑세스할 수 있을 때마다 이를 기록할 수 있습니다.

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

예제 리포트를 보거나 예제 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.config에 대한 키로 기록한 명명된 필드가 포함됩니다. 예: wandb.config.learning_rate = 0.0001
  • 요약: 트레이닝 중에 기록된 단일 값(결과 또는 종속 변수). 예: wandb.log({"val_acc" : 0.8}). wandb.log()를 통해 트레이닝 중에 이 키에 여러 번 쓰면 요약이 해당 키의 최종 값으로 설정됩니다.
  • History: 기록된 스칼라의 전체 시계열은 history 필드를 통해 쿼리에 사용할 수 있습니다.
  • summaryTable: 여러 값 목록을 기록해야 하는 경우 wandb.Table()을 사용하여 해당 데이터를 저장한 다음 커스텀 패널에서 쿼리합니다.
  • historyTable: history 데이터를 봐야 하는 경우 커스텀 차트 패널에서 historyTable을 쿼리합니다. wandb.Table()을 호출하거나 커스텀 차트를 기록할 때마다 해당 단계의 history에 새 테이블을 만들고 있습니다.

커스텀 테이블을 기록하는 방법

wandb.Table()을 사용하여 데이터를 2D 배열로 기록합니다. 일반적으로 이 테이블의 각 행은 하나의 데이터 점을 나타내고 각 열은 플롯하려는 각 데이터 점에 대한 관련 필드/차원을 나타냅니다. 커스텀 패널을 구성할 때 전체 테이블은 wandb.log()(custom_data_table 아래)에 전달된 명명된 키를 통해 액세스할 수 있으며 개별 필드는 열 이름(x, yz)을 통해 액세스할 수 있습니다. 실험 전반에 걸쳐 여러 시간 단계에서 테이블을 기록할 수 있습니다. 각 테이블의 최대 크기는 10,000행입니다. 예제 Google Colab을 사용해 보세요.

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

차트 사용자 정의

새 커스텀 차트를 추가하여 시작한 다음 쿼리를 편집하여 표시되는 runs에서 데이터를 선택합니다. 쿼리는 GraphQL을 사용하여 runs의 config, 요약 및 history 필드에서 데이터를 가져옵니다.

새 커스텀 차트를 추가한 다음 쿼리를 편집합니다.

커스텀 시각화

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

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

프로젝트에서 runs 간의 정확도를 보여주는 커스텀 막대 차트 만들기

Vega를 편집하는 방법

패널 상단의 편집을 클릭하여 Vega 편집 모드로 들어갑니다. 여기에서 UI에서 대화형 차트를 만드는 Vega 사양을 정의할 수 있습니다. 차트의 모든 측면을 변경할 수 있습니다. 예를 들어 제목을 변경하고, 다른 색 구성표를 선택하고, 곡선을 연결된 선 대신 일련의 점으로 표시할 수 있습니다. 또한 Vega 변환을 사용하여 값 배열을 히스토그램으로 비닝하는 등 데이터 자체를 변경할 수도 있습니다. 패널 미리 보기가 대화형으로 업데이트되므로 Vega 사양 또는 쿼리를 편집할 때 변경 사항의 효과를 볼 수 있습니다. Vega 문서 및 튜토리얼을 참조하세요.

필드 참조

W&B에서 차트로 데이터를 가져오려면 Vega 사양의 아무 곳에나 "${field:<field-name>}" 형식의 템플릿 문자열을 추가합니다. 그러면 오른쪽의 차트 필드 영역에 드롭다운이 생성되어 사용자가 쿼리 결과 열을 선택하여 Vega에 매핑할 수 있습니다.

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

차트 프리셋 저장

모달 하단의 버튼을 사용하여 특정 시각화 패널에 대한 변경 사항을 적용합니다. 또는 Vega 사양을 저장하여 프로젝트의 다른 곳에서 사용할 수 있습니다. 재사용 가능한 차트 정의를 저장하려면 Vega 편집기 상단의 다른 이름으로 저장을 클릭하고 프리셋에 이름을 지정합니다.

기사 및 가이드

  1. W&B 기계 학습 시각화 IDE
  2. 커스텀 차트를 사용하여 NLP 어텐션 기반 모델 시각화
  3. 커스텀 차트를 사용하여 기울기 흐름에 대한 어텐션의 효과 시각화
  4. 임의 곡선 기록

일반적인 유스 케이스

  • 오류 막대가 있는 막대 플롯 사용자 정의
  • 사용자 지정 x-y 좌표가 필요한 모델 유효성 검사 메트릭 표시(예: precision-recall 곡선)
  • 두 개의 다른 모델/Experiments의 데이터 분포를 히스토그램으로 오버레이
  • 트레이닝 중 여러 지점에서 스냅샷을 통해 메트릭의 변경 사항 표시
  • W&B에서 아직 사용할 수 없는 고유한 시각화 만들기(그리고 바라건대 전 세계와 공유)

1 - Tutorial: Use custom charts

W&B UI에서 사용자 정의 차트 기능을 사용하는 방법에 대한 튜토리얼

커스텀 차트를 사용하여 패널에 로드하는 데이터와 시각화를 제어할 수 있습니다.

1. W&B에 데이터 기록

먼저 스크립트에 데이터를 기록합니다. 트레이닝 시작 시 설정된 단일 포인트 (예: 하이퍼파라미터)에는 wandb.config를 사용합니다. 시간에 따른 여러 포인트에는 wandb.log()를 사용하고, wandb.Table()을 사용하여 커스텀 2D 배열을 기록합니다. 기록된 키당 최대 10,000개의 데이터 포인트를 기록하는 것이 좋습니다.

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

데이터 테이블을 기록하려면 간단한 예제 노트북을 사용해 보고, 다음 단계에서 커스텀 차트를 설정합니다. 라이브 리포트에서 결과 차트가 어떻게 보이는지 확인하세요.

2. 쿼리 만들기

시각화할 데이터를 기록했으면 프로젝트 페이지로 이동하여 + 버튼을 클릭하여 새 패널을 추가한 다음 Custom Chart를 선택합니다. 이 워크스페이스에서 따라 할 수 있습니다.

구성할 준비가 된 새로운 빈 커스텀 차트

쿼리 추가

  1. summary를 클릭하고 historyTable을 선택하여 run 기록에서 데이터를 가져오는 새 쿼리를 설정합니다.
  2. wandb.Table()을 기록한 키를 입력합니다. 위의 코드 조각에서는 my_custom_table입니다. 예제 노트북에서 키는 pr_curveroc_curve입니다.

Vega 필드 설정

이제 쿼리가 이러한 열을 로드하므로 Vega 필드 드롭다운 메뉴에서 선택할 수 있는 옵션으로 사용할 수 있습니다.

쿼리 결과에서 열을 가져와 Vega 필드 설정
  • x-axis: runSets_historyTable_r (recall)
  • y-axis: runSets_historyTable_p (precision)
  • color: runSets_historyTable_c (class label)

3. 차트 사용자 정의

이제 보기에 좋지만 산점도에서 선 플롯으로 전환하고 싶습니다. Edit를 클릭하여 이 내장 차트에 대한 Vega 사양을 변경합니다. 이 워크스페이스에서 따라 하세요.

시각화를 사용자 정의하기 위해 Vega 사양을 업데이트했습니다.

  • 플롯, 범례, x축 및 y축에 대한 제목 추가 (각 필드에 대해 “title” 설정)
  • “mark” 값을 “point"에서 “line"으로 변경
  • 사용되지 않는 “size” 필드 제거

이것을 이 프로젝트의 다른 곳에서 사용할 수 있는 사전 설정으로 저장하려면 페이지 상단의 Save as를 클릭합니다. 결과는 ROC 곡선과 함께 다음과 같습니다.

보너스: 합성 히스토그램

히스토그램은 숫자 분포를 시각화하여 더 큰 데이터셋을 이해하는 데 도움을 줄 수 있습니다. 합성 히스토그램은 동일한 bin에서 여러 분포를 보여주어 서로 다른 모델 간 또는 모델 내의 서로 다른 클래스 간에 두 개 이상의 메트릭을 비교할 수 있습니다. 운전 장면에서 오브젝트를 감지하는 시멘틱 세그멘테이션 모델의 경우 정확도 대 IOU (intersection over union)에 대해 최적화하는 효과를 비교하거나 서로 다른 모델이 자동차 (데이터에서 크고 일반적인 영역) 대 교통 표지판 (훨씬 작고 덜 일반적인 영역)을 얼마나 잘 감지하는지 알고 싶을 수 있습니다. 데모 Colab에서는 10가지 생물 클래스 중 2가지에 대한 신뢰도 점수를 비교할 수 있습니다.

커스텀 합성 히스토그램 패널의 자체 버전을 만들려면:

  1. 워크스페이스 또는 리포트에서 새 Custom Chart 패널을 만듭니다 (“Custom Chart” 시각화를 추가하여). 오른쪽 상단의 “Edit” 버튼을 눌러 내장 패널 유형부터 시작하여 Vega 사양을 수정합니다.
  2. 해당 내장 Vega 사양을 Vega의 합성 히스토그램에 대한 MVP 코드로 바꿉니다. Vega 구문 Vega syntax를 사용하여 이 Vega 사양에서 메인 제목, 축 제목, 입력 도메인 및 기타 세부 정보를 직접 수정할 수 있습니다 (색상을 변경하거나 세 번째 히스토그램을 추가할 수도 있습니다 :)
  3. 오른쪽 쿼리를 수정하여 wandb 로그에서 올바른 데이터를 로드합니다. 필드 summaryTable을 추가하고 해당 tableKeyclass_scores로 설정하여 run에서 기록한 wandb.Table을 가져옵니다. 이렇게 하면 드롭다운 메뉴를 통해 wandb.Tableclass_scores로 기록된 열과 함께 두 개의 히스토그램 bin 세트 (red_binsblue_bins)를 채울 수 있습니다. 내 예제에서는 빨간색 bin에 대한 animal 클래스 예측 점수와 파란색 bin에 대한 plant를 선택했습니다.
  4. 미리 보기 렌더링에서 보이는 플롯이 마음에 들 때까지 Vega 사양과 쿼리를 계속 변경할 수 있습니다. 완료되면 상단의 Save as를 클릭하고 나중에 재사용할 수 있도록 커스텀 플롯 이름을 지정합니다. 그런 다음 Apply from panel library를 클릭하여 플롯을 완료합니다.

다음은 매우 간단한 실험에서 얻은 결과입니다. 에포크에 대해 1000개의 예제만으로 트레이닝하면 대부분의 이미지가 식물이 아니고 어떤 이미지가 동물일 수 있는지 매우 불확실한 모델이 생성됩니다.