Consistent colours for bar charts

[sbarre]

I am using Plot.barX to make a stacked bar chart, and I'm wondering if it's possible to map colours to bars based on a value rather than specifying the property name in fill?

Right now it assigns colours to different stacks in the bars via specifying the property in fill, but when I apply a filter, the colours change when there are fewer possible values for that property

For example if there are 3 possible values for fill, say "A, "B, and "C".

A will be blue, B will be yellow and C will be red.

But when a filter is applied and there are no elements with "A" anymore, B becomes blue and C becomes yellow.

The legend properly updates to show which colour is which but it's not very intuitive and users get confused when the colours change.

In the example above, is it possible for B to remain yellow and C to remain red even if there's no A when the data is filtered interactively by the user?

I'm sure this is possible, I tried to dig into the colour scales but I can't figure it out.

Thanks in advance for any suggestions.

[Fil]

The simple answer is to use the domain option on the color scale, e.g.

Plot.barX(…).plot({color: {domain: ["A", "B", "C"]}})

What I prefer to do though, when I work on a larger project with several charts, is to create a color scale and reuse it:

const color = Plot.scale("color",  {domain: ["A", "B", "C"]});
Plot.barX(…).plot({color});

It's often easier to create a "general" view with all the data; this ensures that you don't have to specify the domain manually (and can also be used as a legend).

const generalChart = Plot.plot({ marks: [ … using all the data … ] });
Plot.barX(…).plot({color: generalChart.scale("color")});

[sbarre]

Hmm that doesn't seem to be working for me.. Here's a simplified version of my code:

const data = [
  { group: "One", total: 9, state: "A" },
  { group: "One", total: 24, state: "B" },
  { group: "One", total: 22, state: "C" },
  { group: "Two", total: 19, state: "A" },
  { group: "Two", total: 30, state: "B" },
  { group: "Two", total: 30, state: "C" },
  { group: "Three", total: 13, state: "A" },
  { group: "Three", total: 10, state: "B" },
  { group: "Three", total: 31, state: "C" },
]

const colourScale = Plot.scale("color", {
  domain: ["A","B","C"]
})

return Plot.plot({
  color: colourScale,
  marks: [
    Plot.barX(data, {
      y: "group",
      x: "total",
      fill: "state",
    }),
  ]
});

When I run this, I get:

Error: invalid scale definition; no scale found

I also tried your alternate invocation:

return Plot.barX(data, {
      y: "group",
      x: "total",
      fill: "state",
}).plot({color: colourScale})

Same results.

Am I misunderstanding your example? Do I still use the fill: "state" when I use a domain, or do I have to map the values to the domain differently?

I'm running this in Observable Framework if that makes a difference? Looks like my version of Plot is 0.6.17 according to the cache folder.

Edit: digging into the code, it looks like the scale() function only accepts an array of options (as opposed to a type and then options), and domain isn't one of them?

https://github.com/observablehq/plot/blob/main/src/scales.js#L523

https://github.com/observablehq/plot/blob/main/src/scales/index.js#L32-L43

Is this an older implementation?

[mbostock]

I think Fil inadvertently gave you the wrong syntax. Pretty sure this is covered in the docs, but try this instead:

const color = Plot.scale({color:  {domain: ["A", "B", "C"]}});
Plot.barX(…).plot({color});

[Fil]

Oops, sorry! I tried to be quick and didn't double-check

[sbarre]

Thank you both!

And yes it looks like the Plot docs do cover this syntax.

I did read the docs a few times and couldn't quite map the "how" to the "why". Maybe some feedback there, if I read the section above, it does explain how to create a custom scale, but doesn't really explain why I would want to do that.

Fil's initial example of doing it to create a consistent colour scale across multiple Plots would be a great extra piece of connective information on that page IMO..

Thank you again!