> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-docs-1917.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> W&B UI의 맞춤형 차트 기능 사용 튜토리얼
# 튜토리얼: 맞춤형 차트 사용
맞춤형 차트를 사용하면 패널에 불러오는 데이터와 시각화 방식을 제어할 수 있습니다.
## 1. W\&B에 데이터 로깅하기
먼저 스크립트에서 데이터를 로깅하세요. 하이퍼파라미터처럼 트레이닝 시작 시점에 설정하는 단일 값에는 [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)에서 확인하세요.
## 2. 쿼리 만들기
시각화할 데이터를 로깅한 후 프로젝트 페이지로 이동해 새 패널을 추가하려면 **`+`** 버튼을 클릭한 다음 **Custom Chart**를 선택하세요. [맞춤형 차트 데모 워크스페이스](https://app.wandb.ai/demo-team/custom-charts)에서 함께 따라 할 수 있습니다.
### 쿼리 추가
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)를 참조하세요.
### Vega 필드 설정
이제 쿼리가 이 열들에 로드되었으므로, Vega 필드 드롭다운 메뉴에서 선택 가능한 옵션으로 표시됩니다:
* **x-axis:** runSets\_historyTable\_r (재현율)
* **y-axis:** runSets\_historyTable\_p (정밀도)
* **color:** runSets\_historyTable\_c (클래스 레이블)
## 3. 차트 사용자 지정
이제 꽤 괜찮아 보이지만, 산점도에서 선형 플롯으로 바꾸고 싶습니다. 이 기본 제공 차트의 Vega 사양을 변경하려면 **Edit**를 클릭하세요. [custom charts demo workspace](https://app.wandb.ai/demo-team/custom-charts)에서 함께 따라 해 보세요.
시각화를 사용자 지정하기 위해 Vega 사양을 업데이트했습니다.
* 플롯, 범례, x축, y축 제목 추가(각 필드의 “title” 설정)
* “mark” 값을 “point”에서 “line”으로 변경
* 사용하지 않는 “size” 필드 제거
이 프로젝트의 다른 곳에서도 사용할 수 있는 프리셋으로 저장하려면 페이지 상단의 **다른 이름으로 저장**를 클릭하세요. ROC 곡선과 함께 표시한 결과는 다음과 같습니다.
## 보너스: 복합 히스토그램
히스토그램은 수치 분포를 시각화해 더 큰 데이터셋을 이해하는 데 도움을 줍니다. 복합 히스토그램은 동일한 bins에서 여러 분포를 보여주므로, 서로 다른 모델 간 또는 한 모델 내의 서로 다른 클래스 간에 둘 이상의 메트릭을 비교할 수 있습니다. 예를 들어 주행 장면에서 객체를 감지하는 시맨틱 세그멘테이션 모델에서는 accuracy 최적화와 intersection over union (IOU) 최적화의 효과를 비교할 수 있고, 서로 다른 모델이 자동차(데이터에서 크고 흔한 영역)와 교통 표지판(훨씬 작고 드문 영역)을 얼마나 잘 감지하는지도 살펴볼 수 있습니다. [데모 Colab](https://bit.ly/custom-charts-colab)에서는 생물 10개 클래스 중 2개 클래스의 confidence 점수를 비교할 수 있습니다.
직접 맞춤형 복합 히스토그램 패널을 만들려면 다음과 같이 하세요.
1. 워크스페이스 또는 리포트에서 새 맞춤형 차트 패널을 만듭니다(“맞춤형 차트” 시각화 추가). 오른쪽 상단의 “Edit” 버튼을 눌러, 기본 제공 패널 유형 중 하나를 시작점으로 Vega 사양을 수정합니다.
2. 해당 기본 제공 Vega 사양을 [Vega용 복합 히스토그램 MVP 코드](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`의 column을 사용해 두 히스토그램 bin 세트(`red_bins` 및 `blue_bins`)를 채울 수 있습니다. 제 예시에서는 빨간 bins에 `animal` 클래스 prediction 점수를, 파란 bins에 `plant`를 선택했습니다.
4. 미리보기 렌더링에 표시되는 plot이 만족스러울 때까지 Vega 사양과 쿼리를 계속 수정할 수 있습니다. 완료되면 상단의 **다른 이름으로 저장**을 클릭하고 맞춤형 plot 이름을 지정해 다시 사용할 수 있도록 합니다. 그런 다음 **패널 라이브러리에서 적용**을 클릭해 plot 생성을 마칩니다.
아주 짧게 진행한 실험의 결과는 다음과 같습니다. 한 에포크 동안 예제 1000개만으로 트레이닝하면, 대부분의 이미지가 식물이 아니라고는 매우 높은 확신을 보이지만 어떤 이미지가 동물일 수 있는지에 대해서는 매우 불확실한 모델이 만들어집니다.
