ideogram/examples/annotations_histogram.html

Chromosome visualization with D3.js

<!DOCTYPE html>
<html>
<head>
  <title>Annotations, histogram | Ideogram</title>
  <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>
  <script type="text/javascript" src="../src/js/filter.js"></script>
  <style>
    body {
      font: 12px Arial;
      line-height: 19.6px;
    }

    ul {
      list-style: none;
      padding-left: 10px;
      float: left;
    }

    #gene-type {
      padding-left: 30px;
    }

    .note {
      font-style: italic;
      padding-left: 10px;
      clear: left;
    }
  </style>
</head>
<body>
  <h1>Annotations, histogram | Ideogram</h1>
  <a href=".">Back to overview</a> |
  <a href="annotations_file_url.html">Previous</a> |
  <a href="annotations_animated.html">Next</a>
  <br/><br/>
  <div>
    This ideogram shows the distribution of all human genes throughout the genome.
    You can filter all 20,000+ genes in < 100 milliseconds by clicking the boxes below.
  </div>
  <div id="container"></div>
  <ul id="expression-level">
    Expression level
    <li>
      <label for="filter_expression-level_extremely-high">
        <input type="checkbox" id="filter_expression-level_extremely-high">Extremely high</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_expression-level_very-high">
        <input type="checkbox" id="filter_expression-level_very-high">Very high</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_expression-level_high">
        <input type="checkbox" id="filter_expression-level_high">High</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_expression-level_moderately-high">
        <input type="checkbox" id="filter_expression-level_moderately-high">Moderately high</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_expression-level_moderate">
        <input type="checkbox" id="filter_expression-level_moderate">Moderate</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_expression-level_low">
        <input type="checkbox" id="filter_expression-level_low">Low</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_expression-level_very-low">
        <input type="checkbox" id="filter_expression-level_very-low">Very low</input>
      <span class="count"></span>
      </label>
    </li>
  </ul>
  <ul id="gene-type">
    Gene type
    <li>
      <label for="filter_gene-type_mrna">
        <input type="checkbox" id="filter_gene-type_mrna">mRNA</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_gene-type_misc-rna">
        <input type="checkbox" id="filter_gene-type_misc-rna">misc_RNA</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_gene-type_mirna">
        <input type="checkbox" id="filter_gene-type_mirna">miRNA</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_gene-type_trna">
        <input type="checkbox" id="filter_gene-type_trna">tRNA</input>
      <span class="count"></span>
      </label>
    </li>
    <li>
      <label for="filter_gene-type_lncrna">
        <input type="checkbox" id="filter_gene-type_lncrna">lncRNA</input>
      <span class="count"></span>
      </label>
    </li>
  </ul>
  <div class="note">
    Expression data from NCBI SRA and GEO (<a href="https://trace.ncbi.nlm.nih.gov/Traces/sra/?run=SRR562645">SRR562645</a>, <a href="https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSE40705">GSE40705</a>)
    via <a href="https://github.com/NCBI-Hackathons/rnaseqview#rnaseqview">rnaseqview</a> pipeline.
  </div>
  <script type="text/javascript">

  var counts, key, count;
  var d3 = Ideogram.d3;

  d3.selectAll("input").on("click", function() {
    var filterMap,
        tmp, facet,
        checkedFilter,
        checkedFilters,
        selections = {},
        i, facet, counts, count,
        filterID;

    filterMap = {
      "expression-level": {
        "extremely-high": 7,
        "very-high": 6,
        "high": 5,
        "moderately-high": 4,
        "moderate": 3,
        "low": 2,
        "very-low": 1
      },
      "gene-type": {
        "mrna": 1,
        "misc-rna": 2,
        "mirna": 3,
        "trna": 4,
        "lncrna": 5
      },
      "tissue-type": {
        "cerebral-cortex": 1,
        "heart": 2,
        "liver": 3,
        "skin": 4,
        "skeletal-muscle": 5
      }
    };

    checkedFilters = d3.selectAll("input:checked").nodes();

    for (i = 0; i < checkedFilters.length; i++) {
      tmp = checkedFilters[i].id.split("_");
      facet = tmp[1];
      checkedFilter = tmp[2];

      filterID = filterMap[facet][checkedFilter];
      if (facet in selections == false) {
        selections[facet] = {};
      }
      selections[facet][filterID] = 1;
    }

    counts = ideogram.filterAnnots(selections);

    for (facet in counts) {
      for (i = 0; i < counts[facet].length; i++) {
        count = counts[facet][i];
        key = count.key - 1;
        value = "(" + count.value + ")";

        // document.querySelectorAll("#" + facet + " .count")[key].innerHTML = value;
      }
    }
  });

  var config = {
    container: "#container",
    orientation: "vertical",
    organism: "human",
    assembly: "GRCh37",
    chrHeight: 275,
    annotationsPath: "../data/annotations/SRR562646.json",
    annotationsLayout: "histogram",
    barWidth: 3
  };

  var ideogram = new Ideogram(config);
  </script>
</body>
</html>