Swatches legends should support the label option

[stevage]

I have three kinds of plots, all using binX:

• quantitative data with automatically computed range, ramp legend created with myplot.legend('color', ...)
• quantitative data with manually assigned ranged, threshold legend Plot.legend({ color: ...
• categorical data with automatically computed range, categorical legend created with myplot.legend('color', ... )

In the first two cases, a scale legend is shown, defaulting to the name of the channel (right terminology?) containing the values being color-coded.

In the third case, a scale legend is not shown, and passing label: has no effect.

This is my code:

const colorBy = window.ChartControls.options.colorBy;
            const scheme = {
                participantsCount: 'turbo',
                graticuleLatitude: 'rdylbu',
                graticuleLongitude: 'rdylbu',
                success: 'set1',
            }[colorBy];
            const plotEl = Plot.plot({
                color:
                    {
                        participantsCount: {
                            type: 'threshold',
                            domain: d3.range(0, 10),
                            scheme,
                        },
                    }[colorBy] || (scheme ? { scheme } : undefined),

                marks: [
                    Plot.rectY(
                        expeditions,
                        Plot.binX(
                            {
                                y: 'count',
                            },
                            {
                                x: {
                                    value: 'date',
                                    interval: d3.utcMonth,
                                },
                                fill:
                                    {
                                        weekDay: 'weekDayName',
                                        participants: 'participantsOrMultiple',
                                        graticuleName: 'graticuleNameShort',
                                    }[colorBy] || colorBy,
                            }
                        )
                    ),
                ],
                background: '#222',
                width: document.getElementById('chart').getClientRects()[0]
                    .width,
                height:
                    document
                        .getElementById('Chart-container')
                        .getClientRects()[0].height - 50,

                style: {
                    background: 'transparent',
                    color: 'white',
                },
            });
            let legendEl;
            if (colorBy === 'participantsCount') {
                legendEl = Plot.legend({
                    color: {
                        type: 'threshold',
                        domain: d3.range(0, 14),
                        scheme,
                    },
                    label: 'Particpants',
                    style: { color: 'white', background: 'transparent' },
                });
            } else {
                legendEl = plotEl.legend('color', {
                    style: { color: 'white', background: 'transparent' },
                    label: 'hello',
                });
            }

            document.getElementById('chart').replaceChildren(plotEl);
            document.getElementById('chart-legend').replaceChildren(legendEl);

[mbostock]

Swatches legends do not currently support a label option, but it’s noted as a TODO here:

https://github.com/observablehq/plot/blob/3f8ac1369b9838e0f0036a6fe19aed6e841af0fb/src/legends/swatches.js#L77

[Fil]

there's even a pull-request https://github.com/observablehq/plot/pull/621

[tophtucker]

This came up today in discussing how the chart cell height jumps when you switch between an ordinal and continuous color scale. Fil pointed out that continuous also gets a label and ordinal doesn't, which contributes to the height difference.

(Separately, it'd be nice if one row of swatches matched the height of the continuous legend. Though I know it's tricky, since continuous demands value labels below, whereas ordinal can have value labels between. I guess it's in the nature of continuity that it leaves no room for inline labels!)

[jheer]

I'd like to +1 / bump this issue. I was surprised to be unable to add a title to categorical legends!

[mkfreeman]

Also chiming in to 👍 this issue (now closed by #1885).