Example of TnT Board

Example of use of TnT Board. In this example, a new board is created and configured. Two tracks are then defining. The first one is a top-oriented axis track. The second track is 30 pixels high and displays one block from position 200 to 350 in the board. Once the board is configure the visualisation is ready to start

<!DOCTYPE html>

<body>
    <div id="mydiv"></div>
    <script>
    var myBoard = tnt.board().from(20).to(500).max(1000);

var axis_track = tnt.board.track()
        .height(20)
        .color("white")
        .display(tnt.board.track.feature.axis()
            .orientation("top")
        );

var block_track = tnt.board.track()
        .label("my track")
        .height(30)
        .color("#FFCFDD")
        .data (tnt.board.track.data.sync()
            .retriever (function () {
                return [
                    {
                        start : 200,
                        end   : 350
                    }
                ];
            })
        )
        .display(tnt.board.track.feature.block()
            .color("blue")
        );

myBoard(document.getElementById("mydiv"));
    myBoard
        .add_track(axis_track)
        .add_track(block_track);

myBoard.start();
    </script>
</body>

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

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

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

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