> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-docs-hivemind-launch.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> 선형 플롯에서는 스무딩을 사용해 노이즈가 많은 데이터의 추세를 확인할 수 있습니다.

# 선형 플롯 스무딩

스무딩은 점 간 변동을 줄여 노이즈가 많은 선형 플롯에서 추세를 파악하는 데 도움을 주며, 그 결과 기본 신호를 더 쉽게 읽을 수 있게 합니다. 이 페이지에서는 W\&B가 지원하는 스무딩 알고리즘, 각각이 가장 유용한 경우, 그리고 원본 데이터를 계속 표시할지 여부를 제어하는 방법을 설명합니다.

W\&B는 여러 유형의 스무딩을 지원합니다:

* [시간 가중 지수 이동 평균(TWEMA) 스무딩](#time-weighted-exponential-moving-average-twema-smoothing-default)
* [가우시안 스무딩](#gaussian-smoothing)
* [이동 평균](#running-average-smoothing)
* [지수 이동 평균(EMA) 스무딩](#exponential-moving-average-ema-smoothing)

이 알고리즘들이 실제 데이터에 적용된 모습을 보려면 다음 [대화형 W\&B 리포트](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc)를 확인해 보세요.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-hivemind-launch/h6XY3siumN4KsA79/images/app_ui/beamer_smoothing.gif?s=059b286a8c5f306b4237d9c96556bced" alt="노이즈가 많은 선형 플롯에 적용된 여러 스무딩 알고리즘 비교" width="1930" height="844" data-path="images/app_ui/beamer_smoothing.gif" />
</Frame>

<div id="time-weighted-exponential-moving-average-twema-smoothing-default">
  ## 시간 가중 지수 이동 평균(TWEMA) 스무딩(기본값)
</div>

시간 가중 지수 이동 평균(TWEMA) 스무딩 알고리즘은 이전 지점의 가중치를 지수적으로 감소시켜 시계열 데이터를 스무딩하는 기법입니다. 이 기법에 대한 자세한 내용은 [Exponential Smoothing](https://www.wikiwand.com/en/Exponential_smoothing)을 참조하세요. 범위는 0\~1입니다. 시계열의 초기 값이 0으로 치우치지 않도록 디바이어스 항이 추가됩니다.

TWEMA 알고리즘은 라인상의 점 밀도(x축 범위 단위당 `y` 값의 개수)를 고려합니다. 이를 통해 특성이 서로 다른 여러 라인을 동시에 표시할 때도 일관된 스무딩을 적용할 수 있습니다.

다음 샘플 코드는 이 동작이 내부적으로 어떻게 작동하는지 보여줍니다:

```javascript theme={null}
const smoothingWeight = Math.min(Math.sqrt(smoothingParam || 0), 0.999);
let lastY = yValues.length > 0 ? 0 : NaN;
let debiasWeight = 0;

return yValues.map((yPoint, index) => {
  const prevX = index > 0 ? index - 1 : 0;
  // VIEWPORT_SCALE는 결과를 차트의 x축 범위에 맞게 조정합니다
  const changeInX =
    ((xValues[index] - xValues[prevX]) / rangeOfX) * VIEWPORT_SCALE;
  const smoothingWeightAdj = Math.pow(smoothingWeight, changeInX);

  lastY = lastY * smoothingWeightAdj + yPoint;
  debiasWeight = debiasWeight * smoothingWeightAdj + 1;
  return lastY / debiasWeight;
});
```

이 알고리즘이 실시간 데이터에 적용된 모습을 보려면 [대화형 W\&B 리포트의 TWEMA 섹션](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc)을 참조하세요.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-hivemind-launch/RkwlHgADGOiVkimG/images/app_ui/weighted_exponential_moving_average.png?fit=max&auto=format&n=RkwlHgADGOiVkimG&q=85&s=2f5e779889f7f517a3c84450ebf265f0" alt="TWEMA 스무딩이 적용된 선형 플롯" width="2162" height="738" data-path="images/app_ui/weighted_exponential_moving_average.png" />
</Frame>

<div id="gaussian-smoothing">
  ## 가우시안 스무딩
</div>

가우시안 스무딩(또는 가우시안 커널 스무딩)은 점들의 가중 평균을 계산합니다. 이때 가중치는 스무딩 파라미터로 지정한 표준편차를 갖는 가우시안 분포를 따릅니다. W\&B는 각 입력 `x` 값마다 스무딩된 값을 계산하며, 해당 값의 앞뒤에 있는 점들을 모두 반영합니다.

이 알고리즘이 라이브 데이터에 적용되는 방식을 보려면 [대화형 W\&B 리포트의 가우시안 스무딩 섹션](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc#3.-gaussian-smoothing)을 참조하세요.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-hivemind-launch/RkwlHgADGOiVkimG/images/app_ui/gaussian_smoothing.png?fit=max&auto=format&n=RkwlHgADGOiVkimG&q=85&s=b5f2249e142c2614bd2771c7e08a18f5" alt="가우시안 스무딩이 적용된 선형 플롯" width="1642" height="674" data-path="images/app_ui/gaussian_smoothing.png" />
</Frame>

<div id="running-average-smoothing">
  ## 이동 평균 스무딩
</div>

이동 평균은 주어진 `x` 값 전후의 윈도우에 있는 점들의 평균으로 해당 점을 대체하는 스무딩 알고리즘입니다. ["Boxcar Filter" on Wikipedia](https://en.wikipedia.org/wiki/Moving_average)를 참조하세요. 이동 평균에 대해 선택한 파라미터는 이동 평균에 포함할 점의 개수를 지정합니다.

점들이 x축에 고르지 않게 분포되어 있다면 대신 가우시안 스무딩을 사용하세요. 점 밀도가 달라질 때는 고정 폭 윈도우가 오해의 소지가 있는 평균을 만들 수 있기 때문입니다.

이 알고리즘이 라이브 데이터에 적용된 모습을 보려면 [대화형 W\&B 리포트의 이동 평균 section](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc#4.-running-average)을 참조하세요.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-hivemind-launch/RkwlHgADGOiVkimG/images/app_ui/running_average.png?fit=max&auto=format&n=RkwlHgADGOiVkimG&q=85&s=27adbc8d1dff123cdef464640cf79267" alt="이동 평균 스무딩이 적용된 선형 플롯" width="1630" height="666" data-path="images/app_ui/running_average.png" />
</Frame>

<div id="exponential-moving-average-ema-smoothing">
  ## 지수 이동 평균(EMA) 스무딩
</div>

지수 이동 평균(EMA) 스무딩 알고리즘은 지수 윈도 함수로 시계열 데이터를 스무딩하는 데 사용하는 휴리스틱 기법입니다. 이 기법에 대한 자세한 내용은 [Exponential Smoothing](https://www.wikiwand.com/en/Exponential_smoothing)을 참조하세요. 범위는 0\~1입니다. 시계열의 초기 값이 0으로 편향되지 않도록 디바이어스 항이 추가됩니다.

대부분의 경우 EMA 스무딩는 먼저 버킷팅한 다음 스무딩하는 대신, 이력 전체를 스캔한 뒤 적용됩니다. 이렇게 하면 더 정확하게 스무딩되는 경우가 많습니다.

다음과 같은 경우에는 대신 EMA 스무딩가 버킷팅 후에 적용됩니다:

* 샘플링
* 그룹화
* 표현식
* 비단조 x축
* 시간 기반 x축

다음은 이 동작이 내부적으로 어떻게 구현되는지 보여주는 예제 코드입니다:

```javascript theme={null}
  data.forEach(d => {
    const nextVal = d;
    last = last * smoothingWeight + (1 - smoothingWeight) * nextVal;
    numAccum++;
    debiasWeight = 1.0 - Math.pow(smoothingWeight, numAccum);
    smoothedData.push(last / debiasWeight);
```

실시간 데이터에 이 알고리즘이 적용된 모습을 보려면 [대화형 W\&B 리포트의 EMA 섹션](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc)을 참조하세요.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-hivemind-launch/h6XY3siumN4KsA79/images/app_ui/exponential_moving_average.png?fit=max&auto=format&n=h6XY3siumN4KsA79&q=85&s=19b6814d9fcdadd61e85b12bd0a91456" alt="EMA 스무딩이 적용된 선형 플롯" width="1724" height="722" data-path="images/app_ui/exponential_moving_average.png" />
</Frame>

<div id="hide-original-data">
  ## 원본 데이터 숨기기
</div>

스무딩된 선과 원시 데이터를 비교하여 스무딩이 신호를 얼마나 크게 변경하는지 판단하세요. 기본적으로 스무딩되지 않은 원본 데이터는 차트 배경에 희미한 선으로 표시됩니다. 이 표시를 끄려면 **Show Original**을 클릭합니다.

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-hivemind-launch/h6XY3siumN4KsA79/images/app_ui/demo_wandb_smoothing_turn_on_and_off_original_data.gif?s=077f45166c02fe799635a58170d4b590" alt="선형 플롯에서 스무딩되지 않은 원본 데이터 표시 전환" width="2272" height="1040" data-path="images/app_ui/demo_wandb_smoothing_turn_on_and_off_original_data.gif" />
</Frame>
