How to use Plot to draw the proportion of a specific RectY binX values?

[JCKortlang]

Q: How to use Plot to compute the proportion of individual bins?

Desired output:

--

Context:

I am currently using binX to group values into timeseries intervals.

        Plot.plot({
            caption: `This chart shows feedback sentiment grouped by ${interval} and plotted on the corresponding axis`,
            height: 350,
            color: PlotSentimentScaleOptions,
            className: 'ati',
            grid: true,
            y: { label: 'Sentiment', },
            x: {
                label: null
            },
            marks: [
                Plot.rectY(prepared,  Plot.binX({ y: 'sum' }, { x: { value: 'timestamp', interval: interval }, y: 'sentimentValue', fill: 'sentiment', tip: 'x' })),
                Plot.ruleY([0]),
            ]
        }),

This will output...

I would like to show a proportion transformation on the individual time series buckets as seen below. However I am currently unable / ignorant of how to achieve this via the Plot library.

Instead I am manually iterating and grouping the data to generate the proportions.

        Plot.plot({
            caption: `This chart shows feedback sentiment grouped by ${interval} as a proportion (%) of total feedback for the time range`,
            height: 350,
            color: PlotSentimentScaleOptions,
            className: 'ati',
            grid: true,
            y: {
                label: 'Sentiment (%)',
                percent: true
            },
            x: {
                label: null,
                interval: interval,
            },
            marks: [
                //Note 'quotientPercent' vs 'bucketCount' above
               // 'Plot.binX({ y: 'proportion' }' will compute the proportion relative to the entire time range and not an individual bucket.
                Plot.rectY(prepared,  Plot.binX({ y: 'sum' }, { x: { value: 'timestamp', interval: interval }, y: 'quotientPercent', fill: 'sentiment', tip: 'x' })),
                Plot.ruleY([0]),
            ]
        })

[mbostock]

Have you tried setting the stack transform’s offset option to normalize? See example notebook.

[JCKortlang]

That did the trick. Specifically...

Plot.plot({
            caption: `This chart shows feedback sentiment grouped by ${interval} as a proportion (%) of total feedback for the time range`,
            height: 350,
            color: PlotSentimentScaleOptions,
            className: 'ati',
            grid: true,
            y: {
                label: 'Sentiment (%)',
                percent: true
            },
            x: {
                //Hide the label as it clips the time bucket labels. Defer to the caption and tooltip
                label: null,
                interval: interval,
            },
            marks: [
                Plot.rectY(prepared,  Plot.stackY({ offset: 'normalize' }, Plot.binX({ y: 'sum' }, { x: { value: 'timestamp', interval: interval }, y: 'bucketCount', fill: 'sentiment', tip: 'x' }))),
                Plot.ruleY([0]),
            ]
        })

[mbostock]

Yep! I think you can pass offset as part of the second options argument to the bin transform, too, and take advantage of the implicit stack transform (y: 'bucketCount', fill: 'sentiment', offset: 'normalize', …). But no harm in being explicit.