Skip to content

Instantly share code, notes, and snippets.

@nimezhu

nimezhu/index.html

Last active August 29, 2015 14:02
Show Gist options
  • Save nimezhu/6a3f941aeddc889237bb to your computer and use it in GitHub Desktop.
Save nimezhu/6a3f941aeddc889237bb to your computer and use it in GitHub Desktop.
Download ZIP
LINCOS JS LIBRARY
Raw
index.html
<!DOCTYPE HTML>
<body>
<div id="figure" class="myDiv">
<h2> FIGURE </h2>
<div id="canvas">
</div>
</div>
</body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script src="lincos.working.js"></script>
<script>
var svg = d3.select("#canvas").append("svg");
var ideogram1 = new IdeogramModel({"id":"lnc1","length":18,"color":"blue"});
var ideogram2 = new IdeogramModel({"id":"lnc2","length":20,"color":"green"});
var ideogram3 = new IdeogramModel({"id":"lnc3","length":30});
//var ideogramView1 = new IdeogramView({"model":ideogram1,"el":svg.append("g")});
//ideogramView1.render();
//var ideogramView2 = new IdeogramView({"model":ideogram2,"el":svg.append("g"),"x":200,"y":200,"width":300,"height":5,"color":"blue"});
//ideogramView2.render();
var collection = new IdeogramsCollection();
collection.add([ideogram1,ideogram2,ideogram3]);
var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"x":20,"y":50,"width":1000,"height":5,"color":"red"});
ideogramTrack.render(true,true);
var plot1=new PlotModel({"chr":"lnc1","values":new Array(9,-9,8,-8,7,-7,6,-6,5,-5,4,-4,3,-3,2,-2,1,-1)});
var plot3=new PlotModel({"color":"red","chr":"lnc3","values":new Array(9,-9,8,-8,7,-7,6,-6,5,-5,4,-4,3,-3,2,-2,1,-1)});
var plot2=new PlotModel({"color":"blue","chr":"lnc2","values":new Array(6,-6,5,-5,4,-4,3,-3,2,-2,1,-1)});
plotView1=new PlotView({"model":plot1,"el":svg.append("g")});
//plotView1.render()
plotView2=new PlotView({"model":plot2,"el":svg.append("g")});
//plotView2.render()
plotView3=new PlotView({"model":plot3,"el":svg.append("g"),"x":100,"y":80,"height":100,"width":500});
//plotView3.render()
var plotsCollection= new PlotsCollection([plot2,plot1,plot3],{"id":"conserve"});
//plotsCollection.add([plot2,plot1,plot3]);
var plotTrack = new PlotTrack({"collection":plotsCollection,"el":svg.append("g"),"y":100});
plotTrack.render(ideogramTrack);
var bed1= new BedModel({"chr":"lnc1","start":2,"end":5,"id":"Rfam1.1","color":"blue"});
var bed2= new BedModel({"chr":"lnc2","start":2,"end":6,"id":"Rfam1.2","color":"blue"});
var bed3= new BedModel({"chr":"lnc3","start":7,"end":17,"id":"Rfam1.3","color":"green"});
var bed4= new BedModel({"chr":"lnc3","start":27,"end":30,"id":"Rfam1.4","color":"aliceblue"});
var bedsCollection = new BedsCollection([bed1,bed2,bed3,bed4],{"id":"rfam"});
bedsCollection.add([bed1,bed2,bed3,bed4]);
var bedTrack = new BedTrack({"collection":bedsCollection,"el":svg.append("g"),"y":300,"height":50});
bedTrack.render(ideogramTrack);
bedgraph1 = new BedGraphModel({"chr":"lnc1","start":7,"end":10,"name":"test1","value":10,"color":"green"})
bedgraph2 = new BedGraphModel({"chr":"lnc2","start":7,"end":10,"name":"test2","value":5})
bedgraph3 = new BedGraphModel({"chr":"lnc3","start":7,"end":10,"name":"test3","value":-2})
bedgraph4 = new BedGraphModel({"chr":"lnc3","start":10,"end":15,"name":"test3","value":2})
var bedgraphs = new BedGraphsCollection([bedgraph1,bedgraph2,bedgraph3,bedgraph4])
bedgraphview = new BedGraphView({"collection":bedgraphs,"x":0,"y":200,"height":50,"el":svg.append("g")})
bedgraphview.render(ideogramTrack);
</script>
Raw
lincos.js
/* VERSION 0.1.1
* add bedgraph
*TODO
* add linear view ( include links linear view )
* add legend
* add options view
*
*/
var IdeogramModel = Backbone.Model.extend(
{
defaults: {
length: 1000,
color: "black",
},
initialize: function(options)
{
for (var key in options)
{
this[key]=options[key];
};
},
});
var IdeogramsCollection = Backbone.Collection.extend({
model: IdeogramModel,
initialize: function(models,options){
for (var key in options)
{
this[key]=options[key];
}
},
totalLength: function()
{
var s=0;
this.each(function(i)
{
s+=i.length;
});
return s;
}
});
var IdeogramView = Backbone.View.extend(
{
defaults: {
height: 10,
width: 500,
color: "black",
x:0,
y:0
},
initialize: function(options) {
for (var key in options)
{
this[key]=options[key];
}
_.bindAll(this,'render');
},
render: function(text,ticks)
{
var ideogram=this.el;
console.log(ideogram);
if(this.track_name)
{
ideogram.attr("class",this.track_name);
};
if(this.model.id)
{
ideogram.attr("id",this.model.id);
};
var self=this;
//ideogram.attr("transform","translate("+this.x+","+this.y+")");
ideogram.selectAll("rect").data([self]).enter().append("rect")
.attr("x",function(d) {return d.x})
.attr("y",function(d) {return d.y})
.attr("height",function(d) {return d.height})
.attr("width",function(d) {return d.width})
.attr("fill",function(d) {return d.color})
.attr("opacity",0.7)
.on("mouseover",function(d,i) {d3.select(this).attr("opacity",1.0)})
.on("mouseout",function(d,i) {d3.select(this).attr("opacity",0.7)})
.append("title").text(function(d) { return self.model.id })
if (text) {
text = ideogram.append("text").attr("class","chr-name");
text.attr("transform","translate("+self.x+","+(self.y-10)+")").attr("x",5).text(self.model.id);
}
if (ticks) {
//TODO
}
},
translateBed: function(start,end) //bed format [start,end) 0 index
{
var self=this;
var k=(self.width/self.model.length);
return [self.x+k*start,k*(end-start)] //return x,width
}
}
);
var IdeogramTrack = Backbone.View.extend(
{
defaults : {
id:"ideograms",
x: 0,
y: 0,
width: 1000,
height: 10,
color: "black",
gap: 2
},
ideogramViews: {},
initialize: function(options) {
for (var key in this.defaults) { this[key]=this.defaults[key]}
for (var key in options)
{
this[key]=options[key]
}
if (!this.collection)
{
this.collection=new IdeogramsCollection();
};
if(this.el)
{
this.el.attr("id",this.id);
this.el.attr("class","ideogram-track");
}
_.bindAll(this,'render');
},
add: function(ideogram)
{
this.collection.add(ideogram);
}
,
render: function(text,ticks)
{
var offsetx=this.x;
var totalLength=this.collection.totalLength();
var totalGaps=this.collection.size()-1;
var gap=this.gap;
var totalWidth=this.width-gap*totalGaps;
var startx=offsetx;
var self=this;
this.collection.each(function(d,i) {
var width=d.length/totalLength*totalWidth;
var color=self.color
if (d.color) {color=d.color}
var ideogramView = new IdeogramView({"model":d,"x":startx,"y":self.y,"height":self.height,"width": width,"color":color,"el":self.el.append("g")} )
ideogramView.render(text,ticks);
startx=startx+width+gap;
self.ideogramViews[d.id]=ideogramView
console.log(self.ideogramViews);
})
},
translateBed: function(id,start,end) //bed format [start,end) 0 index
{
return this.ideogramViews[id].translateBed(start,end);
}
}
);
var BedModel = Backbone.Model.extend(
{
defaults: {
chr: "chr", //chromosome or RNA name
start: 1000,
end: 1500,
color: "black",
},
initialize: function(options)
{ for (var key in this.defaults) {this[key]=this.defaults[key];}
for (var key in options)
{
this[key]=options[key];
}
},
length: function()
{
return this.end-this.start;
}
});
var BedsCollection = Backbone.Collection.extend({
model: BedModel,
initialize: function(models,options){
for (var key in options)
{
this[key]=options[key];
}
},
});
var BedTrack = Backbone.View.extend(
{
defaults: {
id:"bedTrack",
el:"",
x: 0,
//width: 1200,
height: 5,
bedViews: {},
//gap: 5,
color: "grey"
},
initialize: function(options) {
for (var key in this.defaults){
this[key]=this.defaults[key];
};
for (var key in options){
this[key]=options[key];
};
if (!this.collection){
this.collection=new BedsCollection();
};
if(this.el)
{
this.el.attr("id",this.id);
this.el.attr("class","bed");
}
_.bindAll(this,'render');
},
add: function(bed){
this.collection.add(bed);
},
render: function(coordinates)
{ var self=this;
this.collection.each(function(i)
{
var xw=coordinates.translateBed(i.chr,i.start,i.end);
var x=xw[0]
var width=xw[1]
var color=self.color
if (i.color) {color=i.color}
var ideogramView = new IdeogramView({"y":self.y,"x":x,"width":width,"height":self.height,"model":i,"el":self.el.append("g").attr("id",i.id),"color":color});
ideogramView.render(false,false);
self.bedViews[i.id]=ideogramView;
});
},
}
);
var PlotModel = Backbone.Model.extend({
defaults: {
chr: "chr", //chromosome or RNA name
name: "noname",
values: new Array(1,2,3),
color: "black",
offset: 0
},
initialize: function(options){
for (var key in this.defaults) {this[key]=this.defaults[key]}
for (var key in options)
{
this[key]=options[key];
}
},
length: function(){
return this.values.length;// return value's length.
},
max: function(){
var max=this.values[0];
for (var v in this.values)
{
if (max < this.values[v]) {max=this.values[v];}
}
return max;
},
min: function(){
var min=this.values[0];
for (var v in this.values)
{
if (min > this.values[v]) {min=this.values[v];}
}
return min;
}
});
var PlotView = Backbone.View.extend({
defaults: {
x:0,
width:100,
y:50,
height:20,
yMax:10,
yMin:-10
},
initialize: function(options) {
for (var key in this.defaults) {this[key]=this.defaults[key]}
for (var key in options)
{
this[key]=options[key];
}
},
render: function(){
var self=this;
var len=self.model.length();
var bars=this.el.selectAll("rect").data(this.model.values).enter().append("rect");
var x=self.x
var width=self.width
var k=width/len;
bars.attr("fill",self.model.color)
.attr("x",function(d,i) {return x+k*i})
.attr("y",function(d,i) { if (d<0) {return self.y} else {return self.y - d/self.yMax*self.height}})
.attr("height",function(d,i){
return Math.abs(d)/self.yMax*self.height
})
.attr("width",function(d,i) {return k})
.attr("opacity",0.7)
.on("mouseover",function(d,i) {d3.select(this).attr("opacity",1.0)})
.on("mouseout",function(d,i) {d3.select(this).attr("opacity",0.7)})
.append("title").text(function(d,i) { return self.model.chr+"\npos:"+(i+1)+"\nvalue:"+d })
}
})
var PlotsCollection = Backbone.Collection.extend({
model: PlotModel,
initialize: function(models,options){
for (var key in options)
{
this[key]=options[key];
}
},
});
var PlotTrack = Backbone.View.extend(
{
defaults:{
x:0,
y:50,
height:20,
plotViews: {},
yMin: -10,
yMax: 10
},
// collections: new PlotsCollection(),
initialize: function(options) {
for (var key in options)
{
for (var key in this.defaults) {this[key]=this.defaults[key]}
for (var key in options)
{
if(key=="model" || key=="el" || key=="collection")
{this[key]=options[key];}
else { this[key]=options[key] }
}
};
if (!this.collection)
{
this.collection=new PlotsCollection();
};
var yMins=[]
var yMaxs=[]
for ( var key in this.collection.models){
yMins.push(Math.min.apply(Math,this.collection.models[key].values))
yMaxs.push(Math.max.apply(Math,this.collection.models[key].values))
}
this.yMin=Math.min.apply(Math,yMins)
this.yMax=Math.max.apply(Math,yMaxs)
this.el.attr("class","plot");
//this.el.attr("transform","translate("+this.cx+","+this.cy+")");
//add coordinates (ideogramTrack)
//confirm add ideogramTrack!
_.bindAll(this,'render');
},
render: function(coordinates)
{ var self=this;
this.collection.each(function(i)
{
var xw=coordinates.translateBed(i.chr,0,i.length());
var x=xw[0];
var width=xw[1];
var model=self.el.append("g").attr("id",i.chr+"_"+i.id);
var plotView = new PlotView({"x":x,"y":self.y,"width":width,"model":i,"el":self.el.append("g"),"yMin":self.yMin,"yMax":self.yMax});
plotView.render();
});
}
}
);
var BedGraphModel = Backbone.Model.extend( {
defaults: {
chr: "chr",
start: 100,
value: 1.0,
length: 20,
name: "noname",
strand: "."
},
initialize: function(options){
for (var key in options){
this[key]=options[key];
};
if (options.length && options.start && !options.end){
this.end=parseInt(options.start)+parseInt(options.length)
};
if (options.start && options.end){
this.length=parseInt(options.end)-parseInt(options.start)
};
}
});
var BedGraphsCollection = Backbone.Collection.extend({
model: BedGraphModel,
color: "grey",
initialize: function(models,options){
for (var key in options)
{
this[key]=options[key];
}
},
max: function(){
var max=+this.models[0].value;
for (var v in this.models)
{
if (max < +this.models[v].value) {max=+this.models[v].value;}
}
return max;
},
min: function(){
var min=this.models[0].value;
for (var v in this.models)
{
if (min > +this.models[v].value) {min=+this.models[v].value;}
}
return min;
}
});
var BedGraphView = Backbone.View.extend({
defaults : {
x:0,
y: 1000,
height: 20,
yMax: 10,
yMin: -10,
color: "grey"
},
initialize: function(options) {
for (var key in this.defaults) { this[key]=this.defaults[key]}
for (var key in options)
{
this[key]=options[key];
}
},
render: function(coordinates) {
var self=this;
var bars=this.el.selectAll("rect").data(this.collection.models).enter().append("rect");
this.el.attr("class","bedgraph");
//this.el.attr("transform","translate("+this.cx+","+this.cy+")");
this.yMin=this.collection.min()
this.yMax=this.collection.max()
if (this.yMin > 0) {this.yMin=0}
bars.attr("x", function(d,i) {
return coordinates.translateBed(d.chr,d.start,d.end)[0];
})
.attr("width", function(d,i) {
return coordinates.translateBed(d.chr,d.start,d.end)[1];
})
.attr("fill",function(d,i) { if (d.color) {return d.color} else {return self.color}} )
.attr("height",function(d,i) { return self.translateToHeight(d.value)})
.attr("y",function(d,i) {
if(d.value >= 0 ){
return self.height + self.y - self.translateToHeight(d.value-self.yMin)}
if(d.value < 0 ) {
return self.height + self.y - self.translateToHeight(0-self.yMin)}
}
)
bars.style("opacity",0.5)
.on("mouseover",function(d) {
d3.select(this).style("opacity",1.0);
})
.on("mouseout",function() {
d3.select(this).style("opacity",0.5);
})
.append("title").text( function(d,i) { return d.chr + ":" + (+d.start+1) + "-" + d.end + "\n value:" + d.value })
},
translateToHeight: function(value)
{
return Math.abs(value)/(this.yMax-this.yMin)*(this.height);
}
});
var BedGraphTrack = BedGraphView;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment