Grouped bar chart and faceting already grouped data.

[peter-facko]

Hello,

I have data with three columns: time, value A, and value B. Time represents the beginning of a period.

I want to plot the data as a grouped bar chart, with two different colored bars showing values A and B for each period.

I have created an interval object that correctly processes the periods. Now I have problems with faceting. Currently, I have this:

Plot.plot({
    fx: { interval: PERIOD_INTERVAL },
    marks: [
        Plot.barY(data, {
            fx: "start",
            x: ["A"],
            y: "a",
            fill: "red",
        }),
        Plot.barY(data, {
            fx: "start",
            x: ["B"],
            y: "b",
            fill: "blue",
        }),
    ],
});

It only displays the first bar group but shows the correct labels.

Thank you in advance for any help.

[Fil]

x: ["A"], defines a channel of length 1, so only one bar will be produced. Maybe what you need instead is x: () => "A",

I'm surprised by how "blue" and "red" turned out green and purple, though

[peter-facko]

x: ["A"], defines a channel of length 1, so only one bar will be produced. Maybe what you need instead is x: () => "A",

Thank you, that was it, now it works! Is this the right way of doing it? I know that if I transformed the data from [time, A, B] into [time, A, "A"], [time, B, "B"] the grouping could be done automatically. But I have both A and B values for each time so I don't like that solution much.

Also, I noticed that the y-axis labels are cropped, what could be the reason for that? I set the width and height of the SVG to 100%.

I'm surprised by how "blue" and "red" turned out green and purple, though

I'm sorry, I changed the colors before I took the screenshot. The colors work fine.

[Fil]

Is this the right way of doing it?

It's the tidy data way. See https://observablehq.com/plot/features/plots#marks-option and https://observablehq.com/plot/features/marks#marks-have-tidy-data.

To avoid cropping the labels, try a larger marginLeft.