Can plot multiple charts with 2 y axis?

[tx0c]

e.g. can this Bar-Line Chart be expressed in a simple Plot.plot?

https://observablehq.com/@d3/bar-line-chart

https://observablehq.com/collection/@observablehq/plot I don't find anything similar from the collection

[mbostock]

From the README:

Plot does not currently support dual-axis charts, which are not advised.

https://blog.datawrapper.de/dualaxis/

[tx0c]

https://blog.datawrapper.de/dualaxis/

that article is not very convincing, it's all using examples of all line-charts, I do partially agree with that when using dual axises under same type of charts;

but not the cases with the example Bar-Line Chart here, when using different types of charts

Especially when many other libraries already have that,

https://vega.github.io/vega-lite/examples/layer_dual_axis.html Good example of area chart and line chart

[Fil]

for reference, another paper on the topic
https://policyviz.com/2023/01/17/avoiding-the-dual-axis-chart-part-ii/

[Fil]

https://observablehq.com/@fil/dual-axis-bar-line-chart

[tx0c]

that looks cool,

but, what are these parameters, what types? does it have good documentation?

(_, { x }, __, { ...dimensions }) =>     // from the use of `x` I can guess it's a d3-scale function,
  Plot.plot({
    // ...
    x: {
      type: "identity",
      transform: (v) => x(v) + x.bandwidth() / 2,
      axis: null
    }, // reuse scale x.
  })

https://observablehq.com/collection/@observablehq/plot Would you mind write something in the collection for (d3) advanced users, to be able extend it when there aren't enough builtin? and people can maintain this as extended Plot charts, if the core Plot doesn't want them builtin

[Fil]

The internal API is not part of the public API, so not "officially" documented. One can infer from the code that they are (index, scales, channels, and dimensions), but we shouldn't rely on this internal API, which is subject to change.

To answer your question without using "cheating", I've added two alternatives to my notebook; both end up with the same chart using only documented features.

This should be considered as being experimental, since it is missing two elements:

1. how can we convey which scale corresponds to which mark. A usual solution is to change the color of the scale—I'm not sure it's enough, and in any case Plot doesn't have this option.
2. this approach doesn't work with faceting (which is one reason why we'll probably modify the internal API)

[tx0c]

1. can that function multiLayerX(config, base, ...layers) { be with a signature
   function multiLayerXPlot({ marks: [ base, ...layers ], ...options }) { then can be used everywhere a mark is used?
2. I tried to download the svg, seeing svg embedded inside svg and each svg level has its own style section, this might be due to Plot.plot get called inside another Plot.plot ? it's weird that svg embeded svg works, but this logic should have ways to optimize to only use a g without style when calling inside another Plot.plot ?

<svg class="plot-8534324273722" fill="currentColor" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle" width="780" height="400" viewBox="0 0 780 400"><style>
        .plot-8534324273722 {
          display: block;
          background: white;
          height: auto;
          height: intrinsic;
          max-width: 100%;
        }
        .plot-8534324273722 text {
          white-space: pre;
        }
      </style> .......