ideogram/examples/annotations_basic.html

Chromosome visualization with D3.js

<!DOCTYPE html>
<html>
<head>
  <title>Annotations, basic | Ideogram</title>
  <script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
  <style>
    html, body {
      height: 100%;
      font: 12px Arial;
      line-height: 19.6px;
    }
  </style>
</head>
<body>
  <h1>Annotations, basic | Ideogram</h1>
  <a href=".">Back to overview</a> |
  <a href="homology_interspecies.html">Previous</a> |
  <a href="annotations_overlaid.html">Next</a>
  <p>
  The location of <a href="https://www.ncbi.nlm.nih.gov/gene/672">BRCA1</a> is depicted here in red.
  </p>
  <script type="text/javascript">

    var config = {
      organism: "human",
      chromosome: "17",
      chrHeight: 600,
      orientation: "horizontal",
      annotations: [{
        "name": "BRCA1",
        "chr": "17",
        "start": 43044294,
        "stop": 43125482
      }]
    };

    var ideogram = new Ideogram(config);

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