Add Data Viz Foundation #5709
Add Data Viz Foundation #5709
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: David Oyedeji <[email protected]>
|
|
||
| Choosing the best chart for your use case depends on: | ||
|
|
||
| **The chart’s function** |
There was a problem hiding this comment.
@amritadesmet not sure what format you wanted here but there currently isn't a line between the titles the guidance, personally it doesn't provide a good hierarchy
|
|
||
| ### Color contrast | ||
|
|
||
| Users with visual impairments should be able to fully comprehend data sets that are represented by different colors. To cater for a broad spectrum of visual impairments, you must use the categorical colors which are WCAG 4.5:1 compliant. |
There was a problem hiding this comment.
Is this true (4.5:1)? I thought the requirement was 3:1 and also our categorial colors only meet 4.5:1 against primary backgrounds. Secondary and tertiary background fall short.
site/docs/foundations/data-visualization/chart-accessibility.mdx
Outdated
Show resolved
Hide resolved
site/docs/foundations/data-visualization/chart-accessibility.mdx
Outdated
Show resolved
Hide resolved
site/docs/foundations/data-visualization/chart-accessibility.mdx
Outdated
Show resolved
Hide resolved
| - Direct labelling where possible | ||
| - Adding a border with at least a 3:1 contrast ratio to distinguish between segments | ||
|
|
||
| You can show chart data in a table or list nearby, in an overlay, or on another screen as a last resort to support screen readers. If the essential information is in a separate screen, then it could disrupt the cohesive flow of information. Screen reader users would need to navigate back and forth between the two parts of the text alternative for the complex image, which could disrupt the flow of information. |
There was a problem hiding this comment.
This paragraph seems random under the color order heading without an intro. Also I'm not entirely sure what it's trying to say, @jake-costa are text alternatives an actual last resort or a helpful addition as it can help screen readers and really all users comprehend the information?
site/docs/foundations/data-visualization/chart-accessibility.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| ### Overlapping data series | ||
|
|
||
| Some chart types including area, bubble and scatter have data series that overlap in certain use cases. Having too many data series in your chart can add complexity and make it harder for users to extract important information. In cases with multiple overlapping areas, always maintain at least a 3:1 color contrast between any 2 overlapping areas. |
There was a problem hiding this comment.
| Some chart types including area, bubble and scatter have data series that overlap in certain use cases. Having too many data series in your chart can add complexity and make it harder for users to extract important information. In cases with multiple overlapping areas, always maintain at least a 3:1 color contrast between any 2 overlapping areas. | |
| Some chart types, including area, bubble and scatter, have data series that overlap in certain use cases. Having too many data series in your chart can add complexity and make it harder for users to extract important information. In cases with multiple overlapping areas, always maintain at least a 3:1 color contrast between any two overlapping areas. |
site/docs/foundations/data-visualization/chart-accessibility.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| ## Line patterns | ||
|
|
||
| Color shouldn’t be the only visual cue. Include other visual cues such as text, patterns, or symbols to help the user differentiate between different data sets. Patterns improve readability, especially for those with color vision requirements. |
There was a problem hiding this comment.
symbols are covered below in the symbols sections and do we need a separate section for text labels?
|
|
||
| ## Pattern fills | ||
|
|
||
| Consider using line patterns for multiple line series or pattern fills for 2-dimensional shapes, such as bars and slices. Pattern fills are always black and applied to solid categorical colors for charts. They’re beneficial in scenarios in which there is only one visual distinction between data points. |
There was a problem hiding this comment.
| Consider using line patterns for multiple line series or pattern fills for 2-dimensional shapes, such as bars and slices. Pattern fills are always black and applied to solid categorical colors for charts. They’re beneficial in scenarios in which there is only one visual distinction between data points. | |
| Consider using line patterns for multiple line series or pattern fills for 2-dimensional shapes, such as bars and slices. Pattern fills are always black and applied to solid categorical colors for charts. They’re beneficial in scenarios in which there's only one visual distinction between data points. |
|
|
||
| ## Pattern fills | ||
|
|
||
| Consider using line patterns for multiple line series or pattern fills for 2-dimensional shapes, such as bars and slices. Pattern fills are always black and applied to solid categorical colors for charts. They’re beneficial in scenarios in which there is only one visual distinction between data points. |
There was a problem hiding this comment.
For the bit about "only one visual distinction between data points", we should probably give examples because right now I could say a visual distinction between the points in the pie is the width of the segments.
site/docs/foundations/data-visualization/chart-accessibility.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| ## Marker symbols | ||
|
|
||
| In addition to line patterns and pattern fills, you can add shape or icon markers to make data points more distinctive. Varied marker symbols help differentiate lines. Marker symbols have a white border in both light and dark mode for accessibility. |
There was a problem hiding this comment.
"for accessibility", we should be more specific
There was a problem hiding this comment.
Also is this too specific to the implementation (white border)
|
|
||
| ## Marker symbols | ||
|
|
||
| In addition to line patterns and pattern fills, you can add shape or icon markers to make data points more distinctive. Varied marker symbols help differentiate lines. Marker symbols have a white border in both light and dark mode for accessibility. |
There was a problem hiding this comment.
Also reading this with the diagram makes me think marker symbols only apply to line charts but scatter plots are a good use-case too
|
|
||
| Grid lines are vertical or horizontal lines that divide a chart, helping users read data values and make visual comparisons. | ||
|
|
||
| When possible, keep the number of grid lines to a minimum to prevent your chart becoming cluttered. Some charts require both horizontal and vertical grid lines, i.e. bubble and scatter chart. This is built into the Salt chart package and doesn’t require manual adjustment. |
There was a problem hiding this comment.
The last sentence, is tricky. The grid lines in both directions are enabled by the developer applying a class name, this could be seen as manual adjustment. Thoughts?
There was a problem hiding this comment.
Also are they actually "required" ?
|
|
||
| ### Usage | ||
|
|
||
| The legend uses symbols and labels to identify each data series and its corresponding segment within the chart. In Salt, the legend is an opt-in feature. |
There was a problem hiding this comment.
I don't think we need to reference Salt's implementation here I would just include it in the into e.g. "Legends are optional elements in a chart that ..."
|
|
||
| ### Legend layouts | ||
|
|
||
| Position your legend where it’s most appropriate in your layout, considering the number of legend items. In Salt, chart legends are preset to be vertical and right-aligned. Use a vertical layout when displaying many legend items, if space allows. |
There was a problem hiding this comment.
Do we need to mention Salt's implementation here? Not sure
|
|
||
| Consider the purpose and impact of color in your chart. Color can be used to: | ||
|
|
||
| **Show relationships** |
There was a problem hiding this comment.
Same comment about the hierarchy
|
|
||
| ## Categorical palette | ||
|
|
||
| The categorical palette is designed to visualize distinct groups of items. It features contrasting colors with different hues, indicating the lack of visual relationship between the data sets. The categorical palette achieves a minimum of 3:1 contrast against each of the 3 supported background colors in Salt - in both light and dark mode. |
There was a problem hiding this comment.
This is related to the comment in chart accessibility around the 4.5:1 compliance
Co-authored-by: Josh Wooding <[email protected]>
Co-authored-by: Josh Wooding <[email protected]>
Addressing some of Josh's comments
Co-authored-by: Josh Wooding <[email protected]>
Closes #5193