Graph Art with Charts API – Beyond Data Visualization

Slide 1

Slide 1 text

Graph Art with Charts API try! Swift Tokyo 2025 Akihiko Sato Beyond Data Visualization

Slide 2

Slide 2 text

About Me Akihiko Sato 🧑💻 Software Engineer 🏢 DeNA Co., Ltd. ɹ @akkiee76 @akkie76

Slide 3

Slide 3 text

Are you using Charts APIʁ

Slide 4

Slide 4 text

WWDC 24 Swift Charts is updated 🎉

Slide 5

Slide 5 text

Swift Charts Update 📉 • LinePlot & AreaPlot API • Parametric Functions • Piecewise functions • Extensive Data Visualizations, etc.

Slide 6

Slide 6 text

But…

Slide 7

Slide 7 text

What can we actually do with it? 🤔

Slide 8

Slide 8 text

So… I decided to try… 💡

Slide 9

Slide 9 text

Graph Art with Charts API

Slide 10

Slide 10 text

My Graph Art Creations 1. Graph Garden 🌷 2. Happy Metrics 😊 3. One More Pixel 🖥 akkie76/swift-chart-canvas

Slide 11

Slide 11 text

Graph Garden 🌷 Charts APIs • LinePlot • AreaPlot Equations • Rose Curve (Petals & Leaves) • Sine Arctangent (Ground)

Slide 12

Slide 12 text

Graph Garden 🌷 var body: some ChartContent { LinePlot( x: "x", y: "y", t: "t", domain: 0...360 ) { t in calculateCurvePoint(angle: t) } .lineStyle(.init(lineWidth: 2)) .foregroundStyle(.pink) } func calculateCurvePoint(angle: Double) -> (Double, Double) { // Angle (degrees) → Radians let radians = angle * .pi / 180 let a = flowerSize let k = petalCount // Rose Curve: r = a * sin(kθ) let r = a * sin(k * radians) // Standard Rose Curve (x0, y0) let x0 = r * cos(rad) let y0 = r * sin(rad) // Scale Y-axis let scaleY = 0.45 let yScaled = y0 * scaleY // Tilt using shear transformation (Shear) let alpha = -0.4 let x = x0 + alpha * yScaled let y = yScaled return (x, y) }

Slide 13

Slide 13 text

Happy Metrics 😊 Charts APIs • AreaPlot • LinePlot Equations • Circle Equation

Slide 14

Slide 14 text

Happy Metrics 😊 var body: some ChartContent { AreaPlot( x: "x", yStart: "yStart", yEnd: "yEnd", domain: -radius...radius ) { x in let yStart = calculateY(angle: x, isUpper: true) let yEnd = calculateY(angle: x, isUpper: false) return (yStart, yEnd) } } func calculateY(angle: Double, isUpper: Bool) -> Double { let sign: Double = isUpper ? 1 : -1 let squaredDiff = max(0, radius * radius - angle * angle) return sqrt(squaredDiff) * sign }

Slide 15

Slide 15 text

FaceAreaPlot(radius: outlineRadius) .foregroundStyle(faceGradient) // Face gradient for the entire face var faceGradient: RadialGradient { RadialGradient( gradient: Gradient(stops: [ // Colors defined in an extension of Color .init(color: .paleYellow, location: 0.0), .init(color: .softYellow, location: 0.35), .init(color: .brightYellow, location: 0.6), .init(color: .orangeYellow, location: 1.0) ]), center: UnitPoint(x: 0.5, y: 0.2), startRadius: 0, endRadius: 180 ) } Happy Metrics 😊 Make up✨

Slide 16

Slide 16 text

One More Pixel 🖥 Charts APIs • RectanglePlot Techniques • Dithering Algorithm • Pixel Grid Mapping

Slide 17

Slide 17 text

One More Pixel 🖥 Chart { RectanglePlot( pixelData, x: .value("X", \.x), y: .value("Y", \.y), width: .ratio(1.0), height: .ratio(1.0) ) .foregroundStyle(by: .value("Index", \.index)) } .chartForegroundStyleScale( range: Gradient(colors: pixelData.map { $0.color }) ) .chartPlotStyle { $0.aspectRatio(1.5, contentMode: .fit) } .onAppear { // Load pixel data from a CSV file. if let csvURL = Bundle.main.url( forResource: "pixels", withExtension: "csv" ) { pixelData = loadCSV(from: csvURL) } }