bbi-js/index.html at master · jgoecks/bbi-js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<meta charset="utf-8">
  <head>
    <title>BigWig Test</title>
    <script type="text/javascript" src="./require.js"></script>
  </head>

  <body>
      <div id="vis"></div>
  </body>

<script type="text/javascript">
    // Map from jquery.min to jquery.
    requirejs.config({
        baseUrl: '.',
        paths: {
            jquery: 'jquery.min'
        }
    });

    require(['bigwig', 'd3.min', 'vega', 'numerical'], function(bigwig, d3, vega, numerical) {
        /**
         * Benchmarking function that prints the number of data points returned at each zoom level.
         */
        var benchmarkZoomLevels = function(bb) {
            $.each([0,1,2,3,4,5,6,7,8,9], function(zl) {
                $.when(bb.getZoomedView(zl).readWigData(1, 0, 249250620)).then(function(data) {
                    console.log("zoom level", zl, data.length);
                });
            });
            $.when(bb.getUnzoomedView().readWigData(1, 0, 249250620)).then(function(data) {
                console.log("unzoomed    ", data.length);
            });
        };

        //
        // Read file and display results.
        //

        var readData = function(url, chrom, start, end) {
            var promise = new $.Deferred();
            $.when(bigwig.makeBwg(url)).then(function(bb, err) {
                $.when(bb.readWigData(chrom, start, end)).then(function(data) {
                    $('body').append("<h3>Information about " + url + "</h3>");
                    $('body').append("Version: " + bb.version + "<br>");
                    $('body').append("Number of Zoom Levels: " + bb.numZoomLevels + "<br>");

                    $('body').append("Length: "+ data.length +"<br>");
                    $('body').append("readWigData:<br>");
                    $('body').append($.map(data, function(interval){ return interval.min + " " + interval.max + " " + Math.round(interval.score); }).join('<br>'));
                    $('body').append("<br>");
                    //benchmarkZoomLevels(bb);

                    promise.resolve(data);
                });
            });

            return promise;
        };

        // Read data.
        var datasets = [
                {
                    name: "normal",
                    uri: "chr19.normal.bw",
                    color: "blue"
                },
                // {
                //     name: "tumor",
                //     uri: "chr19.tumor.bw",
                //     color: "red"
                // },
                // {
                //     name: "miapaca2_rnaseq",
                //     uri: "miapaca2_rnaseq.bigwig",
                //     color: "green"
                // },
                // {
                //     name: "refgene",
                //     uri: "hg19_refgene.bb",
                //     color: "purple"
                // }
                // Only data for chr1?
                //"RMNISTHS_30xdownsample.bigwig",
                // Only data for chr1:
                //'hg19_100vertcons.bigwig',
            ],
            dataPromises = $.map(datasets, function(dataset) {
                var promise = readData(dataset.uri, 19, 0, 30000000);
                $.when(promise).then(function(data) {
                    dataset.data = data;
                });

                return promise;
            });

        // When data read, draw chart.
        $.when.apply($, dataPromises).then(function() {
            numerical.drawChart(datasets,
            {
                type: "intensity"
            });
        });
    });
</script>