Data Viz Colors Design

[cathystoli]

Summary

Establish a few sets of Categorical and Sequential colors that can be used across the SDS data visualization components, starting with CZ ID Heatmap, cellxgene Dot Plot, CZ ID Stacked Bar Chart. This will save teams time by eliminating the need to find their own colormaps for their data visualizations and instead rely on pre-vetted ones from the SDS.

Project Plan

Intended Outcome

• Learn about best practices for data visualization colors and selecting colormaps for projects
• Design, Spec, and Document pre-established sets of colors that teams can use in their data visualizations that have been vetted for effectiveness, accessibility, and ability to sit well together visually
  • Document colormap best practices in SDS Docs (Zeroheight) in sub-section under color section in ‘Bases’
• Colormaps live in a code file that can be imported into project codebases
• Creation of a data visualization color picker ‘component’ that teams can use in conjunction with their data visualization components for dynamically selecting colors based on the needs of the data visualization.

Priorities of problems to solve for:

1. It is easy for teams to implement a color scheme for their data visualizations with colors and patterns that are user friendly and easy to implement
2. Colors are easy to interpret
3. Reducing the amount of times that colors are very similar but mean very different things

How it will work

• When selecting categorical colors, ensuring that the color picker is ‘smart’ enough to select colors that are spaced far enough apart so as to maintain visual differentiation between categories
• Products’ data visualization components must be able to consume the colors output by the data visualization color picker component.

Tasks

• [x] Assess data visualization color needs across products
• [x] Research best practices for colormap selection by data visualization type and required number and type of of data point
• [x] Design data visualization colormaps based on number and type of data points needed that visually ‘work’ well when used together
  • Must ‘work’ when combining categorical and linear colors in the same data visualization
  • Have multiple colormap options meet the needs of a range of data points (ex: 0-10 data points, 10-20 data points, 20+ data points, etc.)
• [ ] Document best practices for selecting data visualization colors
  • Provide guidance to designers / product teams to help guide them in picking colormaps for their data visualization needs, and required number and type of data points
• [ ] Collaborate with engineering to build a data visualization color picker component, so that product teams can:
  • Select a colormap to source data visualization colors from, whether categorical or sequential
  • Indicate how many colors are needed (static or dynamic based on user input)
  • Integrate chosen colors into products’ data visualization components

Documents

Epic link: #315