[SwiftUI] WWDC24 Swift Charts: Vectorized and function plots

Swift Charts: Vectorized and function plots세션을 정리한 글입니다.

 

이제 Swift Charts를 사용하면 앱에 수학 함수를 플롯 작업하며 데이터 이상의 요소를 시각화할 수 있습니다

 

2개의 새로운 API를 소개합니다

LinePlot은 단일 함수를 시각화하고 AreaPlot은 두 함수 사이의 영역을 채웁니다

 

예시로

각 요소에 대한 BarMark를 사용하여 태양광 패널의 용량 밀도를 시각화하는 히스토그램을 만들었습니다

이 히스토그램(막대차트)은 그 용량 밀도가 정규 분포일 수 있음을 나타냅니다 

(정규분포: 평균점을 기준으로 좌우대칭인 형태의 자료형태)

 

정규 분포 곡선의 점을 계산하는 함수를 정의하고

LinePlot API를 사용하여 이를 그리면

이렇게 곡선형태를 위에 덮어쓸 수 있습니다.

 

Swift Charts의 기본은 누구나 데이터 시각화를 이용할 수 있어야 함

Swift Charts를 사용하면 차트에 기본적으로 액세스할 수 있습니다

VoiceOver를 사용하여 차트를 설명할 수 있습니다(

“x축은 용량 밀도이고 y축은 확률입니다 두 개의 데이터 시리즈가 있습니다” 라고 설명이나오고(시각장애인을 위한 편의성)

 

오디오 그래프는 함수 플롯에서도 작동합니다

그래프의 값에 따라서 음의 높낮이가 변경되는걸 볼 수 있습니다.(시각장애인을 위한 편의성)

 

위처럼 라인의 색만 변경할 수 있으며

곡선 아래 영역을 채우고 싶다면 LinePlot만 AreaPlot으로 변경하면 됩니다

이것이 간단한 수학 함수를 그리는 방법입니다 하지만 Swift 차트를 사용하면 쉽게 고급 함수 플롯을 만들 수 있습니다

 

 

예를 들어 AreaPlot은 곡선 아래의 영역을 시각화할 수 있을 뿐만 아니라 주어진 입력 x에 대해 yStart 및 yEnd의 튜플을 반환하여 두 함수 사이의 영역을 시각화하는 데에도 사용할 수 있습니다

 

 

데이터 시각화와 달리 함수는 허용되는 x 값의 범위가 제한되지 않습니다 기본적으로 Swift Charts는 함수를 샘플링하여 자동으로 영역을 유추합니다

하지만

chartXScale, chartYScale 모디파이어를 이용하여 X 척도와 Y 척도를 설정하고

관심이 있는 함수 부분만 포함하도록 차트의 전체 경계를 맞춤화할 수 있습니다

 

 

함수 플롯 자체의 영역을 제한하는 기능도 있습니다

AreaPlot의 domain매개변수를 지정해 샘플링 영역을 제한하여 이제 차트에는 이 기능의 중간 부분만 포함됩니다

 

 

Swift Charts는 매개변수 함수의 플롯 작업도 지원합니다

위는 x 및 y가 세 번째 변수 T로 정의되는 매개변수 함수임

동일한 LinePlot API를 사용하여 Swift Charts에서 매개변수 함수를 그래프로 표시할 수 있지만

주어진 t 값에 대해 x 및 y 값을 모두 반환하면 하트가 그려집니다.

 

이제 조각별(piecewise) 함수를 처리하는 방법을 살펴보겠습니다

(piecewise: 조건에 따라 다른 함수 또는 값들을 반환)
경우에 따라 조각별 함수에는 해당 도메인 내의 특정 값에 대해 출력이 없을 수 있습니다

이러한 경우 .nan을 반환하여 해당 입력 값 x에 대한 숫자가 없음을 Swift Charts에 알릴 수 있습니다

 

 

다른 모든 마크 유형에 대한 플롯 API 변형도 추가함

 

Mark API를 사용하여 차트를 선언하는 방법을 검토하겠습니다

 

RectanglePlot과 같은 새로운 Vectorized Plot API를 사용하면 Swift Charts가 더 큰 데이터 모음을 더 효율적으로 처리할 수 있습니다

 

 

새로운 PointPlot API는 전체 데이터 모음을 사용해 플롯 작업합니다

 

이전에 SwiftUI를 사용한 적이 있다면 이미 KeyPath를 사용해 보셨을 겁니다 

KeyPath를 사용하면 Swift Charts에서 데이터 세트를 반복하지 않고도 모든 포인트의 스타일을 지정할 수 있습니다

벡터화된 플롯의 한정자도 KeyPath를 사용합니다

 

벡터화된 플롯과 Mark의 상호 보완

전체 플롯이 같은 한정자 및 속성으로 맞춤화된 대규모 데이터 세트에서는 Vectorized Plot을 사용하세요

 

데이터 포인트 수가 적지만 개별 마크 유형 및 한정자로 각 요소를 맞춤화해야 하거나 zIndex를 사용한 복잡한 레이어링이 필요하다면 Mark API를 사용하세요

 

벡터화된 플롯을 사용할 때 사용할 스타일별로 데이터 모음을 그룹화하면 Swift Charts가 스타일을 바꾸는 횟수를 줄일 수 있습니다
computed property를 store property로 변환하는 등 렌더링 중에 다른 계산을 피하는 것도 도움이 될 수 있습니다
사용할 몇 가지 고유한 스타일이나 차트의 모든 범위를 이미 알고 있는 경우 해당 스타일을 지정하면 차트가 더 효율적으로 렌더링됩니다
어떤 스타일 맞춤화는 데이터 포인트가 대규모라면 보통은 눈에 띄지 않으므로 해당 항목을 완전히 건너뛸 수 있습니다