<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<div style="float: right; width: 60%;">
 
#### This page gives users the figure examples generated by <span style="color:red; background:linear-gradient(to right, red, yellow, green, cyan, yellow, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">ShinyWGD</span>

</div>

<style>
  .sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 100%;
    color: #4C4C4C;
    padding: 50px;
    padding-top: 50px;
  }
</style>

<div class="sidebar">

<!-- Content with the floating layout     border-right: 1px solid #A9A9A9;     background-color: #F9F9F9;
 -->
<!-- div style="position: fixed; top: 50%; left: 120px; transform: translate(0, -50%); background-color: #F9F9F9; color: #4C4C4C; padding: 10px 20px; border-radius: 8px; cursor: pointer; border: 2px solid #A9A9A9;" -->


##### Index:
- [<font color="orange"><i>K</i><sub>s</sub> Age Distribution</font>](#ks-plot)
  - [Paralog <i>K</i><sub>s</sub> age distribution](#paralog-ks)
    - [*Without GMM modeling*](#paralog-ks-without-gmm-modeling)
    - [*With GMM modeling*](#paralog-ks-with-gmm-modeling)
  - [Ortholog <i>K</i><sub>s</sub> age distribution](#ortholog-ks)
  - [Substitution rate correctiong](#rate-correction)
    - [*With paralogous species*](#rate-with-paralog)
    - [*Without paralogous species*](#rate-without-paralog)
- [<font color="orange">Synteny Analysis</font>](#synteny-analysis)
  - [Intra-comparing alignment](#intra-comparing)
    - [*Dot plot*](#intra-comparing-dot)
    - [*Parallel-line plot*](#intra-comparing-parallel)
    - [*Micro-synteny plot*](#intra-comparing-micro)
  - [Inter-comparing alignment](#inter-comparing)
    - [*Dot plot*](#inter-comparing-dot)
    - [*Parallel-line plot*](#inter-comparing-parallel)
    - [*Micro-synteny plot*](#inter-comparing-micro)
  - [Multiple-species alignment](#multiple-species-alignment)
  - [Clustering analysis](#clustering-analysis)
    - [*Clustering plot*](#clustering-plot)
    - [*PAR zoom-in plot*](#PAR-zoom-in)
- [<font color="orange">Tree Building</font>](#tree-building)
  - [<i>K</i><sub>s</sub> unit tree plot](#ks-tree)
  - [TimeTree plot](#time-tree)
  - [<i>K</i><sub>s</sub> unit tree and TimeTree joint tree plot](#joint-tree)
- [<font color="orange">Gene Tree – Species Tree Reconciliation</font>](#tree-reconciliation)


</div>

<div style="float: right; width: 60%;">

  <a name="ks-plot"></a>
  #### <font color="orange"><i>K</i><sub>s</sub> Age Distribution</font>
  ---
  <a name="paralog-ks"></a>
  ##### Paralog <i>K</i><sub>s</sub> age distribution

  <a name="paralog-ks-without-gmm-modeling"></a>
  ###### *Without GMM modeling*
  <img src="../images/Paralogous_Ks.Elaeis2.ks.png">

  <a name="paralog-ks-with-gmm-modeling"></a>
  ###### *With GMM modeling*
  <img src="../images/Paralogous_Ks.Elaeis2.ks_with_GMM.png">

  ---
  <a name="ortholog-ks"></a>
  ##### Ortholog <i>K</i><sub>s</sub> age distribution
  <img src="../images/Wgd_plot_ortholog.svg">

  ---
  <a name="rate-correction"></a>
  ##### Raletive rate correctiong

  <a name="rate-with-paralog"></a>
  ###### *With paralogous species*
  <img src="../images/Rate_correction_with_paralogous_species.svg">

  <a name="rate-without-paralog"></a>
  ###### *Without paralogous species*
  <img src="../images/Rate_correction.svg">

  ---
  <a name="synteny-analysis"></a>
  #### <font color="orange">Synteny Aanlysis</font>
  ---
  <a name="intra-comparing"></a>
  ##### Intra-comparing alignment
  <a name="intra-comparing-dot"></a>
  ###### *Dot plot*
  <img src="../images/Elaeis_guineensis.self.dot_plot-01.jpg">

  <a name="intra-comparing-parallel"></a>
  ###### *Parallel-line plot*
  <img src="../images/Elaeis_guineensis.Parallel.svg">

  <a name="intra-comparing-micro"></a>
  ###### *Micro-synteny plot*
  
  *In true chromosomal length scale*
  <img src="../images/one_species.microSyn.Multiplicon_5.true_length.svg">

  *In gene number scale*
  <img src="../images/one_species.Multiplicon_5.gene_number.svg">
  ---
  <a name="inter-comparing"></a>
  ##### Inter-comparing alignment

  <a name="inter-comparing-dot"></a>
  ###### *Dot plot*
  <img src="../images/Elaeis_guineensis_vs_Asparagus_officinalis.dot_plot-01.jpg">

  <a name="inter-comparing-parallel"></a>
  ###### *Parallel-line plot*
  <img src="../images/Elaeis_guineensis_vs_Asparagus_officinalis.Parallel-01.jpg">

  <a name="inter-comparing-micro"></a>
  ###### *Micro-synteny plot*
  <img src="../images/Elaeis_guineensis_vs_Asparagus_officinalis.microSyn.svg">

  ---
  <a name="multiple-species-alignment"></a>
  ##### Multiple-species alignment
  <img src="../images/Multiple_Species_Alignment.Parallel.svg">
  
  ---
  <a name="clustering-analysis"></a>
  ##### Clustering analysis

  <a name="clustering-plot"></a>
  ###### *Clustering plot*
  <img src="../images/Two_species.cluster-01.jpg">

  <a name="PAR-zoom-in"></a>
  ###### *PAR zoom-in plot*
  <img src="../images/PAR.cluster.svg" width="50%">
  <img src="../images/Vitis_vinifera_vs_Oryza_sativa.PAR_1.cluster.link.svg" width="80%">

  ---
  <a name="tree-building"></a>
  #### <font color="orange">Tree Building</font>

  <a name="ks-tree"></a>
  ##### <i>K</i><sub>s</sub> unit tree plot
  <img src="../images/ksTree.Plot.svg">

  <a name="time-tree"></a>
  ##### TimeTree plot
  <img src="../images/timeTree.Plot.svg">

  <a name="joint-tree"></a>
  ##### <i>K</i><sub>s</sub> unit tree and TimeTree joint tree plot
  <img src="../images/ksTree_timeTree.jointPlot.svg">

  ---
  <a name="tree-reconciliation"></a>
  #### <font color="orange">Gene Tree – Species Tree Reconciliation</font>
  <img src="../images/speciesTree.updated.whale.svg">
</div>

