🏠 back to Observable

Plot facets with varying scales?

Is it possible to use facets in Plot to create small multiples that have different scales on one axis?

For example, I am trying to graph covid cases and fatalities with plot, but using the facet feature puts them on the same scale, which is… less than helpful:

image

Ideally the facets could share an x-scale but have their own independent y-scales.

Here’s the code I have so far

Plot.plot({
  y: {
    tickFormat: 's'
  },
  facet: {
    data: data,
    y: 'key',
  },
  marks: [
    Plot.line(data, {
      x: 'date',
      y: 'value',
      stroke: 'key',
    })
  ]
})

Plot doesn’t yet support dual-axis charts, which are not recommended.

There are however several ways to “hack” this.

For example, by using the Plot.normalizeY transform (or an ad-hoc Plot.mapY transform).

Also, since Plot is just a function, you can call it with various arguments in a loop:

html`${["cases", "deaths"].map(cause => Plot.plot({
    ……… Plot.line(data, {y: cause… }}) … )
)}`

Faceting is really about plotting various “facets” of the data over the same scales, but by normalizing the data, you can hack it to do more things, like in Plot scatter plot matrix / Fil / Observable . (This is however another order of difficulty, and I’d recommend to try one of the approaches above.)

The article you link does recommend side-by-side charts, which are what I’m trying to do, though :wink:

Will take a look at your recommendations though! Your scatter plot matrix is super interesting!