Open
Description
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);