diff --git a/VQI_GenomeBrowser.js b/VQI_GenomeBrowser.js
index 618a3e4..7a536f2 100644
--- a/VQI_GenomeBrowser.js
+++ b/VQI_GenomeBrowser.js
@@ -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("CPG:Shore:Shelve:
");
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 () {
@@ -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")
@@ -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) {
@@ -155,7 +169,7 @@ function VQI_GenomeBrowser(id) {
+ "(" + d[indexArray.chr] + " : " + d[indexArray.start] + " - " + d[indexArray.end] + ")" + "";
});
- svg.call(tip);
+ svg.call(tip);*/
d3.selectAll(".d3-tip").style({
"line-height": "1",
@@ -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",
@@ -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];
@@ -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);
@@ -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")
@@ -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
@@ -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,
@@ -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) {
@@ -428,7 +493,7 @@ function VQI_GenomeBrowser(id) {
return genomeData;
}
- var submitFile = function () {
+ /* var submitFile = function () {
genomeData = [];
chromosomes = [];
var file_dir = "./saved-data/";
@@ -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 = [];