Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Added exons; graphing and setting bounds are separate
  • Loading branch information
@csw11004
csw11004 committed Mar 6, 2015
1 parent 2ca2ae0 commit 8ea12e2
Showing 1 changed file with 142 additions and 77 deletions.
219 changes: 142 additions & 77 deletions VQI_GenomeBrowser.js
View file
Expand Up @@ -14,29 +14,35 @@ function VQI_GenomeBrowser(id) {
var chromosomes = [];
var thisObj = this;
var chrom_curr = "chr1";
var indexArray = {chr: 0, start: 1, end: 2, name: 3, type: 3, score: 4, strand: 5, options: 6};
var indexArray = {chr: 0, start: 1, end: 2, name: 3, type: 3, score: 4, strand: 5, options: 6, exonStarts: 9, exonEnds: 10};

// $("#" + id).append("<div style='border : 1px solid; display : inline-block'>CPG:<input type='file' id='cpg'/>Shore:<input type='file' id='shore'/>Shelve:<input type='file' id='shelve'/><input id='submit' type='submit' /></div>");

d3.select("#" + id).append("div").text("Chromosome: ")
var select = d3.select("#" + id)
var chromosomeSelect = d3.select("#" + id)
.append("div")
.append("select")
.on("change", function (d) {
graph(select.property("value"));
graph(chromosomeSelect.property("value"));
});

d3.select("#" + id).append("div").text("Start: ")
var minNumber = d3.select("#" + id)
.append("input")
.attr("type", "number")
.property("value", 0);
.property("value", 0)
.on("change", function () {
setBounds(minNumber.property("value"), maxNumber.property("value"))
});

d3.select("#" + id).append("div").text("End: ")
var maxNumber = d3.select("#" + id)
.append("input")
.attr("type", "number")
.property("value", 0);
.property("value", 0)
.on("change", function () {
setBounds(minNumber.property("value"), maxNumber.property("value"))
});


var colocalize = function () {
Expand Down Expand Up @@ -105,13 +111,13 @@ function VQI_GenomeBrowser(id) {

var self = this;

var graphButton = d3.select("#" + id)
/*var graphButton = d3.select("#" + id)
.append("input")
.attr("type", "button")
.attr("value", "Graph")
.on("click", function () {
graph(select.property("value"), minNumber.property("value"), maxNumber.property("value"))
});
});*/

this.svg = d3.select("#" + id)
.append("svg")
Expand Down Expand Up @@ -139,9 +145,17 @@ function VQI_GenomeBrowser(id) {

var zoom = d3.behavior.zoom();

//Just a line
svg.append("line")
.attr("x1", margin)
.attr("y1", height / 2 + margin + 20)
.attr("x2", width + margin)
.attr("y2", height / 2 + margin + 20)
.style("stroke", "blue");

//set up tool tips

var tip = d3.tip()
/* var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-20, 0])
.html(function (d) {
Expand All @@ -155,7 +169,7 @@ function VQI_GenomeBrowser(id) {
+ "<span style='color:white; font-size:10pt; display:block'>(" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")" + "</span>";
});
svg.call(tip);
svg.call(tip);*/

d3.selectAll(".d3-tip").style({
"line-height": "1",
Expand Down Expand Up @@ -190,62 +204,30 @@ function VQI_GenomeBrowser(id) {
"font-size": "11px"});
}

var graph = function (chromosome, min, max) {
var indexList = indexArray;
//Graphs the current chromosome. If min and max are specified, graph only in that range.
//Otherwise, graphs the whole chromosome
var self = this;

var currentData;
var xMax = 0;
var xMin = 0;

//Populates drop down list with different chromosomes
select.selectAll("option")
.data(chromosomes)
.enter()
.append("option")
.attr("value", function (d) {
return d;
})
.text(function (d) {
return d;
})
chrom_curr = chromosome;

//Gets relevant data and calculates min/max if needed
if (min == null || max == null) {
currentData = genomeData.filter(function (d) {
return d[indexList.chr] == chromosome
});

xMax = d3.max(currentData, function (d) {
return d[indexList.end]
});
xMin = d3.min(currentData, function (d) {
return d[indexList.start]
});
minNumber.property("value", xMin);
maxNumber.property("value", xMax);
}
else {
currentData = genomeData.filter(function (d) {
return d.chromosome == chromosome && d[indexList.start] >= min && d[indexList.end] <= max
});
xMax = Number(max);
xMin = Number(min);
}
var setBounds = function(min, max){
var xMax = Number(max);
var xMin = Number(min);

xScale.domain([xMin - (xMax - xMin) * 1 / 10, xMax + (xMax - xMin) * 1 / 10])
.range([margin, width + margin]);

xAxisSelection.call(xAxis);

zoom.x(xScale)
.on("zoom", zoomed.bind(self));
svg.selectAll("rect")
.attr("width", function (d) {
return xScale(d[indexArray.end]) - xScale(d[indexArray.start])
})
.attr("x", function (d) {
return xScale(d[indexArray.start])
})

zoom.x(xScale).on("zoom", zoomed);

svg.call(zoom);

minNumber.property("value", xMin);
maxNumber.property("value", xMax);

d3.selectAll(".axis path, .axis line").style({
"fill": "none",
"stroke": "black",
Expand All @@ -254,28 +236,54 @@ function VQI_GenomeBrowser(id) {
d3.selectAll(".axis text").style({
"font-family": "sans-serif",
"font-size": "11px"});
}

//Just a line
svg.append("line")
.attr("x1", margin)
.attr("y1", height / 2 + margin + 20)
.attr("x2", width + margin)
.attr("y2", height / 2 + margin + 20)
.style("stroke", "blue");
var graph = function (chromosome) {
var indexList = indexArray;

var self = this;

var currentData;

//Populates drop down list with different chromosomes
chromosomeSelect.selectAll("option")
.data(chromosomes)
.enter()
.append("option")
.attr("value", function (d) {
return d;
})
.text(function (d) {
return d;
})
chrom_curr = chromosome;

//Gets relevant data and calculates min/max if needed
currentData = genomeData.filter(function (d) {
return d[indexList.chr] == chromosome
});

var xMax = d3.max(currentData, function (d) {
return d[indexList.end]
});
var xMin = d3.min(currentData, function (d) {
return d[indexList.start]
});

setBounds(xMin,xMax);

svg.selectAll("rect")
.data(currentData)
.data(currentData, function(d){return d;})
.exit()
.remove();

svg.selectAll("rect")
.data(currentData)
.data(currentData, function(d){return d;})
.enter()
.append("rect");

svg.selectAll("rect")
.data(currentData, function(d){return d;})
.style("fill-opacity", ".4")
.style("stroke", function (d) {
var type = d[indexList.type];
Expand All @@ -300,8 +308,8 @@ function VQI_GenomeBrowser(id) {
var offset = type == "cpg" ? 0 : type == "shore" ? 10 : 12.5;
return height / 2 + margin + offset
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
//.on('mouseover', tip.show)
//.on('mouseout', tip.hide);

for (var i in trackList) {
addOneTrack(trackList[i], trackList[i]['name'], i);
Expand Down Expand Up @@ -335,15 +343,22 @@ function VQI_GenomeBrowser(id) {
svg.attr("height", height + 2 * margin + ySpace);
var thisY = height / 2 + margin + 20 + ySpace;


if (!i) {
svg.append("line")
svg.selectAll("line")
.data([name], function (d) {return d;})
.enter()
.append("line")
.attr("x1", margin)
.attr("y1", height / 2 + margin + 20 + ySpace)
.attr("x2", width + margin)
.attr("y2", height / 2 + margin + 20 + ySpace)
.style("stroke-width", 1)
.style("stroke", "black");
svg.append("text")
svg.selectAll("text")
.data([name], function (d) {return d;})
.enter()
.append("text")
.attr("x", 0)
.attr("y", thisY - 10)
.attr("font-family", "sans-serif")
Expand All @@ -352,8 +367,8 @@ function VQI_GenomeBrowser(id) {
.text(name);
}
// test.addTrack({start:20000000, end:20000100})
var tracks = svg.selectAll("track")
.data(thisData)
var tracks = svg.selectAll("tracks")
.data(thisData, function (d) {return d;})
.enter()
.append("rect");
var rectAttributes = tracks
Expand All @@ -373,9 +388,55 @@ function VQI_GenomeBrowser(id) {
})
.style("fill-opacity", ".4")
.style("stroke", "blue")
.style("fill", "green")
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
.style("fill", "green");

var exons = [];

$.each(thisData, function (index, value) {

value[indexArray.exonStarts] = value[indexArray.exonStarts].slice(1,value[indexArray.exonStarts].length - 2).split(",");
value[indexArray.exonEnds] = value[indexArray.exonEnds].slice(1,value[indexArray.exonEnds].length - 2).split(",");

for(var i = 0; i < value[indexArray.exonStarts].length; i++)
{

var exon = value.slice(0);
exon[indexArray.start] = parseInt(exon[indexArray.exonStarts][i]);
exon[indexArray.end] = parseInt(exon[indexArray.exonEnds][i]);
exons.push(exon);
if(index == 1)
{
console.log(exon);
}

}
});

var exonRect = svg.selectAll("tracks")
.data(exons, function (d) {return d;})
.enter()
.append("rect");
var exonRectAttributes = exonRect
.attr("x", function (d) {
return xScale(d[index.start]);
})
.attr("y", function (d) {

return thisY - fHeight;
})
.attr("height", function (d) {
return fHeight*2;
})
.attr("width", function (d) {
// return 50;
return xScale(d[index.end]) - xScale(d[index.start]);
})
.style("fill-opacity", ".4")
.style("stroke", "blue")
.style("fill", "blue");

//.on('mouseover', tip.show)
//.on('mouseout', tip.hide);
// .tipsy({
// gravity: 'w',
// html: true,
Expand All @@ -389,8 +450,12 @@ function VQI_GenomeBrowser(id) {
html: true,
title: function () {
var d = this.__data__;
var strand = "";
if (d.length > indexArray.strand) {
strand = " (" + d[indexArray.strand] + ")";
}
// , c = colors(d.i);
return d[indexArray.name] + " (" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")";
return d[indexArray.name] + strand + " (" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")";
}
});
// .text(function (d) {
Expand Down Expand Up @@ -428,7 +493,7 @@ function VQI_GenomeBrowser(id) {
return genomeData;
}

var submitFile = function () {
/* var submitFile = function () {
genomeData = [];
chromosomes = [];
var file_dir = "./saved-data/";
Expand Down Expand Up @@ -504,7 +569,7 @@ function VQI_GenomeBrowser(id) {
}
d3.select("#" + id + " #submit").on("click", submitFile.bind(this));
// submitFile();
// submitFile();*/

this.loadCPGFiles = function (cpg, shoer, shelf) {
genomeData = [];
Expand Down

0 comments on commit 8ea12e2

Please sign in to comment.