Old school D3 from simpler times

All examples By author By category About

emepyc

Full window Github gist

Transcripts

Example of TnT Genome showing transcript information.

<!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 transcript_track = tnt.board.track()
        .height(200)
        .color("#EEEFFF")
        .display(tnt.board.track.feature.genome.transcript()
            .color (function (t) {
                if (t.isGene) {
                    return "#005588";
                }
                return "red";
            })
            .on("click", function (d) {
                console.log(d);
            })
         )
        .data(tnt.board.track.data.genome.transcript());

var genome = tnt.board.genome().species("human").gene("PTEN").width(950);
    genome(document.getElementById("mydiv"));
    genome
        .zoom_in(100)
        .add_track(transcript_track);

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 transcript_track = tnt.board.track()
        .height(200)
        .color("#EEEFFF")
        .display(tnt.board.track.feature.genome.transcript()
            .color (function (t) {
                if (t.isGene) {
                    return "#005588";
                }
                return "red";
            })
            .on("click", function (d) {
                console.log(d);
            })
         )
        .data(tnt.board.track.data.genome.transcript());
​
    var genome = tnt.board.genome().species("human").gene("PTEN").width(950);
    genome(document.getElementById("mydiv"));
    genome
        .zoom_in(100)
        .add_track(transcript_track);
​
    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