[docs] Update data viz colors (#756)

* Update data-visualization.mdx * Update to use storybook iframe instead
primer · Apr 15, 2024 · 1374df2 · 1374df2
1 parent f330015
commit 1374df2
Showing 1 changed file with 6 additions and 13 deletions.
diff --git a/content/ui-patterns/data-visualization.mdx b/content/ui-patterns/data-visualization.mdx
@@ -45,20 +45,13 @@ Stacked bar charts and progress bars should have a high contrast divider line be
 
 Chart / visualization marks need to be at a 3:1 ratio with the background.
 
-### Our set of color values
+### Our color values
 
-When stacking multiple colors for chart marks, draw in order from the following colors.
-
-| Primary chart marks \| 1 - 7 datasets                                                 | Secondary chart marks \| 8 - 16 datasets                                              |
-| :------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------ |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.blue.5) `scale.blue.5`     | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.blue.7) `scale.blue.7`     |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.green.4) `scale.green.4`   | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.green.6) `scale.green.6`   |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.orange.4) `scale.orange.4` | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.orange.6) `scale.orange.6` |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.gray.6) `scale.gray.6`     | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.gray.7) `scale.gray.7`     |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.pink.5) `scale.pink.5`     | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.pink.8) `scale.pink.8`     |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.yellow.4) `scale.yellow.4` | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.yellow.6) `scale.yellow.6` |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.red.5) `scale.red.5`       | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.red.7) `scale.red.7`       |
-| ![""](https://swatch-sid.vercel.app?mode=light&token=scale.purple.5) `scale.purple.5` | ![""](https://swatch-sid.vercel.app?mode=light&token=scale.purple.7) `scale.purple.7` |
+<StorybookEmbed
+  baseUrl="https://primer.style/primitives/storybook/"
+  stories={[{id: 'color-datavis--highcharts-accent-colors'}]}
+  height="545"
+/>
 
 **Note:** There aren’t clear rules on contrast between chart mark colors. We try our best to have reasonable contrast between elements so that they are distinguishable, because specific colors look similar for some types of colorblindness. (e.g. blue and purple look visually similar to some colorblind users). Again, this is where the high contrast divider line becomes helpful for bar charts and progress bars.