Web docs: Patterns, color usage for data visualization (HDS-3292) (#2255)

Co-authored-by: Jory Tindall <jory.tindall@hashicorp.com>

Author: KristinLBradley

website/docs/patterns/data-visualization/index.md

@@ -0,0 +1,14 @@
+---
+title: Data visualization
+description: Guidelines and best practices for data visualization.
+caption: Guidelines and best practices for data visualization.
+previewImage: assets/illustrations/patterns/data-visualization-color-usage.jpg
+navigation:
+keywords: ['charts', 'color', 'data', 'palette']
+---
+
+<section data-tab="Color usage">
+  @include "partials/guidelines/specifications.md"
+  @include "partials/guidelines/accessibility.md"
+  @include "partials/guidelines/color-usage.md"
+</section>

website/docs/patterns/data-visualization/partials/guidelines/accessibility.md

@@ -0,0 +1,19 @@
+## Accessiblity considerations
+
+Do not rely upon color as the sole means for conveying information in charts (or in general). To make charts accessible, combine color with another means of distinction. This could be the use of patterns or symbols combined with or instead of colors. Lightness vs. darkness can also serve as a secondary distinction; however, the visual difference between shades must be large enough to be clearly perceived. You can also add text, such as labels or descriptions of the visual information in the chart.
+
+Adding a thin separating line between adjacent colors, such as a one-pixel white border is helpful to visually distinguish areas but should be combined with at least one of the above recommendations.
+
+### Accessible chart examples
+
+Clearly labeling elements within a chart or graph is very explicit and can enhance the experience for all users.
+
+![Data visualization showcasing labels](/assets/patterns/data-visualization/color-usage/data-visualization-ally-label.png)
+
+Using symbols to differentiate between elements removes the reliance on color alone.
+
+![Data visualization showcasing symbols](/assets/patterns/data-visualization/color-usage/data-visualization-ally-symbol.png)
+
+Incorporating patterns with color further differentiates elements.
+
+![Data visualization showcasing patterns](/assets/patterns/data-visualization/color-usage/data-visualization-ally-pattern.png)

website/docs/patterns/data-visualization/partials/guidelines/color-usage.md

@@ -0,0 +1,49 @@
+## Color usage
+
+When creating data visualizations, care should be taken to select colors geared towards the type of data being presented. General color palettes created for web UIs and/or marketing purposes are not always suitable as the colors can lack contrast and distinguishability or else be visually unsuitable when used together in a data context. Keep in mind that color choice can also impact meaning.
+
+**There are three main types of color palettes used for data visualization:**
+
+1. Categorical palettes
+2. Sequential palettes
+3. Diverging palettes
+
+### Categorical palettes
+
+Use for presenting categorical data that has no intrinsic order, such as a pie or donut chart. Also used for multi-line charts, area charts, stacked or grouped bar charts, etc.
+
+**Categorical palettes should:**
+
+* Use distinct colors.
+* Be limited to a max of 10 colors.
+* Be distinguished primarily by hue. (For accessibility, also use patterns, symbols, or text.)
+* Avoid problematic color pairs (e.g., red-green, an issue for those with color blindness).
+
+![Color usage for categorical data visualization](/assets/patterns/data-visualization/color-usage/data-visualization-categorical.png)
+
+### Sequential palettes
+
+Use for presenting quantitative or inherently ordered values in a continuum. Useful for heat maps and grouped horizontal bar charts comparing sequential groups such as age ranges, etc.
+
+**Sequential palettes should:**
+
+- Vary lightness or hue to create a graduated color sequence (e.g., light blue to dark blue, blue to yellow)
+- Ensure enough contrast between the lightest and darkest colors to make differences easily perceivable.
+
+![Color usage for sequential data visualization](/assets/patterns/data-visualization/color-usage/data-visualization-sequential.png)
+
+A graduated color sequence can distinguish elements in visualizations without inherent axes or directions, such as maps or geographic representations.
+
+![Color usage using a graduated color sequence](/assets/patterns/data-visualization/color-usage/data-visualization-graduated-sequence.png)
+
+### Diverging palettes
+
+Use for presenting two sequences of ordered values with a shared central value. Useful for diverging bar charts, horizon charts, heatmaps, etc.
+
+**Diverging palettes should:**
+
+- Vary lightness to create two graduated color sequences.
+- Contrast the two color sequences by using different hues.
+- Use lighter values for colors converging towards the center.
+
+![Color usage for diverging data visualization](/assets/patterns/data-visualization/color-usage/data-visualization-diverging.png)

website/docs/patterns/data-visualization/partials/guidelines/specifications.md

@@ -0,0 +1,5 @@
+!!! Info
+
+HDS does not yet include color palettes specific to data visualization. The following guidelines should be considered as general best practices when designing your own color palettes. If using HDS colors, we recommend combining with use of patterns.
+
+!!!