gbe_browser/static/manhattan_plot.js
/**
 * create a mini manhataan plot from the dots in data and do the zoom from x1, x2, y1, y2 values.
 * If rect_x1, rect_y1, rect_x2, rect_y2 are diferent from zero (0) this create a rectangle
 * to help a see the location of the zoom.
 * @param {number} x1
 * @param {number} x2
 * @param {number} y1
 * @param {number} y2
 * @param {number} rect_x1
 * @param {number} rect_x2
 * @param {number} rect_y1
 * @param {number} rect_y2
 * @param {array} data
 */
create a mini manhataan plot from the dots in data and do the zoom from x1, x2, y1, y2 values.
If rect_x1, rect_y1, rect_x2, rect_y2 are diferent from zero (0) this create a rectangle
to help a see the location of the zoom.
create a mini manhataan plot from the dots in data and do the zoom from x1 x2 y1 y2 values . If rect_x1 rect_y1 rect_x2 rect_y2 are diferent from zero ( 0 ) this create a rectangle to help a see the location of the zoom .
function manhattan_plot_minmap(x1, x2, y1, y2, rect_x1, rect_y1, rect_x2, rect_y2, data) {
    var margin_s = {
        top: 5,
        right: 30,
        bottom: 35,
        left: 10
    };
    var w_scale_bar = 500 - margin_s.left - margin_s.right;
    var h_scale_bar = 65 - margin_s.top - margin_s.bottom;
    var barPadding = 0;
    var dataset = d3.range(d3.min(data, function(d) {
        return d[2];
    }), d3.max(data, function(d) {
        return d[2];
    }) + 1);
    var colorScale = d3.scale.log()
        .domain([d3.min(data, function(d) {
            return d[2];
        }), d3.max(data, function(d) {
            return d[2];
        })])
        .interpolate(d3.interpolateHsl)
        .range(["#00b300", "#F50808"]);
    var margin = {
        top: 30,
        right: 50,
        bottom: 40,
        left: 60
    };
    var w = 400 - margin.left - margin.right; 
    var h = 300 - margin.top - margin.bottom; 
    var xScale = d3.scale.linear()
        .domain([x1, x2])
        .range([0, w]); 
    var yScale = d3.scale.linear()
        .domain([y1, y2])
        .range([h, 0]);
    var array_test1 = [""];
    var array_test2 = [0];
    for (var i = 0; i < chrom_acum_length.length; i++) {
        var num = i + 1;
        array_test1.push(num);
        array_test2.push(xScale(chrom_acum_length[i]));
    }
    var xScale_top = d3.scale.ordinal()
        .domain(array_test1)
        .range(array_test2);
    var xAxis_top = d3.svg.axis()
        .scale(xScale_top)
        .orient("bottom");
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom")
        .ticks(5);
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5);
    var svg = d3.select("#minmap_mp")
        .append("svg")
        .attr("width", w + margin.left + margin.right)
        .attr("height", h + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var line_chrom = svg.selectAll("line")
        .data(chrom_acum_length)
        .enter()
        .append("line")
        .attr("class", "linechrom")
        .attr("x1", function(d) {
            return xScale(d);
        })
        .attr("y1", 0)
        .attr("x2", function(d) {
            return xScale(d);
        })
        .attr("y2", h)
        .attr("stroke-width", 1)
        .attr("stroke-dasharray", 5)
        .style("stroke", "black")
        .style("opacity", 0.2);
    var circle = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr("cx", function(d) {
            return xScale(d[0]);
        })
        .attr("cy", function(d) {
            return yScale(d[1]);
        })
        .attr("r", 1.5)
        .style("fill", function(d) {
            return colorScale(d[2]);
        });
    if (rect_x1 != 0 && rect_y1 != 0 && rect_x2 != 0 && rect_y2 != 0) {
        svg.selectAll("rect") 
        .data([0])
            .enter()
            .append("rect")
            .attr("x", xScale(rect_x1))
            .attr("y", yScale(rect_y1))
            .attr("width", xScale(rect_x2))
            .attr("height", yScale(rect_y2) - yScale(rect_y1))
            .attr("fill", "rgba(0, 0, 255, 0.1)")
            .attr("stroke", "rgba(0, 0, 255, 1)")
            .attr("stroke-width", "5");
    }
    svg.append("g").attr("transform", "translate(0," + h + ")")
        .attr("class", "xt_min axis")
        .call(xAxis_top); 
    svg.selectAll(".xt_min text") 
        .attr("transform", function(d) {
            return "translate(" + this.getBBox().height * 1.4 + "," + this.getBBox().height * 1.7 + ")rotate(90)";
        });
    svg.append("g")
        .attr("class", "axis")
        .call(yAxis);
}
function manhattan_plot_minmap ( x1 , x2 , y1 , y2 , rect_x1 , rect_y1 , rect_x2 , rect_y2 , data ) { var margin_s = { top : 5 , right : 30 , bottom : 35 , left : 10 } ; var w_scale_bar = 500 - margin_s . left - margin_s . right ; var h_scale_bar = 65 - margin_s . top - margin_s . bottom ; var barPadding = 0 ; var dataset = d3 . range ( d3 . min ( data , function ( d ) { return d [ 2 ] ; } ) , d3 . max ( data , function ( d ) { return d [ 2 ] ; } ) + 1 ) ; var colorScale = d3 . scale . log ( ) . domain ( [ d3 . min ( data , function ( d ) { return d [ 2 ] ; } ) , d3 . max ( data , function ( d ) { return d [ 2 ] ; } ) ] ) . interpolate ( d3 . interpolateHsl ) . range ( [ "#00b300" , "#F50808" ] ) ; var margin = { top : 30 , right : 50 , bottom : 40 , left : 60 } ; var w = 400 - margin . left - margin . right ; var h = 300 - margin . top - margin . bottom ; var xScale = d3 . scale . linear ( ) . domain ( [ x1 , x2 ] ) . range ( [ 0 , w ] ) ; var yScale = d3 . scale . linear ( ) . domain ( [ y1 , y2 ] ) . range ( [ h , 0 ] ) ; var array_test1 = [ "" ] ; var array_test2 = [ 0 ] ; for ( var i = 0 ; i < chrom_acum_length . length ; i ++ ) { var num = i + 1 ; array_test1 . push ( num ) ; array_test2 . push ( xScale ( chrom_acum_length [ i ] ) ) ; } var xScale_top = d3 . scale . ordinal ( ) . domain ( array_test1 ) . range ( array_test2 ) ; var xAxis_top = d3 . svg . axis ( ) . scale ( xScale_top ) . orient ( "bottom" ) ; var xAxis = d3 . svg . axis ( ) . scale ( xScale ) . orient ( "bottom" ) . ticks ( 5 ) ; var yAxis = d3 . svg . axis ( ) . scale ( yScale ) . orient ( "left" ) . ticks ( 5 ) ; var svg = d3 . select ( "#minmap_mp" ) . append ( "svg" ) . attr ( "width" , w + margin . left + margin . right ) . attr ( "height" , h + margin . top + margin . bottom ) . append ( "g" ) . attr ( "transform" , "translate(" + margin . left + "," + margin . top + ")" ) ; var line_chrom = svg . selectAll ( "line" ) . data ( chrom_acum_length ) . enter ( ) . append ( "line" ) . attr ( "class" , "linechrom" ) . attr ( "x1" , function ( d ) { return xScale ( d ) ; } ) . attr ( "y1" , 0 ) . attr ( "x2" , function ( d ) { return xScale ( d ) ; } ) . attr ( "y2" , h ) . attr ( "stroke-width" , 1 ) . attr ( "stroke-dasharray" , 5 ) . style ( "stroke" , "black" ) . style ( "opacity" , 0.2 ) ; var circle = svg . selectAll ( "circle" ) . data ( data ) . enter ( ) . append ( "circle" ) . attr ( "cx" , function ( d ) { return xScale ( d [ 0 ] ) ; } ) . attr ( "cy" , function ( d ) { return yScale ( d [ 1 ] ) ; } ) . attr ( "r" , 1.5 ) . style ( "fill" , function ( d ) { return colorScale ( d [ 2 ] ) ; } ) ; if ( rect_x1 != 0 && rect_y1 != 0 && rect_x2 != 0 && rect_y2 != 0 ) { svg . selectAll ( "rect" ) . data ( [ 0 ] ) . enter ( ) . append ( "rect" ) . attr ( "x" , xScale ( rect_x1 ) ) . attr ( "y" , yScale ( rect_y1 ) ) . attr ( "width" , xScale ( rect_x2 ) ) . attr ( "height" , yScale ( rect_y2 ) - yScale ( rect_y1 ) ) . attr ( "fill" , "rgba(0, 0, 255, 0.1)" ) . attr ( "stroke" , "rgba(0, 0, 255, 1)" ) . attr ( "stroke-width" , "5" ) ; } svg . append ( "g" ) . attr ( "transform" , "translate(0," + h + ")" ) . attr ( "class" , "xt_min axis" ) . call ( xAxis_top ) ; svg . selectAll ( ".xt_min text" ) . attr ( "transform" , function ( d ) { return "translate(" + this . getBBox ( ) . height * 1.4 + "," + this . getBBox ( ) . height * 1.7 + ")rotate(90)" ; } ) ; svg . append ( "g" ) . attr ( "class" , "axis" ) . call ( yAxis ) ; }
create a mini manhataan plot from the dots in data and do the zoom from x1, x2, y1, y2 values.
create a mini manhataan plot from the dots in data and do the zoom from x1 x2 y1 y2 values .
//create the manhattan plot //Then define width and height as the inner dimensions of the chart area. //--------------------------- create color scale  -------------------------------------------------- //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^   create color scale  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^            //900; //600; //Create scale top            //Define X axis top //Define X axis //Define Y axis //Create SVG element //Create circles //create color scale bar //;        // select all the text elements for the xaxis //Create Y axis