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

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

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

맞춤형 차트를 사용하면 패널에 로드할 데이터와 그 데이터를 시각화하는 방식을 모두 직접 제어할 수 있습니다. 이 튜토리얼에서는 데이터를 로깅하고, 쿼리를 구축하고, 차트의 Vega 사양을 맞춤 설정한 뒤, 결과를 저장해 재사용하는 과정을 단계별로 안내합니다. 기본 차트 유형만으로는 부족하여 특정 데이터에 맞는 시각화를 만들고 싶은 사용자를 위한 튜토리얼입니다.

이 튜토리얼을 마치면 프로젝트에 프리셋으로 저장할 수 있는 맞춤형 차트가 완성되며, 보너스로 자신의 데이터에 맞게 응용할 수 있는 합성 히스토그램도 얻을 수 있습니다.

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

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

```python theme={"system"}
with wandb.init() as run: 

  # 맞춤형 데이터 table 로깅하기
  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). 데이터 table을 로깅하고, 다음 단계에서 맞춤형 차트를 설정합니다. 결과 차트가 어떻게 표시되는지 [라이브 보고서](https://forge.coreweave.com/wandb/demo-team/custom-charts/reports/Custom-Charts--VmlldzoyMTk5MDc)에서 확인하세요.

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

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

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/create_a_query.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=7de15b04e03f6d5241668813c8acf0eb" alt="비어 있는 맞춤형 차트" width="2204" height="968" data-path="products/wandb/_media/create_a_query.png" />
</Frame>

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

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/products/wandb/app/features/custom-charts#build-the-graphql-query)을 참조하세요.

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

쿼리가 준비되면 Vega 필드 드롭다운 메뉴를 사용하여 로깅한 열을 차트의 시각적 인코딩에 매핑할 수 있습니다.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/set_vega_fields.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=f13d8ae9a1b7f355fd4406f73225e5d7" alt="쿼리 결과에서 열을 가져와 Vega 필드를 설정" width="2572" height="950" data-path="products/wandb/_media/set_vega_fields.png" />
</Frame>

* **x-axis:** runSets\_historyTable\_r (recall)
* **y-axis:** runSets\_historyTable\_p (precision)
* **color:** runSets\_historyTable\_c (클래스 레이블)

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

기본 시각화로 시작해도 좋지만, Vega 사양을 편집하면 차트 유형을 변경하고, 제목을 추가하고, 모양을 세밀하게 조정할 수 있습니다. 산점도를 선형 플롯으로 전환하려면 **Edit**를 클릭하여 이 내장 차트의 Vega 사양을 변경하세요. [custom charts demo workspace](https://app.wandb.ai/demo-team/custom-charts)에서 직접 따라 해 보세요.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-1.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=cb1a024420ba0891235b50ee8808c8ba" alt="맞춤형 차트 선택" width="416" height="67" data-path="products/wandb/_media/custom-charts-1.png" />
</Frame>

Vega 사양을 업데이트하여 시각화를 사용자 지정하세요.

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/customize_vega_spec_for_pr_curve.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=d6e3c64534a743b9bfcfcdfc156c8968" alt="PR 곡선 Vega 사양" width="2070" height="1244" data-path="products/wandb/_media/customize_vega_spec_for_pr_curve.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-2.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=cdb78d5bc6622f0ef0d4e6625cb1b5e7" alt="PR 곡선 차트" width="1114" height="422" data-path="products/wandb/_media/custom-charts-2.png" />
</Frame>

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

이 섹션에서는 Vega 사양 편집에 익숙해진 후 어떤 작업을 할 수 있는지 보여주기 위해, 같은 뷰에 두 분포를 겹쳐 표시하는 합성 히스토그램이라는 고급 맞춤형 차트를 만드는 방법을 설명합니다.

히스토그램은 수치 분포를 시각화하여 대규모 데이터셋을 이해하는 데 도움이 됩니다. 합성 히스토그램은 동일한 구간에 여러 분포를 표시하므로, 서로 다른 모델이나 모델 내 서로 다른 클래스에 걸쳐 두 개 이상의 메트릭을 비교할 수 있습니다. 주행 장면에서 객체를 감지하는 시맨틱 분할 모델의 경우, 정확도 최적화와 IoU(Intersection over Union) 최적화의 효과를 비교하거나, 서로 다른 모델이 자동차(데이터에서 크고 흔한 영역)와 교통 표지판(훨씬 작고 드문 영역)을 얼마나 잘 감지하는지 알아볼 수 있습니다. [데모 Colab](https://bit.ly/custom-charts-colab)에서는 생물의 10개 클래스 중 두 클래스의 신뢰도 점수를 비교할 수 있습니다.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/composite_histograms.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=6c61e0079eac029ac7e8dfcfeb9b1838" alt="합성 히스토그램" width="1518" height="608" data-path="products/wandb/_media/composite_histograms.png" />
</Frame>

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

1. 워크스페이스나 보고서에 새 맞춤형 차트 패널을 만드세요(**Custom Chart** 시각화를 추가하세요). 오른쪽 위의 **Edit**을 클릭하여 기본 제공 패널 유형의 Vega 사양을 수정하세요.
2. 기본 제공 Vega 사양을 [Vega 합성 히스토그램 시작 코드](https://gist.github.com/staceysv/9bed36a2c0c2a427365991403611ce21)로 바꾸세요. [Vega 구문](https://vega.github.io/)을 사용하여 이 Vega 사양에서 기본 제목, 축 제목, 입력 도메인 및 기타 세부 사항을 직접 수정할 수 있습니다. 예를 들어 색상을 변경하거나 세 번째 히스토그램을 추가할 수 있습니다.
3. 오른쪽 패널의 쿼리를 수정하여 wandb 로그에서 올바른 데이터를 불러오세요. `summaryTable` 필드를 추가하고 해당 `tableKey`를 `class_scores`로 설정하여 run이 로깅한 `wandb.Table`을 가져오세요. 이렇게 하면 드롭다운 메뉴에서 `class_scores`로 로깅한 `wandb.Table`의 열을 선택하여 두 히스토그램 구간 집합(`red_bins` 및 `blue_bins`)을 채울 수 있습니다. 예를 들어 빨간색 구간에는 `animal` 클래스 예측 점수를, 파란색 구간에는 `plant` 클래스 예측 점수를 선택할 수 있습니다.
4. 미리보기에 렌더링된 플롯이 원하는 모습이 될 때까지 Vega 사양과 쿼리를 계속 수정할 수 있습니다. 완료되면 상단의 **Save as**를 클릭하고 맞춤형 플롯에 이름을 지정하여 재사용할 수 있도록 하세요. 그런 다음 **Apply from panel library**를 클릭하여 플롯을 완성하세요.

다음은 간단한 실험의 결과 예시입니다. 단 1,000개의 예시로 한 에포크 동안 트레이닝한 모델은 대부분의 이미지가 식물이 아니라고 확신하지만, 어떤 이미지가 동물인지에 대해서는 확신하지 못합니다.

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-3.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=53c6d303b12aba54a06ed4155b8f0ec1" alt="차트 설정" width="1646" height="600" data-path="products/wandb/_media/custom-charts-3.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-4.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=b4e672c01040da9d6ef1712713ca12c7" alt="차트 결과" width="1358" height="1274" data-path="products/wandb/_media/custom-charts-4.png" />
</Frame>


## Related topics

- [맞춤형 차트 개요](/ko/products/wandb/app/features/custom-charts.md)