Can't display more than 2 swatches for quantitative data

[stevage]

I'm not sure if this is a bug, a feature request or support request.

I have a dataset which has approx 10 discreet values, integers from 0 to 15.

I'd a like a legend to display a reasonable number of those values (most likely, all of them). I'm setting it up like this:

const plotEl = Plot.plot({
  marks: [
    Plot.rectY(
        expeditions,
        Plot.binX(
            { y: 'count' },
            {
                x: {
                    value: 'date',
                    interval: d3.utcMonth,
                },
                fill: 'participantsCount'
            }
        )
    ),
  ],
  background: '#222',
  width: document.getElementById('chart').getClientRects()[0].width,
      style: {
          background: '#222',
          color: 'white',
      },
  });
  const legendEl = plotEl.legend('color', {
      legend: 'swatches',
      columns: 8,
      style: { color: 'white', background: '#222' },
  });
  document.getElementById('chart').replaceChildren(plotEl);

I can't see anything in the docs that offers a way to display more swatches.

Result:

Of note:

• only two swatches (min and max value)
• also some strange artefacts that look like a 1 pixel height swatch

See in action here (select Show chart, Number of participants).

[mbostock]

The swatches legend type is only supported for discrete quantitative color scales, but you’re using a continuous quantitative color scale here. (We should probably throw an error in this case.) Per the README:

For quantitative color scales, it defaults to ramp but may be set to swatches for a discrete scale (most commonly for threshold color scales); for ordinal color scales and symbol scales, only the swatches value is supported.

The swatches legend type will display all the values in the scale’s domain, which in the case of a continuous scale is the lower and upper bound, which appears to be [0, 15] in your case.

The default legend for a linear color scale is:

Plot.legend({
  color: {
    type: "linear"
  }
})

But with swatches you just see 0 and 1:

Plot.legend({
  legend: "swatches",
  color: {
    type: "linear"
  }
})

If you want to show a discrete color legend, you need to switch to a discrete color scale so that the legend matches the scale. For example, you could use a threshold scale:

Plot.legend({
  color: {
    type: "threshold",
    domain: d3.range(1, 14)
  }
})

A threshold scale will default to the rdylbu color scheme but you can switch to turbo if you prefer that.

Plot.legend({
  color: {
    type: "threshold",
    scheme: "turbo",
    domain: d3.range(1, 14)
  }
})

You could also use a quantile scale, but this changes the semantics of the color encoding.

If Plot supported quantize scales then you wouldn’t need to compute the thresholds yourself. I filed #828 for that.

[stevage]

Thanks, that was a really helpful explanation. Yes, I think threshold is the one I want.

[stevage]

Although, this doesn't seem to actually work:

            const legendEl = plotEl.legend('color', {
                legend: 'threshold',
                domain: d3.range(1, 14),
                style: { color: 'white', background: 'transparent' },
            });

("Unknown legend type: 'threshold'")

Setting a type property instead of legend had no effect. Passing an object with { type: 'legend' } was a type error.

[stevage]

And doing it this way did work:

const legendEl = Plot.legend({
                color: {
                    type: 'threshold',
                    domain: d3.range(1, 14),
                },
                style: { color: 'white', background: 'transparent' },
            });

I'm not sure why the difference in form is significant.

[stevage]

Ok, I half-get it.

In the second case, color: { } is actually defining a whole new scale, and type is the type of that scale, and the legend is just happening automatically.

In the first case, 'color' is identifying an existing scale, and legend is the type of the legend, not the scale.

[mbostock]

Yep, you got it!