Conditional custom colors

Community Help
1

I have a scatterplot where the stroke color for the points is a variable that can be selected from a dropdown. So, by default if a categorical variable is selected, the 10 color palette is used and if a continuous variable is selected, the turbo colormap is used. How do I set a custom palette and a custom colormap for both of these types of input in the same plot?

viewof x = Inputs.select(["depth","table","price"], {value: "depth", multiple: false, label: "X axis"})

viewof y = Inputs.select(["depth","table","price"], {value: "table", multiple: false, label: "Y axis"})

viewof col = Inputs.select(Object.keys(diamonds[0]).sort(), {value: "cut", multiple: false, label: "Color variable"})

Plot.plot({
  color: {
    legend: true
    //type: "categorical",
    //range: ["green", "purple", "orange", "yellow", "blue", "pink", "brown", "grey", "green", "lavender"]
  },
  marks: [
    Plot.dot(diamonds, {
      x: x,
      y: y,
      stroke: col,
      tip: true,
      channels: {Color: "color", Clarity: "clarity"}
    })
  ],
  grid: true
})

Here is a notebook that I am working with:

https://observablehq.com/d/38a75cdbdb9d0db3

2

There might be a better idea but here’s a possibility: compute a chart and let Plot decide on the default color scale; then read back its type, it will be “linear” or “ordinal”

Plot.dot(table, {fill:col}).plot().scale("color").type

(you can add filter:[] to avoid “drawing” the dots in the plot that will be discarded instantly anyway)

3

Thanks for the input. It’s not clear to me exactly what you mean. Could you please create a working example possibly using the example above?

4

sure! here’s a suggestion
https://observablehq.com/compare/38a75cdbdb9d0db3...9804e992c95e0fdb