[community-group] Suggestion: colorList type for DataViz (#228)

drwpow has just created a new issue for https://github.com/design-tokens/community-group:

== Suggestion: colorList type for DataViz ==
## Proposal

I’d love to see a new composite type that essentially groups an **array of colors** that can be useful for data visualization, e.g.:

```json
{
  "color": {
    "category10": {
      "$type": "colorList",
      "$value": [
        { "$value": "#1f77b4" },
        { "$value": "#ff7f0e" },
        { "$value": "#2ca02c" },
        { "$value": "#d62728" },
        { "$value": "#9467bd" },
        { "$value": "#8c564b" },
        { "$value": "#e377c2" },
        { "$value": "#7f7f7f" },
        { "$value": "#bcbd22" },
        { "$value": "#17becf" }
      ]
    }
  }
}
```

**Example: all of D3’s Category colors could be lists**

<img width="453" alt="CleanShot 2023-08-28 at 10 41 46@2x" src="https://github.com/design-tokens/community-group/assets/1369770/50b001df-972e-4b34-a5ac-0268f157b9c9">

## Definition

The defining factors for a `$type: "colorList"` are:

1. I need an **ordered list** of colors where the ordering matters (e.g. one color is “first”, one is “second”, and the ordering should be preserved)
2. The collection _does_ need to be a token itself as the palette as a whole does not work without all the colors
3. However, the values **DO NOT** relate to one another (e.g. they are not a [color ramp](https://medium.com/thinking-design/adaptive-color-in-design-systems-7bcd2e664fa0))
4. Further, these colors **DO NOT** form a gradient (sidenote: data visualization does have the idea of “gradient” palettes like [Turbo](https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html) but that’s a different usecase entirely, and often those visualizations need to calculate intermediary values which suggest they are really just `$type: "gradient"` tokens)
5. Lastly, using a traditional token group (an object with keys) isn’t sufficient because there’s no standard way to preserve **ordering** (colors need to be pulled in a specific, deterministic order) and **length** (I need to know how many colors are in this palette, which isn’t possible in a group as there may be subgroups)

The main usecase is for categorical data visualization such as colors for bar graphs, line charts, etc. etc.

I believe data visualization palettes _should_ be part of a design system and therefore be tokenized. The New York Times, FiveThirtyEight, the Washington Post, and others all have well-established principles of dataviz that are central to their design system. It makes sense that this should be preserved in a token specification for this.

### Naming

I do not care about the name `colorList`. I was only trying to avoid using the term “group” as that has other meanings in this spec. “Palette” is also too generic, and could refer to any arbitrary grouping. “List,” however, is a generic computing term for an ordered collection of items. “Array” would work, but I feel that’s less natural to say, and often doesn’t mean anything to non-programmers.

Open to suggestions / alternate names here.

## Alternative Approaches

A “hack” that is workable today is having recommended way to set groups as arrays, e.g.:

```json
{
  "color": {
    "category10": {
      "0": { "$type": "color", "$value": "#1f77b4" },
      "1": { "$type": "color", "$value": "#ff7f0e" },
      …
    }
  }
}
```

However I would not be a fan of this approach because:

- ❌ It does not restrict all tokens be of the same type
- ❌ It does not prevent subgroups
- ❌ At least in JavaScript-land, objects are not meant to preserve ordering (`0` appearing before `1` is never guaranteed, and it would have to be on the tool itself to manually sort each time, which isn’t clear from the spec it should do).

Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/228 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 28 August 2023 15:05:37 UTC