Displaying samples from different populations as offset nodes

[hyanwong]

Leo Spiedel sometimes shows the population to which a sample belongs as a symbol below the tree tips, with the populations offset on the Y axis. This can help locate clusters of samples, which can otherwise be quite tricky. Here's an example, ported to the draw_svg function, with 8 populations coloured:

Before:

After offsetting

the offset has been done by css:

style = "".join([f".p{i}.leaf .sym {{transform: translateY({0}px)}}" for i in range(inferred_ts.num_populations)])

I think this is quite neat, but it doesn't work with ancient samples, and we don't have labels for the population names. Maybe something to think about in the future?

[petrelharp]

Nice idea! More generally this offset could be a vector of values, e.g. latitude or phenotype or sampling time.

[hyanwong]

If we assume all the samples are at 0, we could write a helper function to make this easy to do. But it feels like a bit of a hack.

[hyanwong]

Here's an example (low quality) from Simon Myer's recent presentation, not a tskit generated image AFAIK

[benjeffery]

Love that you've managed to achieve this in CSS! Seems a nice option to have.

[hyanwong]

I wonder if we want an extra row of symbols on top of the "normal" sample symbols, which we normally hide but we can otherwise move around as necessary. Seems a bit excessive unless we can see other ways to use them though (like a "key")

[gavinband]

Hi, what about giving us a <g> element for each leaf with an attribute telling the sample identifier and one with the population label. (Or is this what's there already?) Then we could write javascript / d3 to plot it however we want.

[hyanwong]

That's there already. The node ID is unique for each sample (you can get it using ts.samples()) and the nodes are in a group with the class ".n0" for node 0, ".n1" for node 1, etc. They also have the class ".p0" for population 0, and so on. See here: https://tskit.dev/tutorials/viz.html#styling