Vega-Lite visualizations need to be optimized for design system color palette

[LibbyUX]

Notes

• Currently, there is no easy way for me to customize the color scheme of Vega-Lite visualizations. Michael Ginda and I request all visualizations be optimized to match the color theme of the web app. All visualizations being used for Career Profile pages will need color theming modified to look more cohesive with the website.
• There is one visualization not needing color modifications. The Work Task list visualization uses our TrustedAI Material Design color palette:

Resources

• Vega-Lite: Maps (Geographic Displays)
• TrustedAI Color Palette: Figma Design System
• Mobile Career Profile Page: Figma Design File
• Tablet Career Profile Page: Figma Design File
• Desktop Career Profile Page: Figma Design File

[bherr2]

Btw, we can potentially define color schemes for vega and vega lite using this: https://vega.github.io/vega/docs/schemes/ or choose one of those available.

[bherr2]

Also vega themes: https://github.com/vega/vega-themes :-)

[LibbyUX]

@bherr2 This is perfect! Thanks so much for sharing.

Should we use Vega Schemes, please see the following preferences:

Sequential Single-Hue Schemes

• Purple

Sequential Multi-Hue Schemes

• Purple Blue

Diverging Schemes

• Purple Orange