Merge pull request #261 from hyanwong/prettify-welcome

Put a picture on the tutorial welcome page

Author: benjeffery

intro.md

@@ -16,9 +16,62 @@ kernelspec:
 # Welcome!
 
 This site contains a number of tutorials to develop your understanding of
-[succinct tree sequences](https://tskit.dev/learn/) as implemented in the
-[tree sequence toolkit](https://tskit.dev/tskit/docs/), along with software
-programs, such as [msprime](https://tskit.dev/msprime/docs), that use them.
+genetic genealogies, ancestral recombination graphs, and the
+[succinct tree sequence](https://tskit.dev/learn/) storage format,
+as implemented in [`tskit`: the tree sequence toolkit](https://tskit.dev/tskit/docs/).
+Also included are a number of tutorials showing advanced use of
+[software programs](https://tskit.dev/software/),
+such as [`msprime`](https://tskit.dev/msprime/docs), that form part of the
+[`tskit` ecosystem](https://tskit.dev).
+
+```{code-cell} ipython3
+:tags: [remove-input]
+import math
+import msprime
+
+def make_7_tree_4_tip_ts():
+    ts = msprime.sim_ancestry(
+        4, ploidy=1, random_seed=889, sequence_length=1000, recombination_rate=0.001)
+    ts = msprime.sim_mutations(ts, rate=2e-3, random_seed=123)
+
+    # Check we have picked a random seed that gives a nice plot of 7 trees
+    tip_orders = {
+        tuple(u for u in t.nodes(order="minlex_postorder") if t.is_sample(u))
+        for t in ts.trees()
+    }
+    topologies = {tree.rank() for tree in ts.trees()}
+    assert tip_orders == {(0, 1, 2, 3)} and len(topologies) > 1 and ts.num_trees == 7
+
+    return ts
+
+
+ts = make_7_tree_4_tip_ts()
+
+# Set some parameters: these can be adjusted to your liking
+tree_width = 80
+height = 200 # Normal height for tree + x-axis
+y_step = 20  # Stagger between trees (i.e. 0 for all trees in a horizontal line)
+skew = 0.7  # How skewed the trees are, in radians
+
+width = tree_width * ts.num_trees + 20 + 20  # L & R margins in draw_svg = 20px
+angle = math.atan(y_step/tree_width)
+ax_mv = y_step, (ts.num_trees - 1) * y_step - 90 + math.tan(skew) * (tree_width * .9)
+
+# CSS transforms used to skew the axis and stagger + skew the trees
+style = f".x-axis {{transform: translate({ax_mv[0]}px, {ax_mv[1]}px) skewY(-{angle}rad)}}"
+for i in range(ts.num_trees):
+    # Stagger each tree vertically by y_step, transforming the "plotbox" tree container
+    style += (
+        f".tree.t{i} > .plotbox " + "{transform:" +
+        f"translateY({(ts.num_trees - i - 1) * y_step-85}px) skewY({skew}rad)" + "}"
+    )
+
+# Define a bigger canvas size so we don't crop the moved trees from the drawing
+size = (width, height)
+canvas_size = (width + y_step, height + math.tan(skew)*tree_width)
+
+ts.draw_svg(size=size, x_scale="treewise", style=style, canvas_size=canvas_size)
+```
 
 If you are new to the world of tree sequences, we suggest you start with the
 first tutorial: {ref}`sec_what_is`