Swift Charts: Vectorized and function plots

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)
  )
}