ideogram/examples/multiple_primates.html

Chromosome visualization with D3.js

<!DOCTYPE html>
<html>
<head>
  <title>Multiple, primates | Ideogram</title>
  <script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
  <style>
    body {
      font: 12px Arial;
      line-height: 19.6px;
    }

    #content {
      margin-top: 30px;
    }

    .ideogram-container {
      float: left;
      margin-left: 15px;
    }

    #content .labeledLeft {
      padding-left: 0px;
      padding-top: 0;
    }

    .ideogram-name {
      font-style: italic;
      padding-left: 20px;
    }
  </style>
</head>
<body>
  <h1>Multiple, primates | Ideogram</h1>
  <a href=".">Back to overview</a> |
  <a href="multiple_trio.html">Previous</a> |
  <a href="human.html">Next</a>
  <p>
    Two genes are annotated on each genome below: APOB (red) and CTLA4 (blue).
    Their locations give evidence of ancient chromosome fusions and shared
    evolutionary origin.
  </p>
  <div id="content"></div>
  <script type="text/javascript">

    var config, orgConfigs, id, i, container, orgConfig, name;

    config = {
      chrHeight: 250,
      chrMargin: 2,
      orientation: "horizontal",
      showFullyBanded: false
    };

    orgConfigs = [
      {
        organism: "homo-sapiens",
        annotations: [
          {name: "APOB", chr: "2", start: 21001429, stop: 21044073, color: '#F00'},
          {name: "CTLA4", chr: "2", start: 203867788, stop: 203873960, color: '#77F', shape: 'circle'}
        ]
      },
      {
        organism: "pan-troglodytes",
        annotations: [
          {name: "APOB", chr: "2A", start: 21371172, stop: 21413720, color: '#F00'},
          {name: "CTLA4", chr: "2B", start: 94542849, stop: 94550230, color: '#77F', shape: 'circle'}
        ]
      },
      {
        organism: "macaca-fascicularis",
        annotations: [
          {name: "APOB", chr: "13", start: 89924186, stop: 89966894, color: '#F00'},
          {name: "CTLA4", chr: "12", start: 93412707, stop: 93419132, color: '#77F', shape: 'circle'}
        ]
      }
    ];

    for (i = 0; i < orgConfigs.length; i++) {
      orgConfig = orgConfigs[i];
      id = orgConfig.organism;
      // e.g. homo-sapiens -> Homo sapiens
      name = id[0].toUpperCase() + id.slice(1).replace('-', ' ');
      container =
        '<div class="ideogram-container">' +
          '<div class="ideogram-name">' + name + '</div>' +
          '<div id="' + id + '"></div>' +
        '</div>'
      document.querySelector("#content").innerHTML += container;
      config.organism = orgConfig.organism
      config.container = "#" + id;
      config.annotations = orgConfig.annotations;
      new Ideogram(config);
    }
  </script>
</body>
</html>