domainMid of diverging color scheme ignored when it falls outside data range

[sacundim]

I have a heatmap where I use a diverging color scheme with {"domainMid": 0} with the intent that negative values will stand out from positive ones. However, today I ran into an edge case where, because all of the values are positive, the libraries apparently choose to just ignore my domainMid setting:

WARN Scale domainMid exceeds domain min or max. 0

Adding "domain": [0, 30] works around the issue, but it seems to me like a case where the libraries are counterintuitively ignoring a reasonable chart spec with sensible semantics. It also requires me to bind my chart spec more tightly to the actual data—I must compute the domain from the actual data, which means that having the data at hand becomes a prerequisite for generating the spec. In Altair I implemented my workaround this way, which might be a candidate solution to adopt in the library itself:

heatmap = base.mark_rect().encode(
    color=alt.Color('value:Q', title=None, legend=None,
                    scale=alt.Scale(scheme="redgrey", domainMid=0,
                                    # WORKAROUND: Set the domain manually to forcibly
                                    # include the domainMid or else we run into
                                    # https://github.com/vega/vega-lite/issues/6544
                                    domain=[min(0, df['value'].min()),
                                            max(0, df['value'].max())]))
)

Here's the example that ran into the issue:

Open the Chart in the Vega Editor

{
  "config": {
    "axis": {"labelFontSize": 14, "titleFontSize": 14},
    "header": {"labelFontSize": 14, "titleFontSize": 14},
    "legend": {"labelFontSize": 14, "titleFontSize": 14},
    "title": {"align": "center", "fontSize": 20, "offset": 15}
  },
  "data": {"name": "data-25d16c474903955c25d9b9e1a14eb9a5"},
  "facet": {
    "row": {
      "type": "nominal",
      "field": "variable",
      "sort": ["Confirmados", "Probables", "Muertes"],
      "title": null
    }
  },
  "spec": {
    "layer": [
      {
        "mark": "rect",
        "encoding": {
          "color": {
            "type": "quantitative",
            "field": "value",
            "legend": null,
            "scale": {"domainMid": 0, "scheme": "redgrey"},
            "title": null
          },
          "tooltip": [
            {"type": "temporal", "field": "datum_date"},
            {"type": "quantitative", "field": "value"}
          ],
          "x": {
            "type": "ordinal",
            "axis": {"format": "%d"},
            "field": "datum_date",
            "timeUnit": "date",
            "title": "Día del mes"
          },
          "y": {
            "type": "ordinal",
            "axis": {"format": "%B"},
            "field": "datum_date",
            "sort": "descending",
            "timeUnit": "month",
            "title": null
          }
        }
      },
      {
        "mark": {"type": "text", "fontSize": 9},
        "encoding": {
          "color": {
            "condition": {
              "value": "white",
              "test": {
                "or": [
                  {"field": "value", "lte": 0},
                  {"field": "value", "gte": 15}
                ]
              }
            },
            "value": "black"
          },
          "text": {"type": "quantitative", "field": "value"},
          "tooltip": [
            {"type": "temporal", "field": "datum_date"},
            {"type": "quantitative", "field": "value"}
          ],
          "x": {
            "type": "ordinal",
            "axis": {"format": "%d"},
            "field": "datum_date",
            "timeUnit": "date",
            "title": "Día del mes"
          },
          "y": {
            "type": "ordinal",
            "axis": {"format": "%B"},
            "field": "datum_date",
            "sort": "descending",
            "timeUnit": "month",
            "title": null
          }
        }
      }
    ],
    "height": 70,
    "width": 585
  },
  "$schema": "https://vega.github.io/schema/vega-lite/v4.8.1.json",
  "datasets": {
    "data-25d16c474903955c25d9b9e1a14eb9a5": [
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-14T00:00:00",
        "variable": "Confirmados",
        "value": 1
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-04-20T00:00:00",
        "variable": "Probables",
        "value": 1
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-01T00:00:00",
        "variable": "Probables",
        "value": 2
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-11T00:00:00",
        "variable": "Probables",
        "value": 1
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-12T00:00:00",
        "variable": "Probables",
        "value": 1
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-13T00:00:00",
        "variable": "Probables",
        "value": 3
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-15T00:00:00",
        "variable": "Probables",
        "value": 2
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-18T00:00:00",
        "variable": "Probables",
        "value": 8
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-19T00:00:00",
        "variable": "Probables",
        "value": 30
      },
      {
        "bulletin_date": "2020-05-25T00:00:00",
        "datum_date": "2020-05-20T00:00:00",
        "variable": "Probables",
        "value": 15
      }
    ]
  }
}```

[domoritz]

You could use domain: {unionWidth: [0]}

Open the Chart in the Vega Editor

What do you expect the behavior of Vega-Lite to be? If the middle is outside the domain, I think it's not totally unreasonable to drop the mid value.

[sacundim]

If I use a diverging color scheme and set the domainMid to zero, I expect that the lower half of the color scheme will used with and only with negative values. If there aren't any negative values in the data, then that part of the range would not be used.

Thanks for the alternative workaround, that's indeed better than mine!

[domoritz]

I looked a bit more into it. Vega-Lite actually just passes the domain mid to Vega and the warning you see comes from Vega. I think that's where we should fix it.

I'm closing the issue here. Can you file an issue at https://github.com/vega/vega/issues/new/choose with a small example and the description of the issue so it can be addressed at the Vega level?

[sacundim]

I'm happy to help, but I could use some guidance on whether the pared down example:

1. Can be Vega-Lite or its compiled-down counterpart;
2. Needs to be hand-written Vega (which I don't know if I'd be able to produce).

Here are some pared-down Vega-Lite versions:

• Just domainSize = 0, all values positive, undesired colors for small positive values
• Just domainSize = 0, change one value from 1 to -1, colors look as desired
• Adding domainWith = [0], all values positive, colors look as desired

[domoritz]

Ideally, it would be a Vega specification stripped down from a spec generated by Vega-Lite but a Vega-Lite spec is fine if you don't have much experience with vega yet. We really appreciate you writing up the issue so anything that you can do in a few minutes will help.