ideogram/examples/ploidy_rearrangements.html

Chromosome visualization with D3.js

<html>
<head>
  <title>Ploidy, rearrangements | Ideogram</title>
  <style>body {font: 12px Arial; line-height: 19.6px;}</style>
  <script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
  <script type="text/javascript" src="../data/bands/native/banana.js"></script>
</head>
<body>
  <h1>Ploidy, rearrangements | Ideogram</h1>
  <a href=".">Back to overview</a> |
  <a href="ploidy_basic.html">Previous</a> |
  <a href="ploidy_recombination.html">Next</a>
  <p>
    This triploid banana genome is a hybrid of
    <i>Musa acuminata</i> ("A") and <i>Musa balbisiana</i> ("B").
    <br/>
    Chromosomal rearrangements shown below include:
    <ul>
      <li>Arm gained in a copy of chromosome 1</li>
      <li>Arm lost in a copy of chromosome 2</li>
    </ul>
  </p>
  <script type="text/javascript">

    var config = {
      organism: "banana",
      // armColors: ["#D00", "#CCC"],
      // armColors: ["#fff", "#fff"],
      // armColors: ["#dea673", "#7396be"],
      orientation: "horizontal",
      ploidy: 3,
      ancestors: {
        "A": "#dea673",
        "B": "#7396be"
      },
      ploidyDesc: [
        {'AABB': ['11', '11', '11', '02']},
        {'AAB': ['01', '11', '11']},
        'BAB',
        {'AABB': ['11', '11', '11', '20']},
        'AAB',
        'BBB',
        {'AAB': ['01', '11', '11']},
        'AAB',
        'AAB',
        'AAB',
        'AAB'
      ]
    };

    var ideogram = new Ideogram(config);

  </script>
</body>
</html>