Variable board height

Example of TnT Genome showing a board of variable height depending on the number of genes to display. This is done by configuring the genome layout.

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="https://tntvis.github.io/tnt.genome/build/tnt.genome.css" type="text/css" />
    <style>
        #mydiv {
            margin-top: 20px;
        }
    </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>

var gene_track = tnt.board.track()
    	    .height(current_height) // the default height
    	    .color("#FFFFFF")
            .display(tnt.board.track.feature.genome.gene()
    		     .color("#550055")
    		)
    	    .data(tnt.board.track.data.genome.gene());

// expand or contract the height of the gene track as needed
        gene_track.display().layout()
            .fixed_slot_type("expanded")
            .keep_slots(false)
            .on_layout_run (function (types, current) {
                var needed_height = types.expanded.needed_slots * types.expanded.slot_height;
                if (needed_height !== current_height) {
                    current_height = needed_height;
                    gene_track.height(needed_height);
                    genome.tracks(genome.tracks());
                }
            });

var genome = tnt.board.genome().species("human").gene("brca2").width(950);
        genome(document.getElementById("mydiv"));
    	genome.add_track(gene_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