Setting colours with Plot.line

[Wolsten]

Hi,

As a newbie I understand this is probably a trivial question but I cannot find a worked example of setting colours for multiple series of data. This is my existing code

      let marks = []
      seriesData.forEach( (entry,i) => marks.push( Plot.line(entry.points, {
          x: "start", 
          y: "value",
      })))

      console.log('marks',marks)

      const plot = Plot.plot({
          x: {
              label: "Year"
          },
          y: {
              label: "Events"
          },
          marks
      })

which plots out nicely. There will be about 10 series and I would like to use one of the many standard schemes I found in the docs here https://github.com/observablehq/plot

I have tried many permutations but none of them stop the lines coming out all black. One I tried was this:

        const plot = Plot.plot({
            color : {scheme: d3.schemeCategory10},
            x: {
                label: "Year"
            },
            y: {
                label: "Deaths"
            },
            marks,
        })

but this raises an exception:

Uncaught Error: unknown scheme: #1f77b4,#ff7f0e,#2ca02c,#d62728,#9467bd,#8c564b,#e377c2,#7f7f7f,#bcbd22,#17becf
    at quantitativeScheme (schemes.js:241:42)
    at ScaleQ (quantitative.js:60:105)
    at ScaleLinear (quantitative.js:111:10)
    at Scale (scales.js:164:63)
    at Scales (scales.js:27:21)
    at plot (plot.js:51:28)
    at Series.svelte:48:22
    at run (index.mjs:18:12)
    at Array.map (<anonymous>)
    at index.mjs:1802:45

Many thanks for any help.

[mbostock]

For multiple lines, the recommended pattern is to use tidy data where you have a single dataset that represents all of your series, together. For example, you might have a CSV file like this:

category,date,value
apples,2021-01-01,49
apples,2021-01-02,2
apples,2021-01-03,25
…
oranges,2021-01-01,17
oranges,2021-01-02,36
…

You can create a fake dataset like so:

data = ["apples", "oranges", "bananas"].flatMap(category => {
  let value = 0;
  return d3.utcDays(new Date("2021-01-01"), new Date("2022-01-01")).map(date => {
    value += Math.round(Math.random() * 100 - 50); // random walk
    return {category, date, value};
  });
})

You can then render this like so:

Plot.plot({
  marks: [
    Plot.ruleY([0]),
    Plot.line(data, {x: "date", y: "value", stroke: "category"})
  ]
})

If you want to specify a custom scheme, you can set the scheme option on the color scale. The scheme option refers to the name of a scheme; use the range option if you want to specify an array of values. Either {scheme: "category10"} or {range: d3.schemeCategory10} should work.

Plot.plot({
  color: {
    scheme: "category10"
  },
  marks: [
    Plot.ruleY([0]),
    Plot.line(data, {x: "date", y: "value", stroke: "category"})
  ]
})

If you have the data as separate series without a category field and want to render them as individual marks, you could also do something like this:

Plot.plot({
  marks: [
    Plot.ruleY([0]),
    Plot.line(apples, {x: "date", y: "value", stroke: "red"}),
    Plot.line(oranges, {x: "date", y: "value", stroke: "orange"}),
    Plot.line(bananas, {x: "date", y: "value", stroke: "yellow"})
  ]
})

But generally it is preferred that the nominal/categorical field is represented in your data rather than assigning colors manually.

Live notebook: https://observablehq.com/d/5c8c14e276cc6a5a

[Wolsten]

Great, thanks Mike!