튜토리얼: 맞춤형 차트 사용하기

W&B UI에서 맞춤형 차트 기능을 사용하는 튜토리얼

맞춤형 차트를 사용하면 패널에 로드되는 데이터와 이를 시각화하는 방식을 모두 제어할 수 있습니다. 이 튜토리얼에서는 데이터 로깅, 쿼리 구축, 차트의 Vega 사양 사용자 지정, 그리고 결과를 저장해 재사용하는 방법을 안내합니다. 기본 차트 유형을 넘어 특정 데이터에 맞게 시각화를 조정하려는 사용자에게 적합합니다.

이 튜토리얼을 마치면 프로젝트에서 작동하는 맞춤형 차트를 만들 수 있으며, 이를 프리셋으로 저장할 수 있습니다. 또한 자신의 데이터에 맞게 응용할 수 있는 합성 히스토그램도 추가로 얻게 됩니다.

​

W&B에 데이터 로깅하기

맞춤형 차트에서 무엇이든 시각화하려면 먼저 run에 표시할 데이터를 로깅해야 합니다. 하이퍼파라미터처럼 트레이닝 시작 시점에 설정하는 단일 값에는 wandb.Run.config를 사용하세요. 시간에 따라 여러 데이터 포인트를 기록할 때는 wandb.Run.log()를 사용하고, 맞춤형 2D 배열은 wandb.Table()로 로깅하세요. 로깅된 키별 데이터 포인트는 최대 10,000개까지를 권장합니다.

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"])}
  )

데이터 테이블을 기록해 볼 수 있는 빠른 예시 노트북을 사용해 보세요. 다음 step에서는 맞춤형 차트를 설정합니다. 결과 차트가 어떻게 보이는지는 라이브 리포트에서 확인하세요.

데이터를 로깅했으면 이제 이를 맞춤형 차트 패널로 가져올 준비가 되었습니다.

​

쿼리 만들기

쿼리는 맞춤형 차트에서 어떤 로깅된 데이터를 불러올지 지정합니다. 시각화할 데이터를 로깅한 후 프로젝트 페이지로 이동해 새 패널을 추가하려면 + 버튼을 클릭한 다음 Custom Chart를 선택하세요. 맞춤형 차트 데모 워크스페이스에서 함께 따라 할 수 있습니다.

​

쿼리 추가

1. summary를 클릭하고 historyTable을 선택해 run 이력에서 데이터를 가져오는 새 쿼리를 설정합니다.
2. wandb.Table()을 로깅한 키를 입력합니다. 이전 코드 스니펫에서는 custom_data_table이었고, 예시 노트북에서는 키가 pr_curve와 roc_curve입니다. summaryTable, historyTable, **tableKey**에 대한 자세한 내용은 GraphQL 쿼리 구축하기를 참조하세요.

​

Vega 필드 설정

쿼리가 준비되면 Vega 필드 드롭다운 메뉴를 사용해 로깅된 열을 chart의 시각적 인코딩에 매핑할 수 있습니다:

• x-axis: runSets_historyTable_r (재현율)
• y-axis: runSets_historyTable_p (정밀도)
• color: runSets_historyTable_c (클래스 레이블)

​

차트 사용자 지정하기

기본 시각화도 좋은 시작점이지만, Vega 스펙을 편집해 차트 유형을 바꾸고 제목을 추가하며 모양을 더 세밀하게 다듬을 수 있습니다. 산점도에서 선형 플롯으로 전환하려면 Edit를 클릭해 이 기본 제공 차트의 Vega 스펙을 변경하세요. 맞춤형 차트 데모 워크스페이스에서 함께 따라 해보세요.

시각화를 사용자 지정하도록 Vega 스펙을 업데이트하세요:

• 플롯, 범례, x축, y축에 제목을 추가합니다(각 필드의 “title” 설정).
• “mark” 값을 “point”에서 “line”으로 변경합니다.
• 사용하지 않는 “size” 필드를 제거합니다.

프리셋을 저장하면 프로젝트의 다른 Panel에서도 동일한 차트 설정을 재사용할 수 있습니다. 이 프로젝트의 다른 곳에서 사용할 수 있는 프리셋으로 저장하려면 페이지 상단의 Save as를 클릭하세요. 다음은 ROC 곡선과 함께 표시된 결과입니다.

​

보너스: 합성 히스토그램

이 섹션에서는 Vega 스펙 편집에 익숙해진 후 무엇이 가능한지 보여주기 위해, 동일한 뷰에 두 분포를 겹쳐 표시하는 더 고급 맞춤형 차트인 합성 히스토그램을 구축하는 방법을 설명합니다.

히스토그램은 수치 분포를 시각화해 더 큰 데이터셋을 이해하는 데 도움을 줍니다. 합성 히스토그램은 동일한 bin에 여러 분포를 함께 표시하므로, 서로 다른 모델 간 또는 하나의 모델 내 서로 다른 클래스 간에 두 개 이상의 메트릭을 비교할 수 있습니다. 예를 들어 주행 장면에서 객체를 감지하는 시맨틱 세그멘테이션 모델에서는 정확도와 Intersection over Union(IoU) 최적화의 효과를 비교할 수 있습니다. 또는 서로 다른 모델이 자동차(데이터에서 크고 흔한 영역)와 교통 표지판(훨씬 작고 덜 흔한 영역)을 얼마나 잘 감지하는지 확인하고 싶을 수도 있습니다. demo Colab에서는 생물 10개 클래스 중 2개 클래스의 신뢰도 점수를 비교할 수 있습니다.

나만의 맞춤형 합성 히스토그램 패널을 만들려면 다음 단계를 따르세요.

1. 워크스페이스 또는 report에서 새 맞춤형 차트 패널을 만드세요(Custom Chart 시각화 추가). 오른쪽 상단의 Edit를 클릭한 다음, 기본 제공 패널 유형 중 하나를 시작점으로 사용해 Vega 스펙을 수정하세요.
2. 해당 기본 제공 Vega 스펙을 Vega용 합성 히스토그램 starter code로 바꾸세요. 이 Vega 스펙에서 기본 제목, 축 제목, 입력 도메인, 기타 세부 사항을 Vega syntax 사용하여 직접 수정할 수 있습니다. 예를 들어 색상을 바꾸거나 세 번째 히스토그램을 추가할 수 있습니다.
3. 오른쪽 패널의 쿼리를 수정해 wandb logs에서 올바른 데이터를 로드하세요. summaryTable 필드를 추가하고 해당 tableKey를 class_scores로 설정하여 run에 로깅된 wandb.Table을 가져오세요. 이렇게 하면 드롭다운 메뉴를 통해 class_scores로 로깅된 wandb.Table의 열을 사용해 두 히스토그램 bin 세트(red_bins 및 blue_bins)를 채울 수 있습니다. 예를 들어 red bins에는 animal 클래스의 prediction scores를, blue bins에는 plant를 선택할 수 있습니다.
4. 미리보기 렌더링에 표시되는 플롯이 원하는 결과와 일치할 때까지 Vega 스펙과 쿼리를 계속 수정할 수 있습니다. 완료되면 상단의 Save as를 클릭하고 맞춤형 플롯의 이름을 지정해 재사용할 수 있도록 하세요. 그런 다음 Apply from panel library를 클릭해 플롯 생성을 마무리하세요.

다음은 간단한 실험의 예시 결과입니다. 예시 1,000개만으로 한 에포크 동안 트레이닝하면, 대부분의 이미지가 식물이 아니라는 점에는 확신하지만 어떤 이미지가 동물일 수 있는지에 대해서는 불확실한 모델이 생성됩니다.