// Change the data and the algorithm will detect the overlapping elements
var data = [
    {start:10, end:50, id:1, val:0.3},
    {start:30, end:40, id:2, val:0.9},
    {start:50, end:60, id:3, val:1.0},
    {start:70, end:80, id:4, val:0.1},
    {start:35, end:80, id:5, val:0.4},
    {start:65, end:80, id:6, val:0.7},
    {start:75, end:90, id:7, val:0.1},
    {start:90, end:95, id:8, val:0.8},
    {start:5,  end:15, id:9, val:0.6},
    {start:10, end:50, id:10, val:0.5}
];

function render (board, div) {
    var current_height = 200;

    // The color gradient
    var col_grad = d3.scale.linear()
        .domain([0,1])
        .range(["#eff3ff","#08519c"]);

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

    var feature_track = tnt.board.track()
        .height(50)
        .color('white')
        // The new defined block with no overlaps
        .display(tnt.board.track.feature.non_overlapping_block()
            .color(function (d) {
                return col_grad(d.val);
            })
            .index(function (d) {
                return d.id;
            })
        )
        .data(tnt.board.track.data.sync()
            .retriever(function (where) {
                return filterData(data, where.from, where.to);
            })
        );

    feature_track
        .display(feature_track.display()
            .layout(layout()
                .on_run(function () {
                    board.tracks(board.tracks());
                }))
        );

    function filterData (recs, from, to) {
        var filtered = [];
        for (var i=0; i<recs.length; i++) {
            var data = recs[i];
            if (((data.start >= from) && (data.start <= to)) ||
            ((data.end >= from) && (data.end <= to)) ||
            ((data.start <= from) && (data.end >= to)) ||
            ((data.start >= from) && (data.end <= to))) {
                filtered.push(data);
            }
        }
        return filtered;
    }

    board.from(0).to(100).max(120).min(0).zoom_out(120).zoom_in(20);
    board.add_track([axis_track, feature_track]);
    board(div);
    board.start();
}