Incorrect Color for Ordinal Fields

[kanitw]

From vega/altair#245, using ordinal fields with ordinal color seems to be incorrect.

[kanitw]

Using "ordinal" without custom domain doesn't produce the right order for color scale.

{
  "data": {
    "values": [
      {"a": "A","b": 28, "c": "x-small"}, {"a": "B","b": 55, "c": "small"}, {"a": "C","b": 43, "c": "x-large"}, {"a": "D","b": 13, "c": "large"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "ordinal"}
  }
}

Thus, we should add custom domain.

{
  "data": {
    "values": [
      {"a": "A","b": 28, "c": "x-small"}, {"a": "B","b": 55, "c": "small"}, {"a": "C","b": 43, "c": "x-large"}, {"a": "D","b": 13, "c": "large"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "ordinal", "scale": {"domain": ["x-small", "small", "large", "x-large"]}}
  }
}

However, this causes two problems:

1. It makes the output color all black since we use linear color scale for ordinal data by default.
2. The custom domain has no effect, probably due to the color_legend we have to produce.

{
  "data": {
    "values": [
      {"a": "A","b": 28, "c": "x-small"}, {"a": "B","b": 55, "c": "small"}, {"a": "C","b": 43, "c": "x-large"}, {"a": "D","b": 13, "c": "large"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "ordinal", "scale": {"type": "ordinal", "domain": ["x-small", "small", "large", "x-large"]}}
  }
}

Making the scale type = ordinal makes the color show, but still incorrectly. (Alternating between start and end color)

Providing custom range (e.g., GnBl from color brewer) now gives nice output, but still in a wrong order.

{
  "data": {
    "values": [
      {"a": "A","b": 28, "c": "x-small"}, {"a": "B","b": 55, "c": "small"}, {"a": "C","b": 43, "c": "x-large"}, {"a": "D","b": 13, "c": "large"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "ordinal", "scale": {"type": "ordinal", "domain": ["x-small", "small", "large", "x-large"], "range": ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"]}}
  }
}

Temporary Workaround

For now, setting data type to nominal avoids the problem (as nominal field does not produce the color_legend scale in Vega like ordinal). We also do not have to set scale type to ordinal manually in this case.

Users might find colorbrewer useful.

{
  "data": {
    "values": [
      {"a": "A","b": 28, "c": "x-small"}, {"a": "B","b": 55, "c": "small"}, {"a": "C","b": 43, "c": "x-large"}, {"a": "D","b": 13, "c": "large"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "color": {"field": "c", "type": "nominal", "scale": {"domain": ["x-small", "small", "large", "x-large"], "range": ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"]}}
  }
}

TODO

• a) Check if linear or sequential scale in Vega 3 already produces correct output in this case. (Probably not, but worth checking)

• b) If a) is not true, it seems like the new index scale in Vega 3 is created specifically for this purpose.

• c) If index scale also doesn't work, we can also consider

  • c1)
    • Use ordinal "lookup" scale for color of ordinal field if custom domain is provided
    • Manually Interpolate the output color range
  • c2)
    • Pass the input ordinal data through rank transform.

IMHO, we should avoid c1 and c2 unless it is necessary.

(@domoritz, I'm assigning this to you since I guess you'll be the one who handles color scale migration to Vega 3.)

[dhimmel]

Note this occurs when type: 'nomimal', it may be a related or distinct issue.

Here's another example that came up in vega/altair#245 (comment):

{
  "data": {
    "url": "https://raw.githubusercontent.com/dhimmel/biorxiv-licenses/4ad9659e4fc823f4c491e13be4505248df5c1ab6/figure/license-vs-time/vega-lite-data.json"
  },
  "config": {
    "mark": {
      "stacked": "normalize"
    }
  },
  "encoding": {
    "color": {
      "field": "license",
      "scale": {
        "domain": [
          "CC BY",
          "CC BY-ND",
          "CC BY-NC",
          "CC BY-NC-ND",
          "None"
        ],
        "type": "ordinal"
      },
      "type": "nominal"
    },
    "x": {
      "axis": {
        "axisWidth": 0.0,
        "format": "%Y",
        "labelAngle": 0.0,
        "tickSize": 0.0
      },
      "field": "date",
      "scale": {
        "nice": "month"
      },
      "timeUnit": "yearmonth",
      "title": " ",
      "type": "temporal"
    },
    "y": {
      "aggregate": "count",
      "axis": {
        "axisWidth": 0.0,
        "grid": false,
        "labels": false,
        "ticks": 0.0
      },
      "field": "*",
      "title": "Proportion of Preprints",
      "type": "quantitative"
    }
  },
  "mark": "area"
}

Notice how the legend ordering doesn't match the ordering of the normalized area marks.

[kanitw]

@dhimmel Thanks for reporting. That's actually a slightly different issue, so I created #1734 for this. :)

[domoritz]

Index scales should work for specifically this purpose. This means we will support it in Vega-Lite 2.0 because we need Vega 3 scales.

There seem to be a few issues with index scales that need to be resolved first vega/vega#667

[kanitw]

Addressed in #1746 (pending review)