List / chart of default colors?

[Hvass-Labs]

I cannot seem to find a list / chart of the default colors used in Plot. I would like to manually set the colors in some plots, but I want to use the same colors as Plot normally does.

If this sounds weird, let me elaborate: I draw several lines in one plot and use the stroke keyword to set different colors for the lines. Now I want to make several other plots, where I want to use the matching colors from the first plot.

Thanks!

[Fil]

The recommended way to do this is to reuse the scale that the first plot computes:

const chart1 = Plot.plot({………});
const chart2 = Plot.plot({………, color: chart1.scale("color")});

The color schemes are described in https://observablehq.com/plot/features/scales#color-scales

[Hvass-Labs]

I'm trying to be really polite here. But your docs on this issue are long and abstract, and I have no idea how to do this simple thing. I don't want to study for a PhD on how to change colors. And the link you provided doesn't clear up anything for me :-)

I want to do something like this:

Plot.lineY(data, {x: "Date", y: "Value", stroke: "Tableau10.B"}),

I tried things like:

var color = Plot.scale({symbol: "Tableau10"});

// ...

Plot.lineY(data, {x: "Date", y: "Value", stroke: color}),

But I can't get it working.

[Hvass-Labs]

@mbostock would you like me to downvote your posts as well? :-)

I watched your nice lecture on designing plots and what you guys have built here is beautiful and brilliant. If ObservableHQ supported Python I would use it in a heartbeat.

So when an otherwise fairly competent person like myself is having serious problems with an aspect of your API, it must mean that particular aspect of the API is either too complicated, or it is not explained well enough. This should be valuable feedback for you because it reveals a pressure-point in the user-experience. It might be wise to receive such feedback graciously.

[mbostock]

We’ve given you much prompt, detailed, and free help @Hvass-Labs. We appreciate your feedback — but the tone of your previous comment that you’re “trying to be polite” is not appreciated.

[mbostock]

To give a more specific concrete example of Plot.scale:

const color = Plot.scale({color: {scheme: "Tableau10", domain: ["apple", "orange", "pear"]}});

Then you can say color.apply("apple") to get #4e79a7, which is the first color in the tableau10 color scheme. If you just want to extract the colors as an array, you can copy them from the D3 color schemes documentation, but we recommend declaring it as a scale so that the association between colors and domain values is explicit.

To use such a scale in a plot, you pass the color object in as the scale options for the color scale, e.g.:

Plot.plot({
  color,
  marks: [
    Plot.barY(data, {x: "fruit", y: "value", fill: "fruit"})
  ]
})

Where data is an array of objects with fruit and value columns:

data = [
  {fruit: "apple", value: 1},
  {fruit: "orange", value: 3},
  {fruit: "pear", value: 2}
]

Notebook: https://observablehq.com/d/d7319286ddc3ae0c

If you would like to contribute to our documentation, please open a pull request. 🙏

[Hvass-Labs]

Thanks very much!

I did the following which is fairly easy, although I would never have solved it on my own:

const color = Plot.scale({color: {scheme: "Tableau10", domain: [1, 2]}});
const color1 = color.apply(1);
const color2 = color.apply(2);

// ...

Plot.lineY(data, {x: "Date", y: "Value", stroke: color1}),

I'm not sure what happened here. Now that I again look at the link you posted above, I see an extended version of the example you've posted here. Either I didn't see it the first time I clicked the link in which case it was my mistake and I apologize; or the example wasn't in the docs at that time; or you had just added it and I was viewing a cached version of the web-page.

I know you two are the main developers and I hate to waste your time. But that only makes it so much more frustrating when my simple problem doesn't get solved, because I then have to waste your time even more. And when you appear annoyed and kind of gruff at these low-level support questions, it feels a bit like walking on egg-shells around you, and that makes it even more frustrating to try and get help.

I understand completely if it is very stressful with all these demands on you. I saw you recently raised many millions of dollars, so why not get a junior developer to handle these low-level support issues, so we don't have to bother you, and you can focus on more important things? Just a polite suggestion.