Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Swatches legends should support the label option #834

Open
stevage opened this issue Mar 30, 2022 · 4 comments · May be fixed by #1885
Open

Swatches legends should support the label option #834

stevage opened this issue Mar 30, 2022 · 4 comments · May be fixed by #1885
Labels
enhancement New feature or request

Comments

@stevage
Copy link

stevage commented Mar 30, 2022

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.

image

image

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

image

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 mbostock changed the title Legend label not shown for categorical fill in binX Swatches legends should support the label option Mar 30, 2022
@mbostock mbostock added the enhancement New feature or request label Mar 30, 2022
@mbostock
Copy link
Member

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

plot/src/legends/swatches.js

Line 77 in 3f8ac13

// TODO label,

@Fil
Copy link
Contributor

Fil commented Mar 30, 2022

there's even a pull-request #621

@tophtucker
Copy link
Contributor

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!)

@Fil Fil added bug Something isn’t working and removed bug Something isn’t working labels Aug 15, 2023
This was referenced Aug 15, 2023
Open
Closed
@Fil Fil linked a pull request Sep 29, 2023 that will close this issue
Open
@jheer
Copy link

jheer commented Mar 20, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

label on color swatches observablehq/plot
labels for swatches observablehq/plot
5 participants
@Fil @jheer @mbostock @stevage @tophtucker