Domain legend gets squished when horizontal in colab vs vertical in vega-lite editor

In colab, the legend gets squished so that the text is unreadable when there are multiple breakpoints.

Code to reproduce:

import altair as alt
from vega_datasets import data

counties = alt.topo_feature(data.us_10m.url, 'counties')
unemp_data = data.unemployment.url

alt.Chart(counties).mark_geoshape().encode(
    color=alt.Color('rate:Q',
          scale=alt.Scale(type="linear",
              domain=[.02,.02,.035,.035,.05,.05,.065,.065,.08,.08,.095,.095,.11,.11,.125,.125,.14,.14,.155,.155],
                          range=    
    ["#5e4fa2","#5e4fa2",
     "#3288bd","#3288bd",
     "#66c2a5","#66c2a5",
     "#abdda4","#abdda4",
     "#e6f598","#e6f598",
     "#fee08b","#fee08b",
     "#fdae61","#fdae61",
     "#f46d43","#f46d43",
     "#d53e4f","#d53e4f",
     "#9e0142","#9e0142"])),

).transform_lookup(
    lookup='id',
    from_=alt.LookupData(unemp_data, 'id', ['rate'])
).project(
    type='albersUsa'
).properties(
    width=500,
    height=300
)

In the vega-lite editor, this gets rendered as a vertical legend.

{
  "config": {"view": {"width": 400, "height": 300}},
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/us-10m.json",
    "format": {"feature": "counties", "type": "topojson"}
  },
  "mark": "geoshape",
  "encoding": {
    "color": {
      "type": "quantitative",
      "field": "rate",
      "scale": {
        "domain": [
          0.02,
          0.02,
          0.035,
          0.035,
          0.05,
          0.05,
          0.065,
          0.065,
          0.08,
          0.08,
          0.095,
          0.095,
          0.11,
          0.11,
          0.125,
          0.125,
          0.14,
          0.14,
          0.155,
          0.155
        ],
        "range": [
          "#5e4fa2",
          "#5e4fa2",
          "#3288bd",
          "#3288bd",
          "#66c2a5",
          "#66c2a5",
          "#abdda4",
          "#abdda4",
          "#e6f598",
          "#e6f598",
          "#fee08b",
          "#fee08b",
          "#fdae61",
          "#fdae61",
          "#f46d43",
          "#f46d43",
          "#d53e4f",
          "#d53e4f",
          "#9e0142",
          "#9e0142"
        ],
        "type": "linear"
      }
    }
  },
  "height": 300,
  "projection": {"type": "albersUsa"},
  "transform": [
    {
      "lookup": "id",
      "from": {
        "data": {
          "url": "https://vega.github.io/vega-datasets/data/unemployment.tsv",
          "format": {"type": "tsv"}
        },
        "key": "id",
        "fields": ["rate"]
      }
    }
  ],
  "width": 500,
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json"
}

Incidentally, the legend is in the vega-lite editor is unfortunately also inaccurate, which I’ve reported on the vega-lite repo: https://github.com/vega/vega-lite/issues/3981

[zanarmstrong]

Hi Jeff -

Thanks for the quick reply!

“Vega does support a threshold scale type that will provide a discretized color legend (if that is what you want). However, I don’t think Vega-Lite (and hence Altair) supports this yet.”

Yes - I was trying to force a threshold scale type, since I saw it wasn’t an option in Vega-Lite. Can I make a feature request? 😃

“change the number of requested tick marks” & “if you want complete control over legend labels”

sweet!

This led me to an underlying Vega bug that I will fix soon!

Yay! Glad to hear it.

the version of vega-lite in colab is older than the current release

Alas!

[zanarmstrong]

Works like a charm - thanks!