ideogram/examples/human.html

Chromosome visualization with D3.js

<!DOCTYPE html>
<html>
<head>
  <title>Human | Ideogram</title>
  <style>body {font: 12px Arial; line-height: 19.6px;}</style>
  <script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
</head>
<body>
  <h1>Human | Ideogram</h1>
  <a href=".">Back to overview</a> |
  <a href="multiple_primates.html">Previous</a> |
  <a href="mouse.html">Next</a>
  <p>
    A human genome is depicted below.  The grey and black bands in each chromosome
    represent
    <a href="https://en.wikipedia.org/wiki/Heterochromatin">heterochromatin</a>.
    The pink region is the area around the
    <a href="https://en.wikipedia.org/wiki/Centromere">centromere</a>, and the blue represents variable regions.
  </p>
  <p>
    This ideogram shows most chromosomes in a
    <a href="https://en.wikipedia.org/wiki/Ploidy">haploid</a> state for
    simplicity.  For more accurate, diploid representation of human genomes,
    see <a href="ploidy_basic.html">Ploidy, basic</a> and
    <a href="multiple_trio">Multiple, trio</a>.
  </p>
  <script type="text/javascript">

    var ideogram = new Ideogram({
      organism: "human"
    });

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