Page MenuHomePhabricator

Evaluate visual design needs for charts
Closed, ResolvedPublic3 Estimated Story Points

Description

Context

Charts are inherently visual representations of data. There are a few questions we need to answer to help determine what assets and resources design will need to provide for our charting library.

Open questions

  1. What is the maximum amount of data points that could be represented in one chart? This will determine how many colors/patterns need to be designated to the charting library.
  2. In what order should we default the colors/patterns for visualizations based on how many data points there are in any given chart?
  3. What is the darkest background color that a chart might appear on? Or will we define the background color for all charts?
  4. Does text ever appear in color within any given chart or are only shapes/graphics represented in color on all charts?
  5. Do we feel strongly about every color for all visualizations/data points being visually accessible if we incorporate a patterned high contrast mode?
  6. We currently support width and height parameters for charts that allow any value. Should we scope this? If not how does this alter our ability to make charts display correctly on different resolutions?
  7. Please review the syntax for creating a chart - do the parameters make sense? How should localization work here (if at all)?

Event Timeline

CCiufo-WMF moved this task from Backlog to Backlog on the Charts board.
CCiufo-WMF set the point value for this task to 3.Sep 9 2024, 6:29 PM
CCiufo-WMF moved this task from Backlog to Sprint 6 on the Charts board.
CCiufo-WMF edited projects, added Charts (Sprint 6); removed Charts.

What is the maximum amount of data points that could be represented in one chart?
This will determine how many colors/patterns need to be designated to the charting library. 10 colors seems like a good default maximum for now. For example a pie chart at a mobile resolution with 20 different colors might be unreadable. Different charts might have different amounts but we should likely lean on the same maximum limit for all them.

Check with @CCiufo-WMF . We think it would be useful to set a max limit, and choose a color palette for that limit and wait for the problem to arise.

We likely need to allow for customization but should likely have some good defaults e.g. political parties

In what order should we default the colors/patterns for visualizations based on how many data points there are in any given chart?

The order is likely going to depend on the number of data points and we will want these colors to be visually distinguishable as much as possible. We might use different colors for different number of data points with that in mind. For example 2 data points might be orange and blue. For now let's not worry about customization until necessary.

Does text ever appear in color within any given chart or are only shapes/graphics represented in color on all charts?

It could but https://echarts.apache.org/examples/en/index.html#chart-type-bar seems to suggest we have full control on this. Although charts seem to have default patterns and colors we should define our own.

Do we feel strongly about every color for all visualizations/data points being visually accessible if we incorporate a patterned high contrast mode?

Looking at charts like https://en.wikipedia.org/wiki/Opinion_polling_for_the_2024_United_Kingdom_general_election if you have color blindless you can't tell which colors are which. In a bar chart, the legend can be in the same order as the data points. However for a line chart like https://en.wikipedia.org/wiki/Opinion_polling_for_the_2024_United_Kingdom_general_election the legend doesn't mean it is going to be the highest one so it's impossible to know which one is which for color blind users Pattern come in handy here as you can rely on a pattern here.

Is this technically possible with our library?
It looks like we have this for bar charts:
https://github.com/apache/echarts/issues/14047

For line charts, particularly people with cognitive disabilities too many lines as in the bottom 3 lines in this is also a challenge:

image.png (356×800 px, 178 KB)

Having the legend at the end of the line can help a little bit.
Being able to download the chart as an SVG would allow a way around this.

Being able to hover over legends and for the chart to update so other lines disappear or become opaque.

Here are the implementation tasks for types we will be building out soon, and we should add design requirements to those before taking them on.
Pie charts and bar charts are the first that we plan to work on : T373343: Add support for basic pie charts T373345: Add support for basic bar charts

We currently support width and height parameters for charts that allow any value. Should we scope this? If not how does this alter our ability to make charts display correctly on different resolutions?

Charts are going to be most beneficial if they span the full width of the article. A pie chart might be useful if not full width, e.g. floated to the right or left. So this could depend on the type of the chart
With this in mind we probably shouldn't provide full customization for width.
For height, we could set a default based on chart type and should be customizable as some charts may benefit from being tall.

Please review the syntax for creating a chart - do the parameters make sense? How should localization work here (if at all)?

Link to example: https://commons.wikimedia.beta.wmflabs.org/w/index.php?title=Data:1993_Canadian_federal_election.chart&action=edit

What is the darkest background color that a chart might appear on? Or will we define the background color for all charts?

  • We want to think about whether charts should appear in a frame
  • Currently charts do not look good in dark mode. Do we want different colors for dark mode or the same visual ?

What is the maximum amount of data points that could be represented in one chart?
This will determine how many colors/patterns need to be designated to the charting library. 10 colors seems like a good default maximum for now. For example a pie chart at a mobile resolution with 20 different colors might be unreadable. Different charts might have different amounts but we should likely lean on the same maximum limit for all them.

Check with @CCiufo-WMF . We think it would be useful to set a max limit, and choose a color palette for that limit and wait for the problem to arise.

I do think setting a max limit of 10 would be reasonable, at least to start. It would be easier to remove this later rather than add it in.

@CCiufo-WMF after chatting to Derek we think these are good next steps for next sprint:
We think we should tweak the existing line chart, and work on pie charts to see how those design decisions apply to other charts.

T375237: [Timebox/Spike] Limit number of data points in chart types
T373343: Add support for basic pie charts
T375233: All charts should require a legend
T375234: Define color scheme for charts
T375235: Apply default styling for charts
T375240: Limit size of charts

We think this will provide a good foundation for building other types of chart e.g. bar chats.

@CCiufo-WMF I spoke with @Jdlrobson and refined the tasks listed above to either have a linked design specific task or a new, more holistic design task. The design specific tasks are mentioned below.

T375234: Define color scheme for charts
T375313: Define pattern/node scheme for accessible charts
T375235: Apply default styling for charts
T375312: Define sizing options and responsive behavior for charts

@DTorsani-WMF @Jdlrobson sounds good, we'll sort out those tasks at the next sprint planning.