JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="genome"></div>
<div id="genome2"></div>

CSS

svg text {
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    cursor: default;
}

.genomeBrowserDiv {
    position : relative;
}

.genomeBrowserDiv p {
    font-size: 14px;
}

.genomeBrowserDiv input {
    font-size: 12px;
}

.genomeBrowser {
    font-size: 8px;
}
rect.pane {
    cursor: move;
    fill: none;
    pointer-events: all;
}
.gene {
    filter: alpha(opacity=60);
    opacity: 0.6;
}

.gene_info {
    position : absolute;
    height : 200px;
/*    z-index : 1000; */
    top : 50px;
    left : 0px;
    pointer-events: none;
}

.gene_info_searchBox {
    position : absolute;
/*    height : 200px;*/
/*    z-index : 1000; */
    top : 100px;
    left : 0px;
    pointer-events: none;
}

.gene_info_searchBox p {
    font-size : 10px;
}

.gene_info p {
    font-size : 10px;
}

JavaScript

d3.jsonp = function (url, callback) {
    function rand() {
        var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
            c = '',
            i = -1;
        while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
        return c;
    }

    function create(url) {
        var e = url.match(/callback=d3.jsonp.(\w+)/),
            c = e ? e[1] : rand();
        d3.jsonp[c] = function (data) {
            callback(data);
            delete d3.jsonp[c];
            script.remove();
        };
        return 'd3.jsonp.' + c;
    }

    var cb = create(url),
        script = d3.select('head')
            .append('script')
            .attr('type', 'text/javascript')
            .attr('src', url.replace(/(\{|%7B)callback(\{|%7D)/, cb));
};

var genomeBrowser = function () {
    var species = "human";
    var chr = 7;
    var fromPos = 139424940;
    var toPos = 141784100;
    var prefix_region = "http://beta.rest.ensembl.org/feature/region/";
    var prefix_gene = "http://beta.rest.ensembl.org/lookup/";

    var genes = [];

    var divElem; // undefined by default
    var searchBox = false;
    var width = 600;
    var height = 150;
    var top    = 50;
    var g;
    var pane;
    var xScale;
    var xAxis;
    var refresh;

    var gBrowser = function () {};

    gBrowser.rand = function() {
       var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
        c = '',
            i = -1;
        while (++i < 15) c += chars.charAt(Math.floor(Math.random() * 52));
        return c;
    };
    
    gBrowser.start = function () {
        var url = gBrowser.url("cback3");
        console.log(url)
        d3.jsonp(url, function (resp) {
            genes = resp;
            gBrowser.plot();
            gBrowser.update()
        });
    };

    gBrowser.url = function (cback) {
        var url = prefix_region + species + "/" + chr + ":" + fromPos + "-" + toPos + ".jsonp?feature=gene;callback=d3.jsonp." + gBrowser.rand();...