observablehq / plot

A concise API for exploratory data visualization implementing a layered grammar of graphics
https://observablehq.com/plot/
ISC License
4.16k stars 170 forks source link

Rugs (and marginal histograms?) #791

Closed mbostock closed 1 year ago

mbostock commented 2 years ago

We could have a convenience constructor for rules (by assigning insets, or perhaps by exposing a length option on rules) that lets them be used to create rug plots, similar to geom_rug in ggplot2.

Fil commented 2 years ago

The trouble with ticks is that there is a lot of occlusion, and no good way to fight it (opacity breaks if there are many ticks; and jittering is only the cheapest way to create a sense of local density).

Here are three alternatives with bins represented as symbols or rects: https://observablehq.com/@fil/plot-rugs

When Plot.dodgeX lands it will be better. We could also imagine a layout that returns the violin shape of a 1-d distribution.

Another alternative that would be useful is if we could pass a pixel-height to a 1-dimensional rect mark, which reconnects to your suggestion of a length option on rules: when a 1-d mark is inserted in a 2-d context, frameAnchor tells us where it goes, but not what its size on the opposite axis is.

Capture d’écran 2022-02-27 à 10 46 50 Capture d’écran 2022-02-27 à 10 46 59
mbostock commented 2 years ago

The trouble with ticks is that there is a lot of occlusion

Sure, but it’s easy to do, and there’s precedent, and it’s sometimes useful.

I would also like us to have a good way to produce marginal histograms, e.g.

https://www.tableau.com/about/blog/2015/11/how-make-scatterplot-marginal-histograms-45811 https://vega.github.io/vega-lite/examples/concat_marginal_histograms.html https://www.mathworks.com/help/stats/scatterhist.html https://stackoverflow.com/questions/8545035/scatterplot-with-marginal-histograms-in-ggplot2

You showed how to do that with the group transform here, and counts:

https://talk.observablehq.com/t/github-like-activity-diagram-with-some-modifications/6285/3

But I’m not sure we have a good way of doing that with bars of varying length (or rects), since in effect this requires multiple x or y scales (one of the main plot and one for the margins). You can also do it by constructing multiple plots and then laying them out with CSS, but that’s probably more work than we want.

Fil commented 2 years ago

Yes, my point was to say that we should generalize the concept of "controlling the opposite dimension of a 1-dimensional mark, even when it's in a 2-d context".

Currently for such a mark [and supposing its main dimension is X], the y dimension will span all of [marginBottom + insetBottom, height - marginTop - insetTop], where what we'd want is something based on frameAnchor & a given height. This might also be useful for layouts (?)

Fil commented 2 years ago

(Rehashing of the same idea as my comment above.)

Thinking about side plots (for example a 1d KDE on the side of a scatterplot), I wonder if we need a new generic way to indicate that x or y is dimensionless (i.e., the Y channel should not be scaled, nor should it inform the scales, and the positions of the marks should be given by a normalized value in (0,1) to be displayed with frameAnchor and a given size (inwards or outwards)—which would in a sense be a separate scale, or side scale, with no data domain.

jrus commented 2 years ago

Let me recommend wedge shapes e.g. https://observablehq.com/@jrus/d3-density-contours https://observablehq.com/@jrus/pj

If you want a better idea of the distribution in denser areas you can even layer wedges at different densities (e.g. the top layer can be deciles, the next layer %iles, then ‰iles, ...). E.g. see https://observablehq.com/@jrus/ford-circles

Fil commented 1 year ago

This works really well now, and wedges are 👍 https://observablehq.com/@recifs/density-plot-side-rug

I don't think we need an additional specific mark, with vectors and frameAnchor. Closing as completed.