> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wandb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

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

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

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

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

<div id="log-data-to-wb">
  ## W\&B에 데이터 로깅하기
</div>

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

```python theme={null}
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"])}
  )
```

[데이터 테이블을 기록해 볼 수 있는 빠른 예시 노트북을 사용해 보세요](https://bit.ly/custom-charts-colab). 다음 step에서는 맞춤형 차트를 설정합니다. 결과 차트가 어떻게 보이는지는 [라이브 리포트](https://app.wandb.ai/demo-team/custom-charts/reports/Custom-Charts--VmlldzoyMTk5MDc)에서 확인하세요.

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

<div id="create-a-query">
  ## 쿼리 만들기
</div>

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/ZDqxXQYvQVF43fU1/images/app_ui/create_a_query.png?fit=max&auto=format&n=ZDqxXQYvQVF43fU1&q=85&s=12a5238b280f7267a132aa9c28f03c9d" alt="빈 맞춤형 차트" width="2204" height="968" data-path="images/app_ui/create_a_query.png" />
</Frame>

<div id="add-a-query">
  ### 쿼리 추가
</div>

1. `summary`를 클릭하고 `historyTable`을 선택해 run 이력에서 데이터를 가져오는 새 쿼리를 설정합니다.
2. `wandb.Table()`을 로깅한 키를 입력합니다. 이전 코드 스니펫에서는 `custom_data_table`이었고, [예시 노트북](https://bit.ly/custom-charts-colab)에서는 키가 `pr_curve`와 `roc_curve`입니다. **`summaryTable`**, **`historyTable`**, \*\*`tableKey`\*\*에 대한 자세한 내용은 [GraphQL 쿼리 구축하기](/ko/models/app/features/custom-charts#build-the-graphql-query)를 참조하세요.

<div id="set-vega-fields">
  ### Vega 필드 설정
</div>

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/UhAQoGpm-LvpH3-8/images/app_ui/set_vega_fields.png?fit=max&auto=format&n=UhAQoGpm-LvpH3-8&q=85&s=7361682df6416c191f77ac5288139963" alt="Vega 필드를 설정하기 위해 쿼리 결과에서 열을 가져오는 모습" width="2572" height="950" data-path="images/app_ui/set_vega_fields.png" />
</Frame>

* **x-axis:** runSets\_historyTable\_r (재현율)
* **y-axis:** runSets\_historyTable\_p (정밀도)
* **color:** runSets\_historyTable\_c (클래스 레이블)

<div id="customize-the-chart">
  ## 차트 사용자 지정하기
</div>

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-1.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=697c5ba95464271ebf0fe599e71712c4" alt="맞춤형 차트 선택" width="416" height="67" data-path="images/general/custom-charts-1.png" />
</Frame>

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

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/ZDqxXQYvQVF43fU1/images/app_ui/customize_vega_spec_for_pr_curve.png?fit=max&auto=format&n=ZDqxXQYvQVF43fU1&q=85&s=3667d49e8bff3ae6b2bfbf45d2d68d4a" alt="PR 곡선 Vega 스펙" width="2070" height="1244" data-path="images/app_ui/customize_vega_spec_for_pr_curve.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-2.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=be4c61d484b9fa0bb61611ca5bfb97a3" alt="PR 곡선 차트" width="1114" height="422" data-path="images/general/custom-charts-2.png" />
</Frame>

<div id="bonus-composite-histograms">
  ## 보너스: 합성 히스토그램
</div>

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

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

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/ZDqxXQYvQVF43fU1/images/app_ui/composite_histograms.png?fit=max&auto=format&n=ZDqxXQYvQVF43fU1&q=85&s=9f41a947f36a94db4d75aacc9cf4bdfd" alt="합성 히스토그램" width="1518" height="608" data-path="images/app_ui/composite_histograms.png" />
</Frame>

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

1. 워크스페이스 또는 report에서 새 맞춤형 차트 패널을 만드세요(**Custom Chart** 시각화 추가). 오른쪽 상단의 **Edit**를 클릭한 다음, 기본 제공 패널 유형 중 하나를 시작점으로 사용해 Vega 스펙을 수정하세요.
2. 해당 기본 제공 Vega 스펙을 [Vega용 합성 히스토그램 starter code](https://gist.github.com/staceysv/9bed36a2c0c2a427365991403611ce21)로 바꾸세요. 이 Vega 스펙에서 기본 제목, 축 제목, 입력 도메인, 기타 세부 사항을 [Vega syntax 사용](https://vega.github.io/)하여 직접 수정할 수 있습니다. 예를 들어 색상을 바꾸거나 세 번째 히스토그램을 추가할 수 있습니다.
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개만으로 한 에포크 동안 트레이닝하면, 대부분의 이미지가 식물이 아니라는 점에는 확신하지만 어떤 이미지가 동물일 수 있는지에 대해서는 불확실한 모델이 생성됩니다.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-3.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=d702517b0ff53a3579dcc131aeed3794" alt="차트 설정" width="1646" height="600" data-path="images/general/custom-charts-3.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-4.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=986352cb4140f0fd344332901449aa5f" alt="차트 결과" width="1358" height="1274" data-path="images/general/custom-charts-4.png" />
</Frame>