Swift Chartsの3次元変換

Swift Chartsの3次元変換

Chart3Dを使って2D Swift Chartsを3次元に変換し、まったく新しい視点からデータセットを可視化する方法を説明します。3Dでデータをプロットし、数学的サーフェスを可視化し、カメラからマテリアルまですべてをカスタマイズして、より直感的で楽しい3Dチャートを作成しましょう。このセッションの内容を十分理解できるよう、2D Swift Chartsの作成方法を確認しておくことをおすすめします。

関連する章
- 0:00 - イントロダクション
- 1:54 - 3Dでのプロット
- 5:05 - サーフェスのプロット
- 7:03 - カスタマイズ
リソース
関連ビデオ

WWDC24
- Swift Charts：ベクトルプロットと関数プロット
WWDC22
- グラフを使ったApp体験のデザイン
- 効果的なグラフのデザイン
こんにちはMikeです System Experienceチームでエンジニアをしています本日はSwift Chartsの素晴らしい新機能について説明したいと思います Swift Chartsはわかりやすく魅力的なグラフを作成するためのフレームワークです
グラフはAppleプラットフォーム全体で使われています「天気」での気温の確認
「設定」でのバッテリー使用状況の表示「計算メモ」での数学関数のグラフ化などに利用されています
Swift Chartsに用意されている構成要素を利用すると軸の目盛りラベル折れ線グラフなどのコンポーネントを使って 2Dグラフを作成できます
もっと魅力的なグラフを作ることもできます iOS macOS visionOS 26の新機能により Swift Chartsは3Dグラフに対応できますそうですユーザーはまったく新しい視点からデータセットを調べ理解できるようになるのです
このセッションでは 2Dグラフのセットを3Dでプロットして 3次元化する方法を紹介しますまたサーフェスプロットを使って 3次元の数学関数をグラフ化する方法を説明します最後にグラフをより直感的で魅力的なものにするためのカスタマイズ方法を説明しますその前に重要なお知らせがあります
私はペンギンが大好きです
実はお気に入りのデータセットの1つには南極のパーマー諸島に生息する何百羽ものペンギンの観察データが含まれているのです
このデータには各ペンギンのくちばしや翼の長さと体重が含まれており
ヒゲペンギンジェンツーペンギンアデリーペンギンという種類ごとに
分類されています
Swift Chartsを使ってこのデータから詳細情報を引き出し 3Dでプロットすることでペンギンの種類の違いを視覚化する方法を紹介します
ペンギンの翼の長さと体重の関係を示す 2Dグラフを作成しました PointMarkを使って各ペンギンの翼の長さと体重をプロットし foregroundStyleによって種類ごとにポイントの色分けをして隅に凡例を作成します
これは素晴らしいグラフです Swift Chartsを使えばグラフを簡単に作成できますこのグラフではヒゲペンギンとアデリーペンギンの翼の長さと体重は似ているがジェンツーペンギンは翼が長く体重も重いことを示しています
ペンギンデータセットにはくちばしの長さも含まれておりくちばしの長さと体重をプロットしたグラフも作成しました
このグラフはヒゲペンギンとジェンツーペンギンのくちばしの長さは似ているがアデリーペンギンのくちばしは短いことを示しています
最後にくちばしと翼の長さのグラフを作成しましたくちばしが長いペンギンは翼も長い傾向があります
これらはどちらも優れた 2Dグラフで一度に2つの特徴間の関係について有用な詳細情報を提供します
Swift Chartsではこれらのグラフを次のレベルに引き上げることができます 1つのグラフにすべてのデータを含めることができるのです
それはChart3Dと呼ばれています Chart3Dは散布図などの2Dグラフでよく知られている概念を採用しておりそれをフル3Dのグラフに適用します
3Dグラフを使うために ChartをChart3Dに変更します
PointMarkはChart3Dで有用であり Z値も指定できるようになりましたここでは「Beak Length」を使用します
Z軸のラベルも「Beak Length」に設定して以上で完了です
数行のコードとChart3Dによりペンギンの種類ごとの違いを楽しくてインタラクティブな方法ではっきり表現できるようになりました
単純なジェスチャーでチャートを正確な角度まで回転させてデータポイントの 3つのクラスタを確認できます
チャートは側面からも表示でき一度に2つの特徴を比較できますグラフを2D表示する場合と似ています
3Dグラフが特に有効なのは正確な数値よりもデータの形状が重要な場合ですこれは当然ながらデータ自体が3次元の場合であり特にデータが3D空間の物理的な位置を表す場合に当てはまります
またインタラクティブ性は 3次元データセットを理解する際に重要ですアプリの体験を向上させるためにインタラクションが必要な場合にのみ 3Dチャートを検討してくださいデータセットの最適な表現について 2Dと3Dのどちらを選択したら良いかは一概には決められません
PointMarkやRuleMark RectangleMarkはすべて3Dグラフ用に更新されていますそしてChart3Dに固有の機能として SurfacePlotがあるのです
次にSurfacePlotの仕組みを詳しく見ていきましょう
SurfacePlotはLinePlotの3次元拡張機能です最大2つの変数を含む数学的なサーフェスを 3次元でプロットします
新しいSurfacePlot APIは LinePlot APIに似ています
2つのdoubleを受け取り 1つのdoubleを返すクロージャを受け入れます
クロージャに数式を入力すると SurfacePlotはさまざまな XとZの値で式を評価し計算されたYの値から連続したサーフェスを作成しますこれらのサーフェスは必要に応じて複雑にしたりシンプルにしたりできます
LinePlot APIを介した関数プロットの詳細については WWDC24の「Swift Charts:ベクトルプロットと関数プロット」をご覧ください
お気づきでしょうかペンギンのデータセットを改めて見るとペンギンのくちばしと翼の長さおよび体重の間には線形関係があるようですこれは妥当な推測のように思えますが一時的な対処で済ませずに SurfacePlotを使ってデータの線形回帰を示します
独立したx変数とz変数に基づいてy値を推定する LinearRegressionクラスを定義しました具体的には翼の長さとくちばしの長さに基づいてペンギンの体重を推定する線形回帰を設定します
この線形回帰はSurfacePlotで使われ推定された体重を連続したサーフェスとしてプロットします
素晴らしいですねこのデータには線形関係があるようです SurfacePlotは翼の長さと体重の間に正の相関関係があることを示していますまたくちばしの長さと体重の間にもわずかに正の相関関係が見られます
では Chart3Dのスタイルや動作をカスタマイズするための優れた方法を説明します
先ほどペンギンのデータセットを操作していましたがグラフの角度が変わるとデータの外観も変更されることに気づきました
この角度はデータポイントのクラスタを表示するのに最適ですこの角度は線形関係を示すのに適しています
これらの角度はグラフのポーズと呼ばれます
最初のポーズを選択することが重要ですこれによりデータを適切に表現できます
事前に値がわからない動的データの場合その種類の代表的なデータセットを適切に表す初期ポーズを選んでください
グラフのポーズはChart3DPose修飾子を使って調整されこの修飾子はChart3DPoseの値を受け取ります
ポーズをfrontなどの特定の値に設定できます
カスタムポーズを定義することもできますこのイニシャライザは2つのパラメータを取りますグラフを左右に回転させるazimuthと
上下に傾けるinclinationです
次にグラフの奥にあるポイントと手前にあるポイントが同じサイズであることに注目してください
これにより奥行きに関係なくグラフ全体でサイズや距離を比較しやすくなります
またグラフを横から見るのにも適しており 3Dグラフを実質的に2Dグラフに変換できます
これは正投影カメラ投影と呼ばれます
Chart3Dには2つのカメラ投影がありますデフォルトの動作である正投影と透視投影です透視投影では遠くにあるデータポイントは小さく表示され平行線は収束しますこれによりイマーシブな体験が可能になり奥行きの認識に役立ちます
カメラ投影はchart3DCameraProjection 修飾子を使って設定されます
SurfacePlotsにはサーフェスのスタイルをカスタマイズするオプションがあります
ForegroundStyleはLinearGradientや EllipticalGradientなどのグラデーションを受け取り次の2つの新しい値をサポートします各ポイントのサーフェスの高さに基づいてサーフェス上のポイントを着色する heightBasedと
各ポイントのサーフェスの角度に基づいてサーフェス上のポイントを着色する normalBasedです
Chart3Dでは他にも多くの修飾子を利用できその中には2Dグラフでよく使われているものもありますこれらを使ってサーフェスのスタイル PointMarkのシンボルグラフのドメインと軸の目盛り選択時の動作をカスタマイズします
これらのビュー修飾子をPointMark RuleMark RectangleMark SurfacePlotと組み合わせることでさまざまな種類の魅力的なグラフを作成できますこれはほんの一例にすぎません
また3DグラフはVision Proで動作し見た目も優れており 3次元データセットに自然に適合します
これらはSwift Chartsに導入される新しい3D機能の一部です
3Dがデータの適切な表現方法であると判断したら Chart3Dでプロットしてグラフに新たなレベルの奥行きを加え Swift ChartsのカスタマイズAPIを使ってわかりやすく魅力的なグラフを独自にデザインしてみてください
Swift Chartsをアプリに組み込む場合のベストプラクティスについては WWDC22の「グラフを使った App体験のデザイン」をご覧ください
ご視聴ありがとうございました皆さんが3次元で作るグラフを楽しみにしています

2:03 - A scatterplot of a penguin's flipper length and weight

// A scatterplot of a penguin's flipper length and weight

import SwiftUI
import Charts

struct PenguinChart: View {
  var body: some View {
    Chart(penguins) { penguin in
      PointMark(
        x: .value("Flipper Length", penguin.flipperLength),
        y: .value("Weight", penguin.weight)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chartXAxisLabel("Flipper Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartXScale(domain: 160...240)
    .chartYScale(domain: 2...7)
    .chartXAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

2:39 - A scatterplot of a penguin's beak length and weight

// A scatterplot of a penguin's beak length and weight

import SwiftUI
import Charts

struct PenguinChart: View {
  var body: some View {
    Chart(penguins) { penguin in
      PointMark(
        x: .value("Beak Length", penguin.beakLength),
        y: .value("Weight", penguin.weight)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chartXAxisLabel("Beak Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartXScale(domain: 30...60)
    .chartYScale(domain: 2...7)
    .chartXAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

2:51 - A scatterplot of a penguin's beak length and flipper length

// A scatterplot of a penguin's beak length and flipper length

import SwiftUI
import Charts

struct PenguinChart: View {
  var body: some View {
    Chart(penguins) { penguin in
      PointMark(
        x: .value("Beak Length", penguin.beakLength),
        y: .value("Flipper Length", penguin.flipperLength)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chartXAxisLabel("Beak Length (mm)")
    .chartYAxisLabel("Flipper Length (mm)")
    .chartXScale(domain: 30...60)
    .chartYScale(domain: 160...240)
    .chartXAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

3:28 - A scatterplot of a penguin's flipper length, beak length, and weight

// A scatterplot of a penguin's flipper length, beak length, and weight

import SwiftUI
import Charts

struct PenguinChart: View {
  var body: some View {
    Chart3D(penguins) { penguin in
      PointMark(
        x: .value("Flipper Length", penguin.flipperLength),
        y: .value("Weight", penguin.weight),
        z: .value("Beak Length", penguin.beakLength)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chartXAxisLabel("Flipper Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartZAxisLabel("Beak Length (mm)")
    .chartXScale(domain: 160...240, range: -0.5...0.5)
    .chartYScale(domain: 2...7, range: -0.5...0.5)
    .chartZScale(domain: 30...60, range: -0.5...0.5)
    .chartXAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartZAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

5:19 - A surface plot showing mathematical functions (x * z)

// A surface plot showing mathematical functions

import SwiftUI
import Charts

var SurfacePlotChart: View {
  var body: some View {
    Chart3D {
      SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
        // (Double, Double) -> Double
        x * z
      }
    }
  }
}

5:43 - A surface plot showing mathematical functions

// A surface plot showing mathematical functions

import SwiftUI
import Charts

var SurfacePlotChart: View {
  var body: some View {
    Chart3D {
      SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
        // (Double, Double) -> Double
        (sin(5 * x) + sin(5 * z)) / 2
      }
    }
  }
}

5:46 - A surface plot showing mathematical functions (-z)

// A surface plot showing mathematical functions

import SwiftUI
import Charts

var SurfacePlotChart: View {
  var body: some View {
    Chart3D {
      SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
        // (Double, Double) -> Double
        -z
      }
    }
  }
}

6:19 - Present a linear regression of the penguin data

// Present a linear regression of the penguin data

import SwiftUI
import Charts
import CreateML
import TabularData

final class LinearRegression: Sendable {
  let regressor: MLLinearRegressor

  init(
    _ data: Data,
    x xPath: KeyPath,
    y yPath: KeyPath,
    z zPath: KeyPath
  ) {
    let x = Column(name: "X", contents: data.map { $0[keyPath: xPath] })
    let y = Column(name: "Y", contents: data.map { $0[keyPath: yPath] })
    let z = Column(name: "Z", contents: data.map { $0[keyPath: zPath] })
    let data = DataFrame(columns: [x, y, z].map { $0.eraseToAnyColumn() })
    regressor = try! MLLinearRegressor(trainingData: data, targetColumn: "Y")
  }

  func callAsFunction(_ x: Double, _ z: Double) -> Double {
    let x = Column(name: "X", contents: [x])
    let z = Column(name: "Z", contents: [z])
    let data = DataFrame(columns: [x, z].map { $0.eraseToAnyColumn() })
    return (try? regressor.predictions(from: data))?.first as? Double ?? .nan
  }
}

let linearRegression = LinearRegression(
  penguins,
  x: \.flipperLength,
  y: \.weight,
  z: \.beakLength
)

struct PenguinChart: some View {
  var body: some View {
    Chart3D {
      ForEach(penguins) { penguin in
        PointMark(
          x: .value("Flipper Length", penguin.flipperLength),
          y: .value("Weight", penguin.weight),
          z: .value("Beak Length", penguin.beakLength),
        )
        .foregroundStyle(by: .value("Species", penguin.species))
      }

      SurfacePlot(x: "Flipper Length", y: "Weight", z: "Beak Length") { flipperLength, beakLength in
        linearRegression(flipperLength, beakLength)
      }
      .foregroundStyle(.gray)
    }
    .chartXAxisLabel("Flipper Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartZAxisLabel("Beak Length (mm)")
    .chartXScale(domain: 160...240, range: -0.5...0.5)
    .chartYScale(domain: 2...7, range: -0.5...0.5)
    .chartZScale(domain: 30...60, range: -0.5...0.5)
    .chartXAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartZAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

7:50 - Adjust the initial chart pose (Default)

// Adjust the initial chart pose

import SwiftUI
import Charts

struct PenguinChart: View {
  @State var pose: Chart3DPose = .default

  var body: some View {
    Chart3D(penguins) { penguin in
      PointMark(
        x: .value("Flipper Length", penguin.flipperLength),
        y: .value("Weight", penguin.weight),
        z: .value("Beak Length", penguin.beakLength)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chart3DPose($pose)
    .chartXAxisLabel("Flipper Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartZAxisLabel("Beak Length (mm)")
    .chartXScale(domain: 160...240, range: -0.5...0.5)
    .chartYScale(domain: 2...7, range: -0.5...0.5)
    .chartZScale(domain: 30...60, range: -0.5...0.5)
    .chartXAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartZAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

8:02 - Adjust the initial chart pose (Front)

// Adjust the initial chart pose

import SwiftUI
import Charts

struct PenguinChart: View {
  @State var pose: Chart3DPose = .front

  var body: some View {
    Chart3D(penguins) { penguin in
      PointMark(
        x: .value("Flipper Length", penguin.flipperLength),
        y: .value("Weight", penguin.weight),
        z: .value("Beak Length", penguin.beakLength)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chart3DPose($pose)
    .chartXAxisLabel("Flipper Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartZAxisLabel("Beak Length (mm)")
    .chartXScale(domain: 160...240, range: -0.5...0.5)
    .chartYScale(domain: 2...7, range: -0.5...0.5)
    .chartZScale(domain: 30...60, range: -0.5...0.5)
    .chartXAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartZAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

8:09 - Adjust the initial chart pose (Custom)

// Adjust the initial chart pose

import SwiftUI
import Charts

struct PenguinChart: View {
  @State var pose = Chart3DPose(
    azimuth: .degrees(20),
    inclination: .degrees(7)
  )

  var body: some View {
    Chart3D(penguins) { penguin in
      PointMark(
        x: .value("Flipper Length", penguin.flipperLength),
        y: .value("Weight", penguin.weight),
        z: .value("Beak Length", penguin.beakLength)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chart3DPose($pose)
    .chartXAxisLabel("Flipper Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartZAxisLabel("Beak Length (mm)")
    .chartXScale(domain: 160...240, range: -0.5...0.5)
    .chartYScale(domain: 2...7, range: -0.5...0.5)
    .chartZScale(domain: 30...60, range: -0.5...0.5)
    .chartXAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartZAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

9:15 - Adjust the initial chart pose and camera projection

// Adjust the initial chart pose and camera projection

import SwiftUI
import Charts

struct PenguinChart: View {
  @State var pose = Chart3DPose(
    azimuth: .degrees(20),
    inclination: .degrees(7)
  )

  var body: some View {
    Chart3D(penguins) { penguin in
      PointMark(
        x: .value("Flipper Length", penguin.flipperLength),
        y: .value("Weight", penguin.weight),
        z: .value("Beak Length", penguin.beakLength)
      )
      .foregroundStyle(by: .value("Species", penguin.species))
    }
    .chart3DPose($pose)
    .chart3DCameraProjection(.perspective)
    .chartXAxisLabel("Flipper Length (mm)")
    .chartYAxisLabel("Weight (kg)")
    .chartZAxisLabel("Beak Length (mm)")
    .chartXScale(domain: 160...240, range: -0.5...0.5)
    .chartYScale(domain: 2...7, range: -0.5...0.5)
    .chartZScale(domain: 30...60, range: -0.5...0.5)
    .chartXAxis {
      AxisMarks(values: [160, 180, 200, 220, 240]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartYAxis {
      AxisMarks(values: [2, 3, 4, 5, 6, 7]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
    .chartZAxis {
      AxisMarks(values: [30, 40, 50, 60]) {
        AxisTick()
        AxisGridLine()
        AxisValueLabel()
      }
    }
  }
}

9:24 - Customize the surface styles for a sinc function

// Customize the surface styles for a sinc function

import SwiftUI
import Charts

struct SurfacePlotChart: View {
  var body: some View {
    Chart3D {
      SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
        let h = hypot(x, z)
        return sin(h) / h
      }
    }
    .chartXScale(domain: -10...10, range: -0.5...0.5)
    .chartZScale(domain: -10...10, range: -0.5...0.5)
    .chartYScale(domain: -0.23...1, range: -0.5...0.5)
  }
}

9:29 - Customize the surface styles for a sinc function (EllipticalGradient)

// Customize the surface styles for a sinc function

import SwiftUI
import Charts

struct SurfacePlotChart: View {
  var body: some View {
    Chart3D {
      SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
        let h = hypot(x, z)
        return sin(h) / h
      }
      .foregroundStyle(EllipticalGradient(colors: [.red, .orange, .yellow, .green, .blue, .indigo, .purple]))
    }
    .chartXScale(domain: -10...10, range: -0.5...0.5)
    .chartZScale(domain: -10...10, range: -0.5...0.5)
    .chartYScale(domain: -0.23...1, range: -0.5...0.5)
  }
}

9:38 - Customize the surface styles for a sinc function (heightBased)

// Customize the surface styles for a sinc function

import SwiftUI
import Charts

struct SurfacePlotChart: View {
  var body: some View {
    Chart3D {
      SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
        let h = hypot(x, z)
        return sin(h) / h
      }
      .foregroundStyle(.heightBased)
    }
    .chartXScale(domain: -10...10, range: -0.5...0.5)
    .chartZScale(domain: -10...10, range: -0.5...0.5)
    .chartYScale(domain: -0.23...1, range: -0.5...0.5)
  }
}

9:47 - Customize the surface styles for a sinc function (normalBased)

// Customize the surface styles for a sinc function

import SwiftUI
import Charts

struct SurfacePlotChart: View {
  var body: some View {
    Chart3D {
      SurfacePlot(x: "X", y: "Y", z: "Z") { x, z in
        let h = hypot(x, z)
        return sin(h) / h
      }
      .foregroundStyle(.normalBased)
    }
    .chartXScale(domain: -10...10, range: -0.5...0.5)
    .chartZScale(domain: -10...10, range: -0.5...0.5)
    .chartYScale(domain: -0.23...1, range: -0.5...0.5)
  }
}

関連する章

リソース

関連ビデオ

WWDC24

WWDC22