[go: up one dir, main page]

Page MenuHomePhabricator

[EPIC] Define and add data visualisation guidelines and a set of library components to Codex
Open, Needs TriagePublic

Description

Define and add a set of data visualisation library components to Codex Design System

Acceptance criteria
  • 1. Collect current implementations across products
  • 2. Create comparative review of data viz guidelines on other design systems
  • 2. Identify and prioritize a "base" set of chart types to include
  • 3. Define guidelines on appearance and interactivity for those components - include guidelines for color accessibility, RTL (see T326308) - see draft on notion
  • 4. Add to Codex
1. Collect current implementations across products

Wikistats currently uses Vue in its implementation of different charts:

image.png (1×2 px, 356 KB)

Datavis audit of Wikimedia sites can be viewed in this Figma file.

2. Create comparative review of data viz guidelines on other design systems

Can be viewed in this Figma file.

Event Timeline

We might also want to add a dataviz-specific color palette to provide additional colors beside our base UI colors. This article for example shares great examples of color blindness-friendly palettes. There's also this website about color palettes for cartography.

On the topic of dataviz guidelines we might also get some inspiration from this collection of existing data visualization guidelines put together by the Data Visualization Society.

We might also want to add a dataviz-specific color palette to provide additional colors beside our base UI colors. This article for example shares great examples of color blindness-friendly palettes. There's also this website about color palettes for cartography.

+1 to this suggestion. Currently we pretty much only use the blue Accent colour, which is the same colour for buttons, links, etc which can be quite limiting for datavis (eg, pie , stacked bar charts, comparison charts), and potentially may get distracting if half a page is in this colour.

We might also want to add a dataviz-specific color palette to provide additional colors beside our base UI colors. This article for example shares great examples of color blindness-friendly palettes. There's also this website about color palettes for cartography.

+1 to this suggestion. Currently we pretty much only use the blue Accent colour, which is the same colour for buttons, links, etc which can be quite limiting for datavis (eg, pie , stacked bar charts, comparison charts), and potentially may get distracting if half a page is in this colour.

Yes I agree. Data visualisation, similar to illustration, has wider needs so should have more flexibility than the simplified UI palette provides.

Thanks for sharing those resources @AAlhazwani-WMF.

KieranMcCann renamed this task from Define and add a set of data visualisation library components to the DSG to Define and add data visualisation guidelines and a set of library components to the DSG.Jan 31 2023, 11:18 AM
KieranMcCann updated the task description. (Show Details)

@KieranMcCann I've found another real use case for charts:

Captura de Pantalla 2023-02-07 a las 11.34.24.png (1×2 px, 1 MB)
Captura de Pantalla 2023-02-07 a las 11.42.41.png (1×2 px, 1 MB)

You can check it when you Compare selected revisions in the "View history" page. Then you need to select the "Browse history" and this interactive chart opens.

Volker_E renamed this task from Define and add data visualisation guidelines and a set of library components to the DSG to Define and add data visualisation guidelines and a set of library components to Codex.Feb 14 2024, 3:06 PM
Volker_E edited projects, added Codex; removed Wikimedia Design Style Guide.
Volker_E updated the task description. (Show Details)
Volker_E edited subscribers, added: DTorsani-WMF; removed: KieranMcCann.
CCiufo-WMF renamed this task from Define and add data visualisation guidelines and a set of library components to Codex to [EPIC] Define and add data visualisation guidelines and a set of library components to Codex.Mar 8 2024, 5:24 PM
CCiufo-WMF added a project: Design.