Data visualization color choices

[Fazle-Jahangir]

Hi team,
I am assigning colors to channels represented by meter bars. From what I see, there is a total number of 10 colors in the data visualization library. Some Taskrouter customers can use up to 15 or more channels, for example. So there is a situation where we have to perhaps repeat the same set of colors in a round robin format after the first 10 channels.

The problem arrives with this second visualization (simulator) where we present the channels, represented by their colors, side by side. I want to avoid a scenario where we have 2 channels of the same color in this visualization. Example, SMS is red and so is channel number 14, Facebook messenger. So there would be two red bars in this meter which represent different channels, potentially confusing users. Example in the current mockup with channels not clashing in the same color.

There are logic we can implement such as only include first 10 channels in this simulator which will all have different colors, and ignore the remaining channels. A question for the Paste team is if there are other colors you would suggest for me to use outside of data vis or should I stick with the current palette? Thanks

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi team,

For scenarios where you need more than the 10 colors provided by the Paste Data Visualization library for differentiating between channels or categories, it's understandable that repeating colors could lead to confusion, especially in visualizations where those colors are presented side by side.

The Paste Data Visualization color suggestions section mentions the creation of 3 alternative color palettes to consider as an addition or replacement to the current data visualization palette. These palettes were tested with current and future data sets displayed in Console, aiming to address some of the limitations of the current palette, such as not having enough colors for the amount of data needed to display. These alternative palettes include red and green colors meant to be used on their own or as an addition after exhausting the 8 colors, and grays used as empty states.

Considering your situation, it might be beneficial to explore these alternative palettes for additional colors to avoid repetition. The alternative palettes are designed to be accessible against $color-background-body and next to each other, ensuring they meet accessibility standards while providing a broader range of options.

Here's a link to the Figma design where you can explore these alternative palettes: Twilio Data Visualization Library

If these alternative palettes still do not meet your needs for the number of distinct colors required, it's worth discussing with the Paste design systems team for further guidance. They might offer insights into how to best utilize the current palette or suggest additional strategies for color differentiation in complex visualizations.

Remember, when extending beyond the provided palettes, it's crucial to ensure that any additional colors you choose still comply with accessibility standards, particularly regarding contrast ratios and color blindness considerations.

Hope this helps!

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Paste Data Visualization color suggestions (updated: 08/07/2024, similarity score: 86%)
• Data Visualizations - Colors (updated: 07/01/2022, similarity score: 85%)
• Data Visualizations - Colors - Answer (updated: 07/01/2022, similarity score: 84%)

[serifluous]

Hey @Fazle-Jahangir ! A few things to consider here:

1. Our Meter doesn't currently support other colors. If you need it, please submit a dependency request here: https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l and also in the dependency sheet you can find in # twilio-rd-quarterly-planning on slack.
2. For the simulator visualization, you could repeat the same colors you've already used but apply a pattern fill (If you're going to use Highcharts for this, the documentation for that is here: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills ) This will likely be easier than finding another color that works accessibly with the other 10 colors. We're currently doing some work on tooling around updating our data viz palette, and this will likely be what we end up suggesting to teams that need more than 10 colors represented.