Swift Charts：ベクトルプロットと関数プロット

プロットで表をより充実させましょう。アプリ内で関数とベクトル化されたプロットを使用して、数学関数や広範なデータセットを表示できる美しい表をレンダリングする方法をご紹介します。空気力学、磁気学、高次元の場の理論などでよく使用される関数を表示する、または大規模かつインタラクティブなヒートマップを作成するなどの課題にも、Swift Chartsなら対応できます。

リソース

関連ビデオ

WWDC23

Swift Chartsの円グラフとインタラクティブ性の詳細

WWDC22

こんにちは Apolloです Swift Chartsの新機能について説明します Swift Chartsは SwiftUIを使用して情報豊かでアクセスしやすい魅力的な視覚化を実現します

このリリースでは天気の傾向を表示したり

気分やバイタルを記録したり

Math Noteで関数をグラフ化する新しいチャートを提供します

そうです

Swift Chartsはデータ以外のものを視覚化できますアプリ内に数学関数をプロットします

Swift ChartsではプロットAPIもベクトル化されましたこれによって巨大なデータセットをさらに効率的に視覚化できますこのビデオでは Swift Chartsの素晴らしい新機能をそれぞれ詳しく説明しますまずは関数プロットですこれには2つの新しいAPIが導入されています

LinePlotは単一の関数を視覚化します AreaPlotは 2つの関数の間の領域を塗りつぶします関数プロットがデータ分析にどのように役立つかをご紹介します

アメリカ本土での大規模太陽光発電プロジェクトについて調査しましたアメリカ地質調査所のデータセットを使用しています

ヒストグラムを作成してソーラーパネルの容量密度を可視化しました ForEachをデータポイントに使い BarMarkを各要素に使っていますご覧のとおりですこのヒストグラムは容量密度が正規分布である可能性を示唆しています比較のために新しい関数プロットAPIを使って正規分布をプロットしてみましょう

正規分布曲線の点を計算する関数を定義しましたので

新しいLinePlot APIを使ってプロットできますこれはdoubleを受け取りdoubleを返すクロージャを受け取りますそのため計算済みの平均値と標準偏差を使って関数を呼び出すことができます

Swift Chartsでは誰でもデータを視覚化できるのが重要です Swift Chartsはデフォルトでグラフをアクセシブルにします

Voice Overを使ってグラフを説明させることができます「x軸は容量密度です y軸は確率です 2つのデータ系列があります」オーディオグラフも関数プロットで機能します

「完了」

はいできましたちょうどSwiftUIと同じようにモディファイアを使って関数の外観をカスタマイズできます

ここで LinePlotはバーのデフォルト色と同じなので関数プロットの色を別のforegroundStyleでカスタマイズするとよいでしょう

ずっとよくなりましたしかしもう少し目立つように曲線の下の領域を塗りつぶしましょうそれにはLinePlotを AreaPlotに変更するだけです

次にコントラストを上げて AreaPlotをさらにカスタマイズできます読みやすいように不透明度を使用します

以上で簡単な数学関数をプロットする方法を説明しました Swift Chartsでは高度な関数プロットも簡単に作成できます

例えば AreaPlotは曲線の下の領域だけでなく 2つの関数に挟まれた領域も視覚化できますこれはタプルを返すことで実現できます yStartと与えられた入力xに対する yEndのタプルです

データの視覚化と異なり関数は範囲制限のないx値を受け取りますデフォルトではSwift Chartsは関数をサンプリングすることで自動的にドメインを推測します

しかしグラフ全体の境界をカスタマイズすることができます XスケールとYスケールを設定して関数の関心のある部分のみを含めることができます

また関数プロット自体のドメインを制限することもできます

AreaPlotのサンプリングドメインを制限することでグラフにこの関数の中央部分のみを含めることができます

Swift Chartsはパラメトリック関数のプロットにも対応しています

これがパラメトリック関数ですここでxとyは第3の変数Tによって定義されますプロットしてみましょう

Swift Chartsではパラメトリック関数をグラフ化できますそれには同じLinePlot APIを使用しますが値tに対してxとyの両方の値を返しますいいですね

次は区分関数の扱い方について説明します

区分関数はドメイン内の特定の値に対して出力がないことがあります

そのような場合は.nanを返してその入力値xに対する数字が存在しないことを Swift Chartsに通知します

それ以外の場合はコードが特定のx値をトラップすることがあります例えば xが0のときに 1/xを評価する場合などです

同様に特殊な値は.nanを返して処理する必要があります

これがLineプロットとAreaプロットによる関数プロットですここでは数学関数全体が 1つのエンティティとして機能しますさらにこれらのプロットAPIは関数以外でも役立ちます

より便利かつ効率的に大規模なデータセットを視覚化できます

そこで他のすべてのマークタイプ用にプロットAPIのバリアントも追加しました

これらのベクトル化プロットAPIはコレクション全体を並列実行し広範なデータの視覚化を描画できます例えば分類モデルの散布図や Transformer言語モデルでセルフアテンションを視覚化するヒートマップなどです話を進める前に Mark APIを使用したグラフの宣言方法を確認しましょう

マークは非常に柔軟であり各データポイントのスタイルを個別に設定できます適用するモディファイアの選択や使用するマークの種類の設定も可能です

ただしほとんどの場合このレベルのカスタマイズは必要ありませんデータポイントのコレクション全体に同種のスタイルを適用するのが一般的ですその際同じ要素プロパティを X、Y、foregroundStyle その他の視覚属性に使用します

これに対し RectanglePlotなどの新しいベクトル化プロットAPIは Swift Chartsでデータの大規模なコレクションをより効率的に処理できますベクトル化プロットの例としてソーラーパネルのデータセットに戻りましょう

すべてのソーラーパネル施設の視覚化をアプリに追加します

このグラフのすべての点について同じようにカスタマイズしたいと思いますサイズは容量によって決まり

パネルの軸タイプによって色分けされます

データセットには経度と緯度の生のGPS座標がありますがアルベルス図法を適用して平面上に点を表示したいと思います

計算済みプロパティを拡張機能に追加して簡単に変換することはできますがベクトル化プロットを最大限に利用するためストアドプロパティとして追加することにします

ストアドプロパティによって Swift Chartsはすべてのデータポイントの x値とy値にアクセスできますすべてのデータポイントにゲッタを呼び出す代わりに一定のメモリオフセットを使用します

新しいPointPlot APIはプロットするデータのコレクション全体を取ります

プロットのすべての点の x値とy値について同じラベル付き.value構文を使用できます DataPoint構造体のストアドプロパティ xおよびyへの KeyPathも使用します

SwiftUIを使ったことがある人は KeyPathを使ったことがあるかもしれません KeyPathを使うとSwift Chartsがすべての点のスタイルを設定しますデータセットを繰り返し処理する必要はありません

ベクトル化プロットのモディファイアも KeyPathを取ります

symbolSizeでは各点のサイズがソーラーパネルの容量を表すようにします同様にKeyPathを使用してソーラーパネルの軸タイプを取得し各点の色をカスタマイズします

同種の修飾によく使われるその他すべてのモディファイアも KeyPath引数をサポートします

Apple Vision Proと空間コンピューティングで私のアプリが素晴らしい見栄えになります左側のベクトル化プロットはアニメーションが滑らかでダッシュボードのすべてのグラフは棒グラフをスクラブすると同時に更新されます

ピンチアンドドラッグにより先ほど追加したベクトル化プロットが拡大され各ソーラーパネル施設を詳しく見ることができ先ほど作成した正規分布プロットを一目で把握できます

これがベクトル化プロットですベクトル化されたプロットとマークがどう補完し合うか疑問があるかもしれません

プロット全体をカスタマイズするような大規模なデータセットにはベクトル化プロットを同じモディファイアとプロパティで使用します

データポイントが少ない時は Mark APIを使いますが個々のマークタイプとモディファイアを使って各要素をカスタマイズする必要があります

zIndexによる複雑なレイヤー化が必要な場合も同様です

ベクトル化プロットを使用する時は Swift Chartsにスタイル変更の回数を減らさせることができますそれには使用するスタイルごとにデータのコレクションをグループ化します

レンダリング中に他の計算を行わないようにすることも有効です計算済みプロパティをストアドプロパティに変換するなどです

使用するスタイルがわかっている場合やグラフの境界全体がわかっている場合はそれらを指定するとグラフのレンダリングがより効率的になります

最後にスタイルのカスタマイズは大量のデータポイントで目立たないようにするのが一般的ですそれらを完全にスキップしてグラフのパフォーマンスを向上させることができます

これがSwift Chartsの新しいベクトル化プロットと関数プロットです

これらの新機能を試して視覚化をレベルアップしましょうサンプルプロジェクトをダウンロードして関数プロットの他の例を確認してくださいインタラクションを追加する方法もあります Swift Chartsを初めて使う方は以前のセッションを参考にしてください

ありがとうございましたみなさんの今後の構想が楽しみです

1:43 - Histogram that shows distribution of capacity density

Chart {
  ForEach(bins) { bin in
    BarMark(
      x: .value("Capacity density", bin.range),
      y: .value("Probability", bin.probability)
    )
  }
}

2:18 - Visualize function with LinePlot

Chart {
  LinePlot(
    x: "Capacity density", y: "Probability"
  ) { x in // (Double) -> Double
    normalDistribution(
      x,
      mean: mean, 
      standardDeviation: standardDeviation
    )
  }
}

3:36 - Customize function plot with modifiers

Chart {
  LinePlot(
    x: "Capacity density", y: "Probability"
  ) { x in
    normalDistribution(x, ...)
  }
  .foregroundStyle(.gray
}

3:57 - Visualize area under a curve with AreaPlot
```
Chart {
  AreaPlot(
    x: "Capacity density", y: "Probability"
  ) { x in
    normalDistribution(x, ...)
  }
  .foregroundStyle(.gray)
  .opacity(0.2)
}
```

4:21 - Visualize area between curves with AreaPlot

Chart {
  AreaPlot(
    x: "x", yStart: "cos(x)", yEnd: "sin(x)"
  ) { x in
    (yStart: cos(x / 180 * .pi),
     yEnd: sin(x / 180 * .pi))
  }
}

4:59 - Specify domain for function plots

Chart {
  AreaPlot(
    x: "x", yStart: "cos(x)", yEnd: "sin(x)"
  ) { x in
    (yStart: cos(x / 180 * .pi),
     yEnd: sin(x / 180 * .pi))
  }
}
.chartXScale(domain: -315...225)
.chartYScale(domain: -5...5)

5:18 - Specify sampling domain for function plots

Chart {
  AreaPlot(
    x: "x", yStart: "cos(x)", yEnd: "sin(x)",
    domain: -135...45
  ) { x in
    (yStart: cos(x / 180 * .pi),
     yEnd: sin(x / 180 * .pi))
  }
}
.chartXScale(domain: -315...225)
.chartYScale(domain: -5...5)

5:55 - Visualize parametric functions

Chart {
  LinePlot(
    x: "x", y: "y", t: "t", domain: -.pi ... .pi
  ) { t in
    let x = sqrt(2) * pow(sin(t), 3)
    let y = cos(t) * (2 - cos(t) - pow(cos(t), 2))
    return (x, y)
  }
}
.chartXScale(domain: -3...3)
.chartYScale(domain: -4...2)

6:40 - Use Double.nan to represent no value

Chart {
  LinePlot(x: "x", y: "1 / x") { x in
    guard x != 0 else {
      return .nan
    }
    return 1 / x
  }
}
.chartXScale(domain: -10...10)
.chartYScale(domain: -10...10)

7:43 - Highly customized Chart

Chart {
  ForEach(model.data) {
    if $0.capacityDensity > 0.0001 {
      RectangleMark(
        x: .value("Longitude", $0.x),
        y: .value("Latitude", $0.y)
      )
      .foregroundStyle(by: .value("Axis type", $0.axisType))
    } else {
      PointMark(
        x: .value("Longitude", $0.x),
        y: .value("Latitude", $0.y)
      )
      .opacity(0.5)
    }
  }
}

8:00 - Homogeneously styled Chart

Chart {
  ForEach(model.data) {
    RectangleMark(
      x: .value("Longitude", $0.x),
      y: .value("Latitude", $0.y)
    )
    .foregroundStyle(by: .value("Axis type", $0.panelAxisType))
    .opacity($0.capacityDensity)
  }
}

8:23 - Vectorized plot for homogeneously styled chart

Chart {
  RectanglePlot(
    model.data,
    x: .value("Longitude", \.x),
    y: .value("Latitude", \.y)
  )
  .foregroundStyle(by: .value("Axis type", \.panelAxisType))
  .opacity(\.capacityDensity)
}

9:42 - Vectorized point plot API

Chart {
  PointPlot(
    model.data,
    x: .value("Longitude", \.x),
    y: .value("Latitude", \.y)
  )
}

10:26 - Vectorized plot modifiers

Chart {
  PointPlot(
    model.data,
    x: .value("Longitude", \.x),
    y: .value("Latitude", \.y)
  )
  .symbolSize(by: .value("Capacity", \.capacity))
  .foregroundStyle(
    by: .value("Axis type", \.panelAxisType)
  )
}

Swift Charts：ベクトルプロットと関数プロット

関連する章

リソース

関連ビデオ

WWDC23

WWDC22