Dual-scale charts (bad idea)?

[mbostock]

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

[Fil]

Discussion: https://github.com/observablehq/plot/discussions/626

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

[papakpmartin]

Just a quick note that while I do understand that dual scale charts can be badly used, I frequently find myself wishing for them. Eespecially when I'm looking at runtime data from a system that I've sensored up; even though "flow" and "conductivity" might have totally different scales, how they relate to each other at each moment is the thing I want to see.

Doing that side by side or even above/below is hard to look at and be sure you're lined up on the same moment.

[Fil]

It would be nice to have a few concrete examples to reason about.

For example, if we have two scales, one might be linear and the other log. Or one might be ordinal and the other temporal? (The only thing they share, in fact, is a common range.)

How would we indicate which scale is associated to which mark? Would a mark be able to use the two scales at once (for example to draw an arrow from (x1, y1) scaled with xa and ya to (x2, y2) scaled with xb and yb)?

(Using a normalisation map transform might help to solve the problem above, maybe?)

And there is the question of the dual axis: each axis would have to know what scale it represents, on which side it is, etc.

[papakpmartin]

I'm not sure if I'll answer your questions very well, but in the use case I had yesterday I was displaying two measurements (on Y axes) over time (X axis), for example, flow and conductivity mentioned above. This was extremely useful to identify certain effects as we modified the system.

Concerning Y scales, maybe I'm being foolish, but why not let either scale be whatever one wants? For example, if I'm exploring effects on a system, it could be really valuable to have one scale be linear and the other log because the nature of those two measured items might be that different, but their relationship over time might still be worth seeing.

I don't think one should be able to use both scales (like an arrow from one scale into the other). That doesn't make sense to me; but each mark having it's own scale makes pretty intuitive sense, I think.

As far as the each axis knowing question, I'd thought that the y: { axis: "right"... idea seems intuitive... maybe that can be moved inside a mark for these? Like maybe...

Plot.lineY(output_draw_data, {
  x: "timestamp",
  y: "value",
  stroke: "red",
  curve: "step-after",
  axis: "right",
 }),

I'm just riffing there... I know it's not that easy. But maybe calling out an axis there and then having y.axis optionally take an an object like...

Plot.plot({
  y: {
    "left":  { type: "log", nice: true, line: true, color: green },
    "right": { nice: false, line: true, color: orange }
  }
}

...would be clear and easy enough?

[papakpmartin]

So I guess I'm thinking something that acts like Vega-Lite's "resolve": {"scale": {"y": "independent"}}. Which does permit differing scale.types for each y axis/

[papakpmartin]

Any further consideration of this lovely idea? :)

(Guess who has some more dual-scale charts to make.)

[Fil]

I don't see us supporting several y scales in the near future, but we certainly want to find ways to ease the pain of doing dual-axis charts now.

I've added another alternative at the bottom of my notebook, showing how you can create a mark that return a D3 axis: https://observablehq.com/@observablehq/dual-axis-bar-line-chart

[MarioDelgadoSr]

FWIW:

Despite Ms. Muth's recommendations/assertions ( https://blog.datawrapper.de/dualaxis/ ), dual-axis Pareto charts ( https://en.wikipedia.org/wiki/Pareto_chart ) offer high information-per-pixel.

See: Avoiding the Dual Axis Chart: The Exceptions: https://policyviz.com/2022/10/06/avoiding-the-dual-axis-chart

[Fil]

Vega-Lite has a notion of "independent" scales, as in https://vega.github.io/vega-lite/examples/layer_dual_axis.html Related: #1247

[mbostock]

Yes, I think we could do this by having a y1/y2 scale declared through a channel override. And then change implicit axes to draw axes for both scales.

[ezralee]

+1 as it's not always possible to convince stakeholders that there's "better" options

[MarkGStacey]

Certainly something I would like to use ~ e.g.g body fat percentage against weight is one example where the scales don't match up, but you want to overlay them to observe correlation

[papakpmartin]

Any progress or hints (other than what's been documented above)? Pro account user asking, FWIW. :)

[mbostock]

@papakpmartin All progress is already shown above; we’re not hiding any secret progress! 😅 If you’re interested in this feature, please upvote by giving a 👍 reaction to the top post.

[mbostock]

Here’s another take on a dual-axis chart: https://observablehq.com/@observablehq/plot-dual-axis

[Leftium]

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

So apparently the author of that article responded on HN: (emphasis mine)

Author here. Thanks for setting the context: Datawrapper – the data vis tool I write articles like this for – is indeed for people who want to make a point with their charts and maps, often to a broad audience. I agree that people who have learned to read dual axis charts can benefit greatly from them (the same is true for rainbow color maps).

Financial Times journalist John Burn Murdoch changed my mind on dual axes charts – even for casual readers! – a bit over the last six years, too. Here's a dual axis chart he created for the FT: https://x.com/AlexSelbyB/status/1529039107732774913

The next article I write on dual axis charts will probably be a "What to consider when you do use them" one.

---

Full Hacker News thread