Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css"/>

  <!-- Necessary includes for LocusZoom.js -->
  <script src="https://cdn.jsdelivr.net/npm/d3@^5.16.0" type="text/javascript"></script>
  <script src="../dist/locuszoom.app.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../dist/locuszoom.css" type="text/css"/>

  <!-- LaTeX -->
  <script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
  </script>
  <script type="text/javascript"
  src="http://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
  </script>

  <script type="application/javascript" src="../dist/ext/lz-dynamic-urls.min.js"></script>

  <!-- Additional standalone code required for credible set calculations; not part of base LZjs -->
  <script type="application/javascript" src="https://unpkg.com/[email protected]/dist/gwas-credible-sets.min.js" integrity="sha384-lJL/xQT18Xu6GVovitlKgX4kL8hw6YfgLGVM5PWcFUMe+tfvznEwsJlauLzB1AnQ" crossorigin="anonymous"></script>
  <script type="application/javascript" src="../dist/ext/lz-credible-sets.min.js"></script>

  <title>LocusZoom.js ~ Credible Sets</title>

  <style>
    body {
      background-color: #FAFAFA;
      margin: 0 20px;
    }

    img {
      max-width: 100%;
      box-sizing: border-box;
    }

    ul.top_hits li {
      margin-bottom: 0;
    }
  </style>

</head>

<body>
<div class="container">

  <h1 style="margin-top: 1em;"><strong>LocusZoom.js</strong></h1>

  <h3 style="float: left; color: #777">Credible Sets Demonstration</h3>
  <h6 style="float: right;"><a href="../index.html">&lt; return home</a></h6>

  <hr style="clear: both;">

  <p>
    With the help of a standalone JavaScript library, LocusZoom can identify and plot the members of a credible set
    based on the displayed plot region. This example shows how to integrate that library into a custom datasource, and
    how to take advantage of several visualization options for displaying the credible set members. See the library
    <a href="https://github.com/statgen/gwas-credible-sets/">source code</a> and
    <a href="https://statgen.github.io/gwas-credible-sets/">documentation</a> for information about the method.
  </p>

  <p>
    To begin, move your mouse over the plot below and select "Display Options". This demonstration allows credible
    sets to be displayed as a primary coloring overlay, a separate annotation track, or both. Note that credible sets
    are calculated client-side by the web browser, which means that this feature can be used without requiring backend
    changes to an existing API server.
  </p>

  <h3>Interactive Plot</h3>
  <div class="row">
    <div class="two columns">
      <h4>Top Hits</h4>
      <ul class="top_hits" style="padding-left: 0.2rem; min-width: 110px;"></ul>
    </div>
    <div class="ten columns">
      <div id="plot" class="lz-container-responsive"></div>
    </div>
  </div>
  <hr>

  <div class="row">
    <footer style="text-align: center;">
      &copy; Copyright <script>document.write(new Date().getFullYear())</script> <a href="https://github.com/statgen">The University of Michigan Center for Statistical
      Genetics</a><br>
    </footer>
  </div>

  <script type="application/javascript">
      /*
        Specify the data sources to use
       */
      // Determine if we're online, based on browser state or presence of an optional query parameter
      var apiBase = "https://portaldev.sph.umich.edu/api/v1/";
      var assocFile = "http://localhost:8000/csvjson.json";
      data_sources = new LocusZoom.DataSources()
          // .add("assoc", ["AssociationLZ", {
          //     url: apiBase + "statistic/single/",
          //     params: { source: 45, id_field: "variant" }
          // }])
          .add("assoc", ["AssociationLZ", {url: assocFile, params: {analysis: true, id_field: "variant"}}])
          // .add("assoc", ["AssociationLZ", {url: "assoc_10_114550452-115067678.json?", params: {analysis: true, id_field: "variant"}}])
          .add("credset", ["CredibleSetLZ", { params: { fields: { log_pvalue: 'assoc:log_pvalue' }, threshold: 0.95, significance_threshold: 7.301 } }])
          .add("ld", ["LDServer", { url: "https://portaldev.sph.umich.edu/ld/", params: { source: '1000G', build: 'GRCh37', population: 'ALL' } }])
          .add("gene", ["GeneLZ", {url: apiBase + "annotation/genes/", params: { build: 'GRCh37' }}])
          .add("recomb", ["RecombLZ", {url: apiBase + "annotation/recomb/results/", params: { build: 'GRCh37' }}])
          .add("constraint", ["GeneConstraintLZ", { url: "https://gnomad.broadinstitute.org/api/", params: { build: 'GRCh37' } }]);

      /*
        Define and render the plot
       */
      // Fetch custom layout defined for usage with credible sets
      var stateUrlMapping = {chr: "chrom", start: "start", end: "end"};
      // Fetch initial position from the URL, or use some defaults
      var initialState = LzDynamicUrls.paramsFromUrl(stateUrlMapping);
      if (!Object.keys(initialState).length) {
        initialState = {chr: 16, start: 74947245, end: 75547245};
        // initialState = {chr: 4, start: 173008488, end: 177000000};
      }

      layout = LocusZoom.Layouts.get("plot", "association_credible_set", {state: initialState});

      // Generate the LocusZoom plot
      window.plot = LocusZoom.populate("#plot", data_sources, layout);

      // Changes in the plot can be reflected in the URL, and vice versa (eg browser back button can go back to
      //   a previously viewed region)
      LzDynamicUrls.plotUpdatesUrl(plot, stateUrlMapping);
      LzDynamicUrls.plotWatchesUrl(plot, stateUrlMapping);


      /*
        Add a sidebar to the page with "top hits" items

        RBMS1, for example, has a region of high LD and therefore includes many points in the credible set
       */
      // Load a region of the plot based on a specified region string
      function jumpTo(region) {
          var target = region.split(":");
          var chr = target[0];
          var pos = target[1];
          var start = 0;
          var end = 0;
          if (!pos.match(/[-+]/)) {
              start = +pos - 300000;
              end = +pos + 300000;
          }
          plot.applyState({chr: chr, start: start, end: end, ldrefvar: ""});
          return false;
      }

      // Populate a list of top hits links for the plot
      var top_hits = [
          ["16:75247245", "BCAR1 (default)"],
          ["10:114758349", "TCF7L2"],
          ["16:53819169", "FTO"],
          ["9:22051670", "CDKN2A/B"],
          ["7:28196413", "JAZF1"],
          ["12:71433293", "TSPAN8"],
          ["8:95937502", "TP53INP1"],
          ["6:20679709", "CDKAL1"],
          ["2:161346447", "RBMS1"],
          ["15:77832762", "HMG20A"],
          ["7:15052860", "DGKB"]
      ];
      top_hits.forEach(function (hit) {
          d3.select("ul.top_hits").append("li")
              .html("<a href=\"javascript:void(0);\" onclick=\"javascript:jumpTo('" + hit[0] + "');\">" + hit[1] + "</a>");
      });
  </script>

</div>

</body>
</html>