ideogram
Version: 
Chromosome visualization for the web
84 lines (68 loc) • 2.12 kB
HTML
<html>
<head>
  <title>Homology, human and grape | Ideogram</title>
  <style>
    body {font: 14px Arial; line-height: 19.6px; padding: 0 15px;}
    a, a:visited {text-decoration: none;}
    a:hover {text-decoration: underline;}
    a, a:hover, a:visited, a:active {color: #0366d6;}
  </style>
  <script type="text/javascript" src="../../dist/js/ideogram.min.js"></script>
<link rel="icon" type="image/x-icon" href="img/ideogram_favicon.ico">
</head>
<body>
  <h1>Homology, human and grape | Ideogram</h1>
  <a href="../">Overview</a> |
  <a href="homology-advanced">Previous</a> |
  <a href="annotations-basic">Next</a> |
  <a href="https://github.com/eweitz/ideogram/blob/gh-pages/homology-interspecies.html" target="_blank">Source</a>
  <p>
    This demonstrates support for drawing features on a target genome that has
    very many cytogenetic bands
  </p>
  <p>
    See also: <a href='homology-human-chimpanzee'>Homology, human and chimpanzee</a>
  </p>
  <script type="text/javascript">
    function onIdeogramLoad() {
      var chrs, chr1, chr4, syntheticRegions, taxid1, taxid2;
      taxid1 = ideogram.getTaxid('homo-sapiens');
      taxid2 = ideogram.getTaxid('vitis-vinifera');
      var chrs = ideogram.chromosomes,
        chr1Org1 = chrs[taxid1]['1'],
        chr1Org2 = chrs[taxid2]['1'],
        syntenicRegions = [];
      range1 = {
        chr: chr1Org1,
        start: 1,
        stop: 1,
      };
      range2 = {
        chr: chr1Org2,
        start: 1,
        stop: 1
      };
      range2End = {
        chr: chr1Org2,
        start: 15072434,
        stop: 15072434
      };
      syntenicRegions.push({'r1': range1, 'r2': range2});
      syntenicRegions.push({'r1': range1, 'r2': range2End});
      ideogram.drawSynteny(syntenicRegions);
    }
  var config = {
    organism: ['homo-sapiens', 'vitis-vinifera'],
    chrHeight: 50,
    chrMargin: 5,
    perspective: 'comparative',
    chromosomeScale: 'relative',
    geometry: 'collinear',
    rotatable: false,
    onLoad: onIdeogramLoad
  };
  var ideogram = new Ideogram(config);
  </script>
</body>
</html>