Old school D3 from simpler times

All examples By author By category About

emepyc

Full window Github gist

Sequence track

Example of sequence track in TnT Genome. Zoom in to reveal the genomic sequence of the region in the board.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css" />
    <style>
        #mydiv {
            margin-top: 50px;
        }
    </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://tntvis.github.io/tnt.genome/build/tnt.genome.min.js"></script>
</head>

<body>
    <div id="mydiv"></div>

<script>
    var genome = tnt.board.genome().species("human").gene("brca2").width(950);
    var gene_track = tnt.board.track()
        .height(200)
        .color("white")
        .display(tnt.board.track.feature.genome.gene()
            .color("#550055")
        )
        .data(tnt.board.track.data.genome.gene());

var sequence_track = tnt.board.track()
        .height(30)
        .color("white")
        .display(tnt.board.track.feature.genome.sequence())
        .data(tnt.board.track.data.genome.sequence()
            .limit(150)
        );

genome
        .zoom_in(100)
        .add_track(sequence_track)
        .add_track(gene_track);

genome(document.getElementById("mydiv"));
    genome.start();

</script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css" />
    <style>
        #mydiv {
            margin-top: 50px;
        }
    </style>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="https://tntvis.github.io/tnt.genome/build/tnt.genome.min.js"></script>
</head>
​
<body>
    <div id="mydiv"></div>
​
    <script>
    var genome = tnt.board.genome().species("human").gene("brca2").width(950);
    var gene_track = tnt.board.track()
        .height(200)
        .color("white")
        .display(tnt.board.track.feature.genome.gene()
            .color("#550055")
        )
        .data(tnt.board.track.data.genome.gene());
​
    var sequence_track = tnt.board.track()
        .height(30)
        .color("white")
        .display(tnt.board.track.feature.genome.sequence())
        .data(tnt.board.track.data.genome.sequence()
            .limit(150)
        );
​
    genome
        .zoom_in(100)
        .add_track(sequence_track)
        .add_track(gene_track);
​
    genome(document.getElementById("mydiv"));
    genome.start();
​
    </script>
</body>
​
    

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

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

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