ideogram/examples/annotations_tracks.html

Chromosome visualization with D3.js

<!DOCTYPE html>
<html>
<head>
  <title>Annotations, tracks | Ideogram</title>
  <style>body {font: 12px Arial; line-height: 19.6px;}</style>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
  <script type="text/javascript" src="../dist/js/ideogram.min.js"></script>
</head>
<body>
  <h1>Annotations, tracks | Ideogram</h1>
  <a href=".">Back to overview</a> |
  <a href="annotations_overlaid.html">Previous</a> |
  <a href="annotations_external_data.html">Next</a>
  <p>
    1000 <a href="https://github.com/eweitz/ideogram/blob/ca64a3c51e1b5ecaae89d2422ffc408565743644/scripts/create_annots.py#L68">
    randomly generated</a> SNVs across the human genome, artificially categorized
    as "pathogenic" (red), "uncertain significance" (grey) or "benign" (green).
  </p>
  <script type="text/javascript">

  var annotationTracks = [
    {"id": "pathogenicTrack", "displayName": "Pathogenic", "color": "#F00"},
    {"id": "uncertainSignificanceTrack", "displayName": "Uncertain significance", "color": "#CCC"},
    {"id": "benignTrack",  "displayName": "Benign", "color": "#8D4"}
  ]

  var config = {
    organism: "human",
    orientation: "vertical",
    chrWidth: 8,
    annotationsPath: "../data/annotations/1000_virtual_snvs.json",
    annotationTracks: annotationTracks,
    annotationHeight: 3.5
  };

  var ideogram = new Ideogram(config);

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