> ## 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는 여러 유형의 스무딩을 지원합니다:

* [시간 가중 지수 이동 평균(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-1917/CB9tJSsSFnrt6bwh/images/app_ui/beamer_smoothing.gif?s=4215ec6c6196b62b90057e931ece51c2" 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;
});
```

앱에서는 [다음과 같이 표시됩니다](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc):

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-1917/J9MWPMly2QejZKBH/images/app_ui/weighted_exponential_moving_average.png?fit=max&auto=format&n=J9MWPMly2QejZKBH&q=85&s=bc283e5282ed6762501b417ed7b5c51a" alt="TWEMA 스무딩 예시" width="2162" height="738" data-path="images/app_ui/weighted_exponential_moving_average.png" />
</Frame>

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

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

다음은 [앱에서](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc#3.-gaussian-smoothing) 어떻게 표시되는지 보여줍니다:

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-1917/CB9tJSsSFnrt6bwh/images/app_ui/gaussian_smoothing.png?fit=max&auto=format&n=CB9tJSsSFnrt6bwh&q=85&s=24a483ba440880e2efe4013585e88672" alt="가우시안 스무딩 데모" width="1642" height="674" data-path="images/app_ui/gaussian_smoothing.png" />
</Frame>

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

이동 평균은 주어진 x 값의 앞뒤 윈도우에 있는 포인트들의 평균으로 해당 포인트를 대체하는 스무딩 알고리즘입니다. 자세한 내용은 [Wikipedia의 "Boxcar Filter"](https://en.wikipedia.org/wiki/Moving_average)를 참조하세요. 이동 평균에 대해 선택한 파라미터는 이동 평균을 계산할 때 고려할 포인트 수를 Weights and Biases에 전달합니다.

포인트 간 간격이 x축에서 고르지 않다면 가우시안 스무딩을 대신 사용하는 것이 좋습니다.

다음은 [앱에서](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc#4.-running-average) 표시되는 모습입니다:

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-1917/J9MWPMly2QejZKBH/images/app_ui/running_average.png?fit=max&auto=format&n=J9MWPMly2QejZKBH&q=85&s=944d9ba41ab5aa69e7aafd3c6e5d756f" 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);
```

앱에서는 [다음과 같이 표시됩니다](https://wandb.ai/carey/smoothing-example/reports/W-B-Smoothing-Features--Vmlldzo1MzY3OTc):

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-1917/CB9tJSsSFnrt6bwh/images/app_ui/exponential_moving_average.png?fit=max&auto=format&n=CB9tJSsSFnrt6bwh&q=85&s=c81f83231a5d09dd556f8966719b5508" 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-1917/CB9tJSsSFnrt6bwh/images/app_ui/demo_wandb_smoothing_turn_on_and_off_original_data.gif?s=7c435d8ae47bd492dcc7b3836f73010e" alt="원본 데이터 표시 켜기 또는 끄기" width="2272" height="1040" data-path="images/app_ui/demo_wandb_smoothing_turn_on_and_off_original_data.gif" />
</Frame>
