Multiple bars in a single plot

[PatrickBuTaxdoo]

Hello!

I want to display multiple bars in a single plot. I cannot find anything related in the docs, and also no example for that.
Adding multiple bars is not an issue by itself, but the bars are overlapping, and I cannot find an option to adjust the width of the bars. This is what I am getting:

using this code:

Plot.plot({
    marks: [
      Plot.barX(data, {
        y: 'stat',
        x: 'old',
        fill: '#4e79a7',
      }),
      Plot.barX(data, {
        y: 'stat',
        x: 'new',
        height: 5,
        fill: '#cc5555',
        dy: 10,
      }),
    ],
    x: {grid: true, label: 'Time (seconds)'},
    y: {grid: true, label: 'Metric'},
  });

How can I plot multiple bars, or just adjust the width/height of the bars?

strokeWidth, strokeHeight, height and width on the barX options do not seem to work.

[yurivish]

I think you could use insetTop and insetBottom to adjust the height of the bars? Another approach would be to try faceting to make mini-charts each containing two bars. I don't immediately have a reference example for that idea, but it would let you show each blue bar next to its red counterpart.

[mbostock]

I recommend using faceting for this, and using a “tidy” representation of data where there is one row per observation, rather than treating the “new” and “old” observations as separate dimensions. To tidy the data, you could say:

tidy = data.flatMap((d) => [
  { stat: d.stat, series: "old", time: d.old },
  { stat: d.stat, series: "new", time: d.new }
])

Then to use faceting, you could say:

Plot.plot({
  x: { grid: true, label: "Time (seconds)" },
  y: { label: "Metric", axis: null },
  color: { legend: true },
  facet: {
    data: tidy,
    y: "stat",
    marginLeft: 60
  },
  marks: [
    Plot.barX(tidy, {
      x: "time",
      y: "series",
      fill: "series"
    })
  ]
})

Live notebook: https://observablehq.com/d/47d887315e24c39b

[PatrickBuTaxdoo]

Thank you very much!

I wanted to have the colors customizable and als add labels. I also fixed the label for the left axis. This is my final code:

    const tidy = data.flatMap((d) => [
      { stat: d.stat, series: 'old', time: d.old, fill: '#4f79a7' },
      { stat: d.stat, series: 'new', time: d.new, fill: '#f18e2c' },
    ]);
    Plot.plot({
      x: { grid: true, label: 'Time (seconds)' },
      y: { axis: null },
      color: { legend: true },
      facet: {
        data: tidy,
        y: 'stat',
        marginLeft: 60,
        marginRight: 60,
        label: 'Metric'
      },
      marks: [
        Plot.barX(tidy, {
          x: 'time',
          y: 'series',
          fill: 'fill',
        }),
        Plot.text(tidy, {
          y: 'series',
          x: 'time',
          text: 'time',
          textAnchor: 'start',
          dx: 10,
        }),
      ],
    });

[PatrickBuTaxdoo]

Unfortunately, like in your graph, the statistics are not in original order anymore ("maximum" should be last). Is there a way to keep the original order? It looks like the data is sorted alphabetically

[Fil]

you can order the facet domain by specifying it explicitly, for example:
fy: {domain: ["average", "p50", "p90", "p95", "maximum"]}

[PatrickBuTaxdoo]

Awesome, thank you, that works!

[mbostock]

Another approach would be to make the “new” values more prominent (i.e., you want to see the new values in the context of the old values), and then show the change with a link or arrow.

Plot.plot({
  x: { grid: true, label: "Time (seconds)" },
  y: { label: "Metric" },
  marks: [
    Plot.barX(data, { x: "new", y: "stat", fill: "#ccc" }),
    Plot.ruleX([0]),
    Plot.tickX(data, { x: "new", y: "stat", strokeWidth: 1.5 }),
    Plot.arrow(data, { x1: "old", x2: "new", y: "stat", stroke: "red" }),
    Plot.dot(data, { x: "old", y: "stat", fill: "red" })
  ]
})

Shown here: https://observablehq.com/d/47d887315e24c39b

[dgwyer]

@PatrickBuTaxdoo As pointed out above you could use inset to overlay the bars too like this (needs tweaking probably): https://observablehq.com/d/20c995d04b71e4db#cell-8

I'm not sure why the legend isn't displaying though. Margin/padding needs adding?

[dgwyer]

Oops. Done. :)

[Fil]

it seems to work with:

Plot.plot({
  marginLeft: 80,
  x: { grid: true, label: "Time (seconds)" },
  y: { label: "Metric" },
  marks: [
    Plot.barX(data, { x: "new", y: "stat", fill: "#ccc" }),
    Plot.ruleX([0]),
    Plot.tickX(data, { x: "new", y: "stat", strokeWidth: 1.5 }),
    Plot.arrow(data, { x1: "old", x2: "new", y: "stat", stroke: "red" }),
    Plot.dot(data, { x: "old", y: "stat", fill: "red" })
  ]
})

[dgwyer]

The legend? I still don't see it, unless you're referring to something else. I was referring to the series legend that displays at the top of the chart.

[Fil]

Ah sorry, you meant the color legend, I thought you were speaking about the labels for y.

The marks in this chart are using fixed colors (that are not data-driven), so there is no way Plot could derive a legend in this case.

In Mike's example above, the color is data-driven (based on the "series" accessor), which allows Plot to create a color scale, and a legend is then created with the legend: true option.

[dgwyer]

Makes sense, thanks.