Skip to content

Show an example of gene annotation in viz #319

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hyanwong merged 1 commit into from
May 16, 2026
Merged

Show an example of gene annotation in viz #319

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 36 additions & 4 deletions viz.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ tree3.draw_svg(

(sec_tskit_viz_labelling)=

### Labelling
### Labelling and annotation

Although the default node and mutation labels show unique identifiers, they are't
terribly intuituive. The `node_labels` and `mutation_labels` parameters can be used
Expand Down Expand Up @@ -365,10 +365,42 @@ ts_mutated.draw_svg(
)
```

#### Annotating genome regions

To annotate genomic regions along the X axis of the tree sequence plot, you can pass a
dictionary of `x_regions`, mapping `(start, end)` tuples to labels. Below we have also
used css to hide all but the first and last x axis tick label to avoid visual clashing,
and hidden all the mutation and node labels by setting them to `{}`:

```{code-cell} ipython3

x_regions = {(5_000, 12_000): "Gene 1", (21_123, 33_321): "Gene 2"}
hide_internal_x_tick_labels = (
".x-axis .tick .lab {visibility: hidden}"
".x-axis .tick:first-of-type .lab, .x-axis .tick:last-of-type .lab {visibility: visible}"
".x-regions .r1 rect {fill: cyan}" # 2nd region (ID 1) tagged with class="r1"
)
ts_mutated.draw_svg(
size=(1000, 300),
y_axis=True,
y_ticks=range(0, int(ts_mutated.max_time), 1000),
node_labels={},
mutation_labels={},
style=hide_internal_x_tick_labels,
x_regions=x_regions,
)
```

#### Arbitrary annotation

It is also possible to add arbitrary annotations to the SVG plot, as detailed
in the next section. To locate positions for annotation, see the examples in
{ref}`sec_tskit_viz_svg_plot_internals`.


(sec_tskit_viz_adding_bespoke)=

### Adding bespoke svg
### Adding bespoke SVG

The `preamble` option allows arbitrary SVG text to be added at the start of the plot.
This can be useful to annotate plots, produce legends, etc. although it requires some
Expand Down Expand Up @@ -1921,7 +1953,7 @@ tanglegram(non_ultrametric_ts, node_labels={u:u for u in ts_mutated.samples()},
```

Here's a larger tanglegram example (Note that if you want to compare two trees in their
own separate tree sequences, you can concatenate them togther using
own separate tree sequences, you can concatenate them together using
{meth}`.TreeSequence.concatenate`).

```{code-cell} ipython3
Expand Down Expand Up @@ -2191,7 +2223,7 @@ drawinfo = d3arg.draw(
show_mutations=True,
label_mutations=True,
)
print(f"Extra styling is possible by targetting CSS at this unique id: {drawinfo.uid}")
print(f"Extra styling is possible by targetting CSS at this unique id: #{drawinfo.uid}")
```

For more general graph plots, it can be helpful convert the tree sequence to a
Expand Down
Loading