WWDC 2022: Discover the Swift Charts framework
Find hereafter a detailed summary of four videos that belong to a taxonomy of some WWDC footages.
The original videos are available on the Apple official website (session 10136, session 10137, session 110340 and session 110342).
"Say hello to Swift Charts — a flexible framework that helps you create charts entirely in SwiftUI that look and feel right at home on all Apple platforms.
Discover how you can use compositional syntax to make informative, delightful, and accessible charts with less code.
We'll share the building blocks for making visualizations with Swift Charts, and explore how you can change your charts' design with a simple modifier.
We'll also take you through the latest updates to Xcode Previews to help you chart a path toward an engaging experience."
"Dive deep into data visualizations: Learn how Swift Charts and SwiftUI can help your apps represent complex datasets through a wide variety of chart options.
We'll show you how to plot different kinds of data and compose marks to create more elaborate charts.
We'll also take you through Swift Charts' extensive chart customization API to help you match the style of your charts to your app."
"Learn how to design focused, approachable, and accessible charts.
We'll show you how to design great charts with clear marks, axes, descriptions, interaction, and color and help you create useful experiences for everyone."
"Learn how you can enhance your app with charts to communicate data with more clarity and appeal.
We'll show you when to use charts and how they work together in a chart design system."
Most of the illustrations are parts of the Apple presentations and may be available at the Resources section inside the Overview sheet of each video.
Hereafter, the underlined elements lead directly to the playback of the WWDC video at the appropriate moment.
Design #
When to use charts? #
The type of chart is based on the crucial priority to keep focus on the displayed information to be easily understood by the user.
How to use charts? #
Some important elements must be taken into account for providing an efficient chart.
Adding dynamic functionalities may be an interesting way of highlighting some specific information.
When interactivity is an integral part of a chart, the height and width thereof should be scaled in line with the user experience in order to smoothly display the different data types.
What is an effective chart? #
What are the most significant insights for designing an efficient chart?
The design process #
Marks represent the visual elements for each item in the data.
Options for a mark may be various but the goal of the chart will define the appropriate one.
Regarding the accessibility, the use of a chart by impaired people is also highly possible thanks to the SwiftUI API's possibilities.
Adjusting the ranges of values is definitely important according to the goal to be reached.
It's also crucial to adapt the density of grid lines and labels.
As regards the accessibility, including the Audio Graphs feature should facilitate the use of a chart for impaired people.
Interactions are a great opportunity to enhance the user experience through the different ways to introduce data on the same chart.
One of the most obvious examples is the mark selection to find out the value thereof.
This kind of interaction must also be designed and implemented with all the categories of users in mind.
And looking more closely at VoiceOver, it's crucial to put a special attention to the labels authoring.
Carrying information through colors may be important, but it mustn't be the only way, quite the contrary.
It's also essential to assist the comprehension regarding the meaning of the displayed colors.
Finally, balancing the visual height and choosing distinct colors are important steps to be embedded in the design...
... including the respect of the user settings with an express look at those regarding the accessibility.
The chart design system #
Designing one's forms is also possible inside a careful frame so as to immediately assist the comprehension regarding the displayed information.
Differences between charts should be emphasized through basic manipulations that keep the user's attention to the slightest details.
Build #
Introduction #
Some examples are explained in details to assist the comprehension of a chart creation.
Combine the data into one multiseries line chart.
Mark properties #
The Swift Charts framework is based on three main types of data...
... that may be combined with the six different mark types and the six mark properties.
Following this rationale could lead to a scale adaptation and a colour modification for some rendered information.
Using data within the mark properties is the basis for creating a chart.
The creation of charts through marks and their properties leads to various and diversified styles.
These properties are easy to be adapted according to the way for displaying the information.
Mark combinations #
Combining marks is the appropriate way for creating more complex charts.
Customizations #
Customizations of some chart elements are possible.
Swift Charts also encompasses a ChartProxy to access the scales and plot area of a chart.
This new structure permits the storage of data in state and drives the chart rendering thereof through a hover or show data effects that highlight its power.
Accessibility #
VoiceOver and the Audio Graphs feature are also taken into account in this new framework by using various native elements.
Xcode #
The data visualization in Swift Charts is highly facilitated thanks to the new variant feature in Xcode.
