Old school D3 from simpler times

All examples By author By category About

emepyc

Full window Github gist

Ensembl gene tree

Ensembl gene tree display using TnT Tree and TnT Rest

<!DOCTYPE html>

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

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

<script src="https://tntvis.github.io/tnt.rest/build/tnt.rest.min.js"></script>

</head>

<body>
    <h1>Ensembl gene tree</h1>
    <div id="mydiv"></div>
    <script>
    // gene tree
    var rest = tnt.rest()
        .domain("rest.ensembl.org");

var url = rest.url()
        .endpoint("genetree/id/:id")
        .parameters({
            id: "ENSGT00390000003602"
        });

rest.call(url)
        .then (function (resp) {
            var tree = resp.body.tree;
            var tree_vis = tnt.tree()
                .data(tree)
                .label(tnt.tree.label.text()
                    .fontsize(10)
                    .height(20)
                    .text(function (node) {
                        var data = node.data();
                        if (data.id && data.id.accession) {
                            return data.id.accession;
                        }
                        return "";
                    })
            );

tree_vis(document.getElementById("mydiv"));
        });
    </script>

<footer>
      <aside>Released under <a href="https://www.opensource.org/licenses/apache2.0.php">Apache 2.0</a>.</aside>
      Copyright 2014-2016 <a href="https://www.ebi.ac.uk/~mp" rel="author">Miguel Pignatelli</a>
    </footer>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <!-- D3 -->
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
​
    <!-- TnT -->
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.tree/build/tnt.tree.css" type="text/css" />
    <script src="https://tntvis.github.io/tnt.tree/build/tnt.tree.min.js"></script>
​
    <!-- TnT Rest -->
    <script src="https://tntvis.github.io/tnt.rest/build/tnt.rest.min.js"></script>
​
</head>
​
<body>
    <h1>Ensembl gene tree</h1>
    <div id="mydiv"></div>
    <script>
    // gene tree
    var rest = tnt.rest()
        .domain("rest.ensembl.org");
​
    var url = rest.url()
        .endpoint("genetree/id/:id")
        .parameters({
            id: "ENSGT00390000003602"
        });
​
    rest.call(url)
        .then (function (resp) {
            var tree = resp.body.tree;
            var tree_vis = tnt.tree()
                .data(tree)
                .label(tnt.tree.label.text()
                    .fontsize(10)
                    .height(20)
                    .text(function (node) {
                        var data = node.data();
                        if (data.id && data.id.accession) {
                            return data.id.accession;
                        }
                        return "";
                    })
            );
​
            tree_vis(document.getElementById("mydiv"));
        });
    </script>
​
    <footer>
      <aside>Released under <a href="https://www.opensource.org/licenses/apache2.0.php">Apache 2.0</a>.</aside>
      Copyright 2014-2016 <a href="https://www.ebi.ac.uk/~mp" rel="author">Miguel Pignatelli</a>
    </footer>
</body>
​
    

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

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

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

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

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

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