Graph Art with Charts API – Beyond Data Visualization

Graph Art with Charts API – Beyond Data Visualization

Swift's Charts API is more than just a tool for data visualization—it's a canvas for creative expression. In this session, discover how mathematical equations and plotting techniques transform into evocative visual art.

From the delicate patterns of Graph Garden to the playful charm of Happy Metrics and the pixel precision of One More Pixel, explore innovative ways to blend technology and creativity.

Join us and see how numbers can paint a picture—at try! Swift Tokyo 2025.

Sample code available on GitHub: github.com/akkie76/swift-charts-canvas

Transcript

1. Graph Art with Charts API try! Swift Tokyo 2025 Akihiko Sato Beyond Data Visualization
2. About Me Akihiko Sato 🧑💻 Software Engineer 🏢 DeNA Co., Ltd. ɹ @akkiee76 @akkie76
3. Are you using Charts APIʁ
4. WWDC 24 Swift Charts is updated 🎉
5. Swift Charts Update 📉 • LinePlot & AreaPlot API • Parametric Functions • Piecewise functions • Extensive Data Visualizations, etc.
6. But…
7. What can we actually do with it? 🤔
8. So… I decided to try… 💡
9. Graph Art with Charts API
10. My Graph Art Creations 1. Graph Garden 🌷 2. Happy Metrics 😊 3. One More Pixel 🖥 akkie76/swift-chart-canvas
11. Graph Garden 🌷 Charts APIs • LinePlot • AreaPlot Equations • Rose Curve (Petals & Leaves) • Sine Arctangent (Ground)
12. 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) }
13. Happy Metrics 😊 Charts APIs • AreaPlot • LinePlot Equations • Circle Equation
14. 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 }
15. 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✨
16. One More Pixel 🖥 Charts APIs • RectanglePlot Techniques • Dithering Algorithm • Pixel Grid Mapping
17. 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) } }
18. Imagine what you can create ✨ What kind of graph art would you design ?
19. Now, it's your turn 🚀
20. Are you Swift enough? The possibilities of data art are limitless!
21. Thank you! 🙌 akkie76/swift-charts-canvas