Old school D3 from simpler times

All examples By author By category About

emepyc

Full window Github gist

Tooltips on genes

Example of TnT Genome showing how to display tooltips on genes when clicked. The tooltips are provided by TnT Tooltip

<!DOCTYPE html>
<meta charset="utf-8">
<div id="body">

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<link rel="stylesheet" href="https://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css"/>
  <script src="https://tntvis.github.io/tnt.genome/build/tnt.genome.min.js"></script>

<link rel="stylesheet" href="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
  <script src="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script>

<div id="genomeBrowser"></div>
  <script>
      var gene_track = tnt.board.track()
          .height(200)
          .color("white")
          .display(tnt.board.track.feature.genome.gene()
            .color("#550055")
            .on("click", function (d) {
                tnt.tooltip.table()
                    .width(120)
                    .call(this, {
                        header : d.external_name,
                        rows : [
                            {"label": "id", "value": d.gene_id},
                            {"label": "desc", "value": d.description},
                            {"label": "Coords", "value": ""},
                            {"label": "chr", "value": d.seq_region_name},
                            {"label": "start", "value": d.start},
                            {"label": "end", "value": d.end}
                        ]
                    })
            })
          )
          .data(tnt.board.track.data.genome.gene());

var genome = tnt.board.genome().species("human").gene("brca2").width(950);
      genome
        .zoom_in(100)
        .add_track(gene_track);

genome (document.getElementById("genomeBrowser"));
      genome.start();
  </script>
</div>

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<div id="body">
​
  <!-- D3 -->
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
​
  <!-- TnT -->
  <link rel="stylesheet" href="https://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css"/>
  <script src="https://tntvis.github.io/tnt.genome/build/tnt.genome.min.js"></script>
​
  <!-- TnT Tooltips -->
  <link rel="stylesheet" href="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.css" type="text/css"/>
  <script src="https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js"></script>
​
  <div id="genomeBrowser"></div>
  <script>
      var gene_track = tnt.board.track()
          .height(200)
          .color("white")
          .display(tnt.board.track.feature.genome.gene()
            .color("#550055")
            .on("click", function (d) {
                tnt.tooltip.table()
                    .width(120)
                    .call(this, {
                        header : d.external_name,
                        rows : [
                            {"label": "id", "value": d.gene_id},
                            {"label": "desc", "value": d.description},
                            {"label": "Coords", "value": ""},
                            {"label": "chr", "value": d.seq_region_name},
                            {"label": "start", "value": d.start},
                            {"label": "end", "value": d.end}
                        ]
                    })
            })
          )
          .data(tnt.board.track.data.genome.gene());
​
      var genome = tnt.board.genome().species("human").gene("brca2").width(950);
      genome
        .zoom_in(100)
        .add_track(gene_track);
​
      genome (document.getElementById("genomeBrowser"));
      genome.start();
  </script>
</div>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://tntvis.github.io/tnt.genome/build/tnt.genome.min.js to a secure url

Modified http://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://tntvis.github.io/tnt.genome/build/tnt.genome.min.js

https://tntvis.github.io/tnt.tooltip/build/tnt.tooltip.min.js