gene colors and legend

Example of TnT Genome that colors genes based on their biotypes and creates a legend dynamically explaining the colors of the biotypes in the display. This is done by getting the default data retriever (which is a promise) and set a new retriever that chains the original one with a function that sets colors to the genes and populates the legend.

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>
    <script src="render.js"></script>
</head>
​
<body>
    <div id="mydiv"></div>
​
    <script>
    render(document.getElementById("mydiv"));
    </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