problem with assigning color

Community Help
1

Hi All,

Here is a problem that I have been facing a lot while color-coding my data. I work with mostly film- and literature or history-related data, and so when I create multiple charts in the same notebook, having a consistent color for a particular category/person/place is important for the legibility of the charts, from the point of view of laypersons.

In the linked notebook, I am trying to come up with a simple profession to color for the same dataset. But I cannot match the profession-to-color in the first bar chart (where John Ford’s job in films is shown in binned format) and the profession-to-color in the pie chart which has the same domain/range, but shows John Ford’s job in the films in terms of his lifetime input.

And when I try to create Swatches, the different professions do not show up.

Thanks in advance for any help in figuring out what I am doing wrong.

Sincerely,
Rini
https://observablehq.com/@rbhttchr/johnford

2

One too many sets of brackets. Try this:

Swatches(
  d3.scaleOrdinal(
    fordRoles.map((d) => d.profession),
    [
      "#ff9da7",
      "#b3e2cd",
      "#d62728",
      "#f28e2c",
      "#e377c2",
      "#f1e2cc",
      "#af7aa1",
      "#8c564b",
      "#cbd5e8",
      "#ffffff",
      "#000000"
    ]
  ),
  {
    columns: "180px"
  }
)
1 Like
3

Thanks so much, Mike! How do I get the pie chart to match the bar chart’s color scheme now?

4

You have the same extra bracket problem around the domain in the pie chart definition, so I would start by fixing that. I recommend setting the scale’s domain explicitly and then setting scale.unknown(undefined) so that you’re not relying on D3’s “implicit domain extension” and instead set the color encoding explicitly for all values. That way you’ll know immediately if there’s a problem with the domain you set.

I would also look at the new plot.scale(name) feature added in Plot 0.2.5. This allows you to extract the scale definitions used by Plot and to share them across plots or to create legends. Read about it here:

And here’s an example from the Plot notebook:

{
  const color = dotplot.scale("color");
  return Swatches(d3.scaleOrdinal(color.domain, color.range));
}
1 Like
5

Thanks again, Mike! I will study the scale.unknown(undefined). The example from Plot notebook is very helpful.

All the best,
Rini

1 Like