learn.html

---
layout: page
title: Learn
description: Videos, tutorials and articles about tree sequences.
permalink: /learn/
---
<!-- START: hero-type-2 -->
<div class="hero hero--type-2">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-lg-6">
                <h2 id="what-is" class="hero__heading">
                    What is a tree sequence?
                </h2>
                <div class="hero__content wysiwyg">
                    <p>
                        A <em>succinct tree sequence</em>, or tree sequence for short, represents the relationships
                        between a set of DNA sequences. Tree sequences can be used to store genetic data
                        efficiently, and enable powerful analysis of millions of whole genomes at a time. They
                        can be created by simulation or by inferring relationships from genetic variation.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: hero-type-2 -->

<!-- START: cards-type-2 -->
<section class="section section--cards section--cards--type-2">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h3 class="section__heading">
                    Tree sequences provide:
                </h3>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-4">
                <!-- START: card -->
                <a href="{{ 'tutorials/what_is.html#sec-what-is-ancestry' | relative_url }}" class="card card--type-2">
                    <h4 id="genetic-ancestry" class="card__heading">
                        A full record of genetic ancestry
                    </h4>
                    <p class="card__text">
                        A tree sequence concisely captures the full history of a set of genomes by sharing
                        common branches between adjacent genetic trees
                    </p>
                    <span class="list__item__link link link--type-1">
                                <span class="link__text">
                                    Read more
                                </span>
                            </span>
                </a>
                <!-- END: card -->
            </div>
            <div class="col-lg-4">
                <!-- START: card -->
                <a href="{{ 'tutorials/what_is.html#sec-what-is-dna-data' | relative_url }}" class="card card--type-2">
                    <h4 id="DNA-encoding" class="card__heading">
                        An encoding of DNA data
                    </h4>
                    <p class="card__text">
                        Placing mutations on a tree sequence allows lossless representation and compression of
                        DNA datasets
                    </p>
                    <span class="list__item__link link link--type-1">
                                <span class="link__text">
                                    Read more
                                </span>
                            </span>
                </a>
                <!-- END: card -->
            </div>
            <div class="col-lg-4">
                <!-- START: card -->
                <a href="{{ 'tutorials/what_is.html#sec-what-is-analysis' | relative_url }}" class="card card--type-2">
                    <h4 id="efficient-analysis" class="card__heading">
                        An efficient analysis framework
                    </h4>
                    <p class="card__text">
                        Many of the analyses we perform on DNA data can be expressed naturally as operations on
                        the ancestral trees, leading to highly efficient algorithms
                    </p>
                    <span class="list__item__link link link--type-1">
                                <span class="link__text">
                                    Read more
                                </span>
                            </span>
                </a>
                <!-- END: card -->
            </div>
        </div>
    </div>
</section>
<!-- END: cards-type-2 -->

<!-- START: filters -->
<section class="section section--filters">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <h3 id="tutorials-publications-videos" class="section__heading">
                    Browse tutorials, publications and videos:
                </h3>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="btn-group" role="group" aria-label="Filters">
                    <a data-r-selector="all" onclick="switch_filter('all')" class="btn btn-outline-primary active" aria-current="page">All</a>
                    <a data-r-selector="paper" onclick="switch_filter('paper')" class="btn btn-outline-primary">Publications</a>
                    <a data-r-selector="tutorial" onclick="switch_filter('tutorial')" class="btn btn-outline-primary">Tutorials</a>
                    <a data-r-selector="video" onclick="switch_filter('video')" class="btn btn-outline-primary">Videos</a>
<!--                    <a onclick="switch_filter" class="btn btn-outline-primary">Applications</a>-->
                </div>
            </div>
        </div>
<!--        <div class="row">-->
<!--            <div class="col-md-8 col-lg-5">-->
<!--                <select class="form-select form-select-lg">-->
<!--                    <option>Choose resource type</option>-->
<!--                    <option value="publication">publication</option>-->
<!--                    <option value="tutorial">tutorial</option>-->
<!--                    <option value="video">video</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
    </div>
    <div class="container">
        <div class="row">
            {% assign resources = site.resources | sort: "timestamp" | reverse %}
            {% for r in resources %}
            <div class="col-lg-4" data-r-type="{{r.type}}">
                <!-- START: card -->
                <div class="card card--type-3">
                    <div class="card__metadata">
                        <span class="card__category">{{r.type | capitalize}}</span>
                    </div>
                    <h5 class="card__heading">
                        {{r.title}}
                    </h5>
                    {% if r.type == "paper" %}
                        <div class="wysiwyg">
                            <p>
                                {{ r.timestamp | date: "%d %B, %Y" }}
                            </p>
                            <p>
                                {{ r.journal }} ({{ r.year }}) {{ r.author }}
                            </p>
                            <p>
                                doi: <a href="https://doi.org/{{ r.doi }}">{{ r.doi }}</a>
                            </p>
                            <p>
                                {{r.content}}
                            </p>
                        </div>
                        <a href="https://doi.org/{{r.doi}}" class="list__item__link link link--type-1 link--type-1--external"
                           target="_blank"
                           rel="noopener noreferrer">
                                    <span class="link__text">
                                        Read the article
                                    </span>
                        </a>
                    {% endif %}
                    {% if r.type == "video" %}
                        <div class="wysiwyg">
                            <p>
                                {{ r.timestamp | date: "%d %B, %Y" }}
                            </p>
                            <p>
                                {{ r.who }} at {{ r.where }}</br>
                                {{ r.content }}
                            </p>

                        </div>
                        {% if r.youtube-id %}
                            <a href="https://www.youtube.com/watch?v={{r.youtube-id}}" class="video-trigger"
                               data-bs-toggle="modal" data-bs-target="#globalModal" data-video-id="{{r.youtube-id}}"
                               data-video-aspect-ratio="16x9">
                                <span class="visually-hidden">
                                    Play video
                                </span>
                                <div class="video-trigger__image-wrapper">
                                    <img alt="video thumbnail" class="img-fluid"
                                         src="https://img.youtube.com/vi/{{r.youtube-id | split: "&" | first }}/maxresdefault.jpg">
                                </div>
                            </a>
                        {% elsif r.vimeo-id %}
<!--                            Vimeo embeds don't work with out a code from the video creator, so just link-->
                            <a href="https://www.vimeo.com/{{r.vimeo-id}}" class="video-trigger">
                                <span class="visually-hidden">
                                    Play video
                                </span>
                            <div class="video-trigger__image-wrapper">
                                <img alt="video thumbnail" class="img-fluid"
                                     src="{{r.thumbnail}}">
                            </div>
                            </a>
                        {% endif %}
                    {% endif %}
                    {% if r.type == "tutorial" %}
                        <div class="wysiwyg">
                            <p>
                                {{ r.timestamp | date: "%d %B, %Y" }}
                            </p>
                            <p> {{ r.content }} </p>
                        </div>
                        <a
                            {% if r.url_override %}
                                href={{ r.url_override }}
                            {% else %}
                                href={{ '/tutorials/' | append: r.tutorial_id | append: '.html' | relative_url }}
                            {% endif %}
                           class="list__item__link link link--type-1 link--type-1--external"
                           target="_blank"
                           rel="noopener noreferrer">
                                    <span class="link__text">
                                        See the tutorial
                                    </span>
                        </a>
                    {% endif %}

<!--                    <div class="card__metadata">-->
<!--                        <span class="card__tag">Population genetics</span>-->
<!--                    </div>-->
                </div>
                <!-- END: card -->
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- START: pagination -->
    <div class="container" style="display: none">
        <div class="row">
            <div class="col">
                <nav class="pagination-wrapper">
                    <ul class="pagination list list--unstyled list--horizontal">
                        <li class="list__item">
                                    <span class="pagination__number pagination__number--prev disabled">
                                        Prev
                                    </span>
                        </li>
                        <li class="list__item">
                                    <span class="pagination__number pagination__number--current">
                                        1
                                    </span>
                        </li>
                        <li class="list__item">
                            <a class="pagination__number" href="#">
                                2
                            </a>
                        </li>
                        <li class="list__item">
                            <a class="pagination__number" href="#">
                                3
                            </a>
                        </li>
                        <li class="list__item">
                            <a class="pagination__number" href="#">
                                4
                            </a>
                        </li>
                        <li class="list__item">
                                    <span class="pagination__dots">
                                        &hellip;
                                    </span>
                        </li>
                        <li class="list__item">
                            <a class="pagination__number" href="#">
                                12
                            </a>
                        </li>
                        <li class="list__item">
                            <a class="pagination__number pagination__number--next" href="#">
                                Next
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
    <!-- END: pagination -->

</section>
<!-- END: cards-type-3 -->