search

tskit-dev / tskit-site

tskit website
Other
0 stars 8 forks source link

Nice picture to illustrate a tree sequence on the front page #4

Open benjeffery opened 3 years ago

benjeffery commented 3 years ago

High-level overview of tree-sequences, with some helpful graphics/animations.

hyanwong commented 3 years ago

You can assign me to this @benjeffery . Also, I wonder if on the front page, we should have an interactive (webgl) component to represent the TS on the top left? A bit like a simpler version of this, but with fewer haplotypes (say 4 or 5, rather than the 8 below) and with the "ribbons" at the bottom in a pale colour with As, Ts, Gs, and Cs, to give a hint to the geneticists.

3D ts

That way we get a nice static looking picture, but the fact that you can rotate it makes the front page a bit snazzier. Something like the top left graphic at https://web.chemdoodle.com

It can't be beyond our powers to make something like that, and it works fine on my mobile.

benjeffery commented 3 years ago

Sounds great - I've done webgl before. We should have a static fallback for non-compat browsers.

hyanwong commented 3 years ago

Do we want animations like the attached D3.js HTML in the intro, or is that a bit distracting? Perhaps it would be OK if e.g. they started on mouseover, but that's more problematic for mobile.

SPR.html.zip

benjeffery commented 3 years ago

I'm happy with auto-playing, looping animations. They will be missed and not played otherwise.

hyanwong commented 3 years ago

I just saw a site that used SVG animation-on-scroll quite effectively. That seems like a nice compromise between distracting eye-candy and something useful.

The site was (I realised later) a bit of a promotional ad, but here it is: https://equinor.ft.com/articles/building-worlds-largest-offshore-windfarm-in-uk (wind turbines move as you scroll!)

hyanwong commented 2 years ago

High level overview is now in the tutorials and appropriately linked, so maybe change the name of this issue to "Nice picture to illustrate a tree sequence on the front page"

hyanwong commented 2 years ago

@astheeggeggs suggested we could use something like the animation at the bottom of the viz tutorial: https://tskit.dev/tutorials/viz.html#animation

hyanwong commented 2 years ago

There's also this sort of thing - perhaps we could imagine a variant matrix being read out as trees?

https://user-images.githubusercontent.com/4699014/177599092-88760bcb-b10e-46ee-95c2-cf07bbe00324.mov