Skip to content

Instantly share code, notes, and snippets.

@nimezhu

nimezhu/README.md

Last active June 29, 2016 18:36
Show Gist options
  • Save nimezhu/42a7c99941921e397fc0 to your computer and use it in GitHub Desktop.
Save nimezhu/42a7c99941921e397fc0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

This is a javascript library for plot circos graph. Powered by D3JS.

GPL License (c) copyright by author zhuxp

For applications , please visit http://circos.bam2x.net

Raw
bam2x.circos.js
/**
* VERSION 0.1.3
* Improvements:
* 1. remove dependency on underscore
* 2. add namespace bam2x.circos
* 3. remove source code redundacy
*
*/
var bam2x=bam2x || {};
(
function(B){
B.circos= B.circos || {};
C=B.circos;
function default_model()
{
return (function(options){
for (var key in options)
{
this[key]=options[key];
}});
}
/**
* Ideogram Section
*
*
*/
C.IdeogramModel = default_model();
C.IdeogramView= default_model();
C.IdeogramView.prototype = {
render: function(text,ticks_boolean)
{
var ideogram=this.el;
if(this.track_name){
ideogram.attr("class",this.track_name);
}
if(this.model.id){
ideogram.attr("id",this.model.id);
}
ideogram.selectAll("path").remove();
var self=this;
ideogram.attr("transform","translate("+this.cx+","+this.cy+")");
ideogram.append("path").attr("d", d3.svg.arc().outerRadius(this.outerRadius)
.innerRadius(this.innerRadius)
.startAngle(this.startAngle)
.endAngle(this.endAngle)
)
.attr("class","symbol")
.attr("model",this.model)
.attr("id","symbol-"+this.model.id)
.style("fill",this.model.color)
.style("opacity",0.5)
.on("mouseover", function(d,i){
d3.select(this).style("opacity",1.0);
ideogram.append("path").attr("d",d3.svg.arc().outerRadius(self.cx)
.innerRadius(10)
.startAngle(self.startAngle)
.endAngle(self.endAngle)
)
.style("fill","yellow")
.attr("class","flash")
.style("opacity",0.3);
}
)
.on("mouseout",function(d,i)
{
d3.select(this).style("opacity",0.7);
ideogram.selectAll(".flash").remove();
}
).append("title").text(this.model.id);
if(text){
var text_content = ideogram.append("svg:text")
.attr("x", 10)
.attr("dy",-15);
text_content.append("svg:textPath")
.attr("xlink:href","#symbol-"+this.model.id)
.text(self.model.id);
}
if(ticks_boolean) {
console.log("in ticks");
var el=this.el;
var ticks = el.append("g").selectAll("g")
.data([self])
.enter().append("g").selectAll("g")
.data(self.groupTicks)
.enter().append("g")
.attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
+ "translate(" + self.outerRadius + ",0)";
});
ticks.append("line")
.attr("x1", 1)
.attr("y1", 0)
.attr("x2", 5)
.attr("y2", 0)
.style("stroke", "#000");
ticks.append("text")
.attr("x", 8)
.attr("dy", ".35em")
.attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180)translate(-16)" : null; })
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { return d.label; });
}
},
translateBed: function(start,end) //bed format [start,end) 0 index
{
var startAngle=start/this.model.length*(this.endAngle-this.startAngle)+this.startAngle;
var endAngle=end/this.model.length*(this.endAngle-this.startAngle)+this.startAngle;
return [startAngle,endAngle];
},
groupTicks: function(d) {
var k = (d.endAngle - d.startAngle) / d.model.length;
var step = Math.round(Math.PI/(k*24*10))*10;
step = step===0 ? 1:step;
return d3.range(0, d.model.length, step).map(function(v, i) {
return {
angle: v * k + d.startAngle,
label: i % 5 ? null : v
};
});
}
};
C.IdeogramTrack = default_model();
C.IdeogramTrack.prototype = {
add: function(ideogram)
{
this.collection.push(ideogram);
}
,
render: function(ticks)
{
var offsetAngle=0;
var totalLength=this.totalLength();
var totalGaps=this.collection.length;
var gapAngle=this.gapAngle; //set later
var totalAngle=3.1415926*2-gapAngle*totalGaps;
var startAngle=offsetAngle;
var self=this;
self.ideogramViews={};
this.collection.forEach( function(i)
{
console.log(i);
var endAngle=startAngle+i.length/totalLength*totalAngle;
var ideogramView = new C.IdeogramView({"startAngle":startAngle,"endAngle":endAngle,"innerRadius":self.innerRadius,"outerRadius":self.outerRadius,"model":i,"el":self.el.append("g").attr("id",i.id),"cx":self.cx,"cy":self.cy})
self.ideogramViews[i.id]=ideogramView;
if(ticks){
ideogramView.render(true,true);
}
else
{
ideogramView.render(true);
}
startAngle=endAngle+gapAngle;
});
},
translateBed: function(id,start,end) //bed format [start,end) 0 index
{
return this.ideogramViews[id].translateBed(start,end);
},
totalLength: function()
{
var s=0;
console.log(this.collection);
this.collection.forEach(function(i)
{
s+=i.length;
});
return s;
}
};
/**
* BED6
*
*/
C.BedModel=default_model();
C.BedTrack=default_model();
C.BedTrack.prototype={
add: function(bed)
{
this.collection.add(bed);
}
,
render: function(coordinates)
{ var self=this;
this.collection.forEach(function(i)
{
var angles=coordinates.translateBed(i.chr,i.start,i.end);
var startAngle=angles[0];
var endAngle=angles[1];
var ideogramView = new C.IdeogramView({"startAngle":startAngle,"endAngle":endAngle,"innerRadius":self.innerRadius,"outerRadius":self.outerRadius,"model":i,"el":self.el.append("g").attr("id",i.id),"cx":self.cx,"cy":self.cy});
ideogramView.render();
});
}
};
/**
* Link section
*
*/
C.LinkModel=default_model();
C.LinkView=default_model();
C.LinkView.prototype={
render: function(coordinates){
var g=this.el.append("g");
var self=this;
var targetAngles=coordinates.translateBed(this.model.target.chr,this.model.target.start,this.model.target.end);
var sourceAngles=coordinates.translateBed(this.model.source.chr,this.model.source.start,this.model.source.end);
g.append("path")
.attr("d",
d3.svg.chord()
.source(function() { return {startAngle:sourceAngles[0],
endAngle:sourceAngles[1]}})
.target(function() { return {startAngle:targetAngles[0],
endAngle:targetAngles[1]}})
.radius(self.radius)
).attr("model",self.model)
.attr("class","symbol")
.style("fill", self.model.color)
.style("opacity", 0.5)
.on("mouseover", function() {
d3.select(this).style("opacity",1.0);
g.append("path").attr("d",d3.svg.arc().outerRadius(self.cx)
.innerRadius(10)
.startAngle(sourceAngles[0])
.endAngle(sourceAngles[1])
).style("fill","yellow")
.attr("class","flash")
.style("opacity",0.3);
g.append("path").attr("d",d3.svg.arc().outerRadius(self.cx)
.innerRadius(10)
.startAngle(targetAngles[0])
.endAngle(targetAngles[1])
).style("fill","yellow")
.attr("class","flash")
.style("opacity",0.3);
}
)
.on("mouseout", function() {
d3.select(this).style("opacity",0.5);
g.selectAll(".flash").remove();
})
.append("title").text("1-index\n"+self.model.source.chr+":"+(self.model.source.start+1)+"-"+self.model.source.end+"\nto\n"+self.model.target.chr+":"+(self.model.target.start+1)+"-"+self.model.target.end+"\n"
)
}
};
C.LinkTrack=default_model();
C.LinkTrack.prototype={
render: function(coordinates)
{ var self=this;
this.el.attr("transform","translate("+this.cx+","+this.cy+")");
this.collection.forEach(function(i)
{
linkView = new C.LinkView({"el":self.el.append("g"),
"model":i,
"radius":self.radius,
"cx":self.cx,
"cy":self.cy
});
linkView.render(coordinates);
});
},
}
/**
* Plot section
*/
C.PlotModel=default_model();
C.PlotModel.prototype = {
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;
}
}
C.PlotView=default_model();
C.PlotView.prototype={
render: function(){
var self=this;
var bars=this.el.selectAll("path").data(this.model.values).enter().append("path");
var len=self.model.length();
var angle=self.endAngle-self.startAngle;
if (self.yMin >= 0)
{
bars.attr("fill",self.model.color).attr("d",
d3.svg.arc()
.outerRadius(function(d) {return self.translateToHeight(d);})
.innerRadius(function(d) { return self.innerRadius;} )
.startAngle(function(d,i) { return self.startAngle+i/len*angle;})
.endAngle(function(d,i) {return self.startAngle+(i+1)/len*angle;}))
}
else
{
bars.attr("fill",this.model.color).attr("d",
d3.svg.arc()
.outerRadius(function(d) {return self.translateToHeight(d);})
.innerRadius(function(d) { return self.translateToHeight(0);} )
.startAngle(function(d,i) { return self.startAngle+i/len*angle;})
.endAngle(function(d,i) {return self.startAngle+(i+1)/len*angle;}))
}
bars.style("opacity",0.5)
.on("mouseover",function(d,i) {
d3.select(this).style("opacity",1.0);
self.el.append("path").attr("d",d3.svg.arc().outerRadius(self.cx)
.innerRadius(10)
.startAngle(self.startAngle+i/len*angle)
.endAngle(self.startAngle+(i+1)/len*angle)
).style("fill","yellow")
.attr("class","flash")
.style("opacity",0.3);
})
.on("mouseout",function() {
d3.select(this).style("opacity",0.5);
self.el.selectAll(".flash").remove();
})
.append("title").text( function(d,i) { return "1-index\n pos: "+(i+1)+"\nvalue:"+d })
},
translateToHeight: function(value)
{
return (value-this.yMin)/(this.yMax-this.yMin)*(this.outerRadius-this.innerRadius)+this.innerRadius;
}
};
C.PlotTrack=default_model();
C.PlotTrack.prototype={
render: function(coordinates)
{ var self=this;
var yMins=[]
var yMaxs=[]
for ( var key in this.collection){
yMins.push(Math.min.apply(Math,this.collection[key].values))
yMaxs.push(Math.max.apply(Math,this.collection[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+")");
this.collection.forEach(function(i)
{
var angles=coordinates.translateBed(i.chr,0,i.length());
var startAngle=angles[0];
var endAngle=angles[1];
var model=self.el.append("g").attr("id",i.chr+"_"+i.id);
var plotView = new C.PlotView({"startAngle":startAngle,"endAngle":endAngle,"innerRadius":self.innerRadius,"outerRadius":self.outerRadius,"model":i,"el":model,"cx":self.cx,"cy":self.cy,"yMin":self.yMin,"yMax":self.yMax});
plotView.render();
});
},
};
/**
* BedGraph section
*
*/
C.BedGraphModel= 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);
}
};
C.BedGraphTrack = default_model();
C.BedGraphTrack.prototype = {
max: function(){
var max=+this.collection[0].value;
for (var v in this.collection)
{
if (max < +this.collection[v].value) {max=+this.collection[v].value;}
}
return max;
},
min: function(){
var min=+this.collection[0].value;
for (var v in this.collection)
{
if (min > +this.collection[v].value) {min=+this.collection[v].value;}
}
return min;
},
render: function(coordinates) {
var self=this;
var bars=this.el.selectAll("path").data(this.collection).enter().append("path");
this.el.attr("class","plot");
this.el.attr("transform","translate("+this.cx+","+this.cy+")");
this.yMin=this.min()
this.yMax=this.max()
if (this.yMin > 0) {this.yMin=0}
if (self.yMin >= 0)
{
bars.attr("fill",self.color).attr("d",
d3.svg.arc()
.outerRadius(function(d) {return self.translateToHeight(d.value);})
.innerRadius(function(d) { return self.innerRadius;})
.startAngle(function(d,i) { return coordinates.translateBed(d.chr,d.start,d.start+1)[0]})
.endAngle(function(d,i) {return coordinates.translateBed(d.chr,d.end-1,d.end)[1];})
)
}
else
{
bars.attr("fill",this.color).attr("d",
d3.svg.arc()
.outerRadius(function(d) {return self.translateToHeight(d.value);})
.innerRadius(function(d) { return self.translateToHeight(0);} )
.startAngle(function(d,i) { return coordinates.translateBed(d.chr,d.start,d.start+1)[0]})
.endAngle(function(d,i) {return coordinates.translateBed(d.chr,d.end-1,d.end)[1];})
)
}
bars.style("opacity",0.5)
.on("mouseover",function(d) {
d3.select(this).style("opacity",1.0);
self.el.append("path").attr("d",d3.svg.arc().outerRadius(self.cx)
.innerRadius(10)
.startAngle(coordinates.translateBed(d.chr,d.start,d.start+1)[0])
.endAngle(coordinates.translateBed(d.chr,d.end-1,d.end)[1])
).style("fill","yellow")
.attr("class","flash")
.style("opacity",0.3);
})
.on("mouseout",function() {
d3.select(this).style("opacity",0.5);
self.el.selectAll(".flash").remove();
})
.append("title").text( function(d,i) { return d.chr + ":" + (+d.start+1) + "-" + d.end + "\n value:" + d.value })
},
translateToHeight: function(value){
return (value-this.yMin)/(this.yMax-this.yMin)*(this.outerRadius-this.innerRadius)+this.innerRadius;
}
};
C.plot_json = function(data,el_id) {
var el=el_id || "canvas"
var outerRadius=250;
var innteRadius=70;
var plotHeight=30;
var bedHeight=10;
var cy = outerRadius + 30;
//var cy = document.getElementById(el).clientHeight/2
var cx = document.getElementById(el).clientWidth/2;
var gapHeight= 5
var nowRadius=outerRadius;
var svg = d3.select("#"+el).append("svg").attr("id","svg");
var collection = []
var ideograms = []
for (var i in data.ideograms){
ideograms.push(new C.IdeogramModel(data.ideograms[i]))
}
collection=ideograms;
console.log(ideograms)
var ideogramTrack = new C.IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":cx,"cy":cy,"outerRadius":nowRadius,"innerRadius":nowRadius-bedHeight,"gapAngle":0.02});
console.log(ideogramTrack);
ideogramTrack.render(true);
nowRadius=nowRadius-bedHeight-gapHeight;
for( var i in data.tracks)
{
track=data.tracks[i];
var plots=[];
if (track.type=="plot")
{
for( var j in track.values)
{
var model=new C.PlotModel(track.values[j]);
if (track.color)
{
model.color=track.color
}
plots.push(model);
}
var plotTrack = new C.PlotTrack({"name":track.name,"collection":plots,"el":svg.append("g"),"cx":cx,"cy":cy,'outerRadius':nowRadius,'innerRadius':nowRadius-plotHeight});
plotTrack.render(ideogramTrack);
nowRadius-=plotHeight+gapHeight
};
if ( track.type=="bedgraph"){
var collection= track.values
if (track.color)
{
collection.color=track.color
}
var bedGraphTrack = new C.BedGraphTrack({"collection":collection,"el":svg.append("g"),"cx":cx,"cy":cy,"outerRadius":nowRadius,"innerRadius":nowRadius-plotHeight});
bedGraphTrack.render(ideogramTrack);
nowRadius-=plotHeight+gapHeight
};
if ( track.type=="bed"){
var collection= track.values
if (track.color)
{
collection.color=track.color
}
var bedTrack = new C.BedTrack({"collection":collection,"el":svg.append("g"),"cx":cx,"cy":cy,"outerRadius":nowRadius,"innerRadius":nowRadius-bedHeight});
bedTrack.render(ideogramTrack);
nowRadius-=bedHeight+gapHeight
}
if (track.type=="links")
{
var links = []
for(var i in track.values){
links.push(new C.LinkModel(track.values[i]));
}
var linkTrack = new C.LinkTrack({"collection":links,"el":svg.append("g"),"cx":cx,"cy":cy,'radius':nowRadius});
linkTrack.render(ideogramTrack);
};
}
}
}(bam2x));
Raw
demo.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="bam2x.circos.js"></script>
<script>
$(document).ready(function(C) {
var svg = d3.select("#canvas").append("svg").attr("width",500).attr("height",500);
var ideogram1 = new bam2x.circos.IdeogramModel({"id":"lnc1","length":18,"color":"blue"});
/*
var ideogram_v = new bam2x.circos.IdeogramView({model:ideogram1,startAngle:0,endAngle:6.28,innerRadius:80,outerRadius:90,el:svg.append("g"),cx:100,cy:100})
console.log(ideogram_v);
ideogram_v.render();
*/
var ideogram2 = new bam2x.circos.IdeogramModel({"id":"lnc2","length":20,"color":"green"});
var ideogram3 = new bam2x.circos.IdeogramModel({"id":"lnc3","length":30,"color":"yellow"});
var collection=[ideogram1,ideogram2,ideogram3];
var ideogramTrack = new bam2x.circos.IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":150,"innerRadius":140,"gapAngle":0.02});
ideogramTrack.render(true);
var bed1= new bam2x.circos.BedModel({"chr":"lnc1","start":2,"end":5,"id":"Rfam1.1","color":"blue"});
var bed2= new bam2x.circos.BedModel({"chr":"lnc2","start":2,"end":6,"id":"Rfam1.2","color":"blue"});
var bed3= new C.BedModel({"chr":"lnc3","start":7,"end":17,"id":"Rfam1.3","color":"green"});
var bed4= new C.BedModel({"chr":"lnc3","start":27,"end":30,"id":"Rfam1.4","color":"aliceblue"});
var bedsCollection=[bed1,bed2,bed3,bed4]
var bedTrack = new C.BedTrack({"collection":bedsCollection,"el":svg.append("g"),"cx":200,"cy":200,'outerRadius':65,'innerRadius':60});
bedTrack.render(ideogramTrack);
var plot1=new C.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 C.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 C.PlotModel({"color":"blue","chr":"lnc2","values":new Array(6,-6,5,-5,4,-4,3,-3,2,-2,1,-1)});
var plotsCollection= [plot2,plot1,plot3];
var plotTrack = new C.PlotTrack({"collection":plotsCollection,"el":svg.append("g"),"cx":200,"cy":200,'outerRadius':95,'innerRadius':70});
plotTrack.render(ideogramTrack);
var link1 = new C.LinkModel({"source":bed1,"target":bed2});
var link2 = new C.LinkModel({"source":bed3,"target":bed4});
var linksCollection = [link1,link2]
var linkTrack = new C.LinkTrack({"collection":linksCollection,"el":svg.append("g"),"cx":200,"cy":200,'radius':45});
linkTrack.render(ideogramTrack);
var bedGraph1 = new C.BedGraphModel({"chr":"lnc1","start":2,"end":5,"value":10})
var bedGraph3 = new C.BedGraphModel({"chr":"lnc1","start":5,"length":2,"value":5})
var bedGraph4 = new C.BedGraphModel({"chr":"lnc1","start":15,"end":18,"value":5})
var bedGraph2 = new C.BedGraphModel({"chr":"lnc2","start":2,"end":5,"value":5})
var c = [bedGraph1,bedGraph2,bedGraph3, bedGraph4];
var bedGraphTrack = new C.BedGraphTrack({"collection":c,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":100,"innerRadius":70,"color":"red"});
bedGraphTrack.render(ideogramTrack);
}(bam2x.circos))
</script>
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>plot circos 0.1.3</title>
<link rel="stylesheet" href="mydiv.css">
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://eligrey.com/demos/FileSaver.js/FileSaver.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="bam2x.circos.js"></script>
<style>
body {
font:10px sans-serif;
}
</style>
<script>
</script>
</head>
<body>
<div class="easyui-layout" fit="true" style="width:100%;height:100%;min-width:960px;margin:0 auto">
<div style="width:210px; background-color: aliceblue" region="west" title="DATA SOURCE" >
<div class="easyui-accordion" >
<div id="url" class="myDiv" title="read url">
<label>Data url: <input type="text" id="data-url" placeholder="http://dl.dropboxusercontent.com/u/26972351/viz/gist/circos/0.1.1/circos.json" style="width:100%;"/></label>
<button id="url-button" value="read" onclick="readUrl()">read</button>
</div>
<div id="input" class="mydiv" title="read local file">
<input type="file" id="file" name="file"/>
<a href="http://v.zhu.land/gist/circos/0.1.1/circos.json">Example Data</a>
</div>
<div title="input text" id="text-data" class="myDiv">
<textArea id="input-text" style="height:50%;width:100%">
</textArea>
<button id="render-input-text-button" onclick="readInputText()">read</button>
<button id="clear-input-text-button" onclick="clearInputText()">clear</button>
</div>
</div>
<div class="myDiv" align="center">
<h2>I'M FEELING LUCKY</h2>
<button id="random-button" value="plot_random" onclick="plot_random()">CLICK ME!</button>
<br><br><br>
<a href="http://v.zhu.land/gist/circos/0.1.1/circos.json">EXAMPLE INPUT FILE</a>
</div>
</div>
<div id="FIGURE" style=" height:100% ; background-color: white" region="center" class="myDiv" title="FIGURE" align="center">
<div id="canvas" class="easyui-resizable" style="padding:20px height:98%;width:98%;border:1px solid">
</div>
</div>
<div id="right" region="east" style="background-color: aliceblue; width:210px; text-align:center; height:100%" title="CONTROL PANEL">
<div id="controls" class="myDiv" style="height:30%">
<form id="svg-options">
<label>Filename: <input type="text" class="filename" id="svg-filename" placeholder="demo"/>.svg</label>
<input type="submit" value="Save"/>
</form>
Clear the Canvas<br>
<button id="clear-button" value="clear" onclick="clearCanvas()">clear figure</button>
</div>
</div>
<div style="font-size: 90%" align="center" region="south">
<p>source code are under <a href="http://www.gnu.org/licenses/gpl-3.0.txt">GPL LICENSE</a>.<br />
Copyright &copy; <a href="https://github.com/nimezhu">zhuxp</a><br /></p>
<p>Please contact
<a href="mailto:[email protected]">zhuxp</a>
with your questions, comments, and suggestions.</p>
</div>
</div>
<script>
var colors = d3.scale.category10().domain(d3.range(0,10));
var svg_options_form = document.getElementById("svg-options");
var svg_filename = document.getElementById("svg-filename");
svg_options_form.addEventListener("submit", function(event) {
event.preventDefault();
var BB = Blob;
var svg = document.getElementById("svg");
var svg_xml = (new XMLSerializer).serializeToString(svg);
saveAs(
new BB(
[svg_xml]
, {type: "text/plain;charset=" + document.characterSet}
)
, (svg_filename.value || svg_filename.placeholder) + ".svg"
);
}, false);
</script>
<script>
function handleFileSelect(evt) {
clearCanvas();
var files = evt.target.files; // FileList object
// Only process image files.
var file=files[0]
var reader = new FileReader();
reader.onloadend = (function(evt) {
bam2x.circos.plot_json(eval("("+evt.target.result+")"));
});
reader.readAsText(file)
}
function httpGet(theUrl)
{
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
return xmlHttp.responseText;
}
function readUrl()
{
clearCanvas();
var url=document.getElementById("data-url").value || document.getElementById("data-url").placeholder;;
bam2x.circos.plot_json(eval("("+httpGet(url)+")"));
}
function readInputText()
{ clearCanvas();
bam2x.circos.plot_json(eval("("+document.getElementById("input-text").value+")"));
}
function clearInputText()
{
document.getElementById("input-text").value=""
}
function clearCanvas()
{
d3.select('#canvas').text('')
}
function random_generator(a,b,c)
{
var data={};
a = typeof a !== 'undefined' ? a : 5;
b = typeof b !== 'undefined' ? b : 2;
c = typeof c !== 'undefined' ? c : 20;
data.ideograms=[];;
data.links=[];
data.plottracks=[];
if (a>10) {a=10};
for (var i=0;i<a;i++)
{
data.ideograms.push({"id":"chr"+(i+1),"length":Math.floor((Math.random() * 75) + 25),"color":colors(i)})
}
data.tracks=[];
for(var i=0;i<b;i++)
{
data.tracks.push(random_track(data.ideograms,"rnd_track_"+i))
}
links=[]
for(var i=0;i<c;i++) {
links.push(random_link(data.ideograms))
}
data.tracks.push({"type":"links","name":"test_link","values":links});
return data;
}
function random_track(ideograms,name)
{
var track={};
track.name=name
track.type="plot"
track.values=[];
for(key in ideograms){
values=[]
for(var i=0;i<ideograms[key].length;i++){
values.push(Math.random()*10);
}
track.values.push({"chr":ideograms[key].id,"values":values,"color":colors(Math.floor(Math.random()*10))})
}
return track;
}
function random_link(ideograms){
var a=Math.floor(Math.random()*ideograms.length)
var b=Math.floor(Math.random()*ideograms.length)
var size_a=Math.floor(Math.random()*10)+2
var start_a=Math.floor(Math.random()*(ideograms[a].length-size_a))
var size_b=Math.floor(Math.random()*10)+2
var start_b=Math.floor(Math.random()*(ideograms[b].length-size_a))
var link={}
link.source={"chr":ideograms[a].id,"start":start_a,"end":start_a+size_a}
link.target={"chr":ideograms[b].id,"start":start_b,"end":start_b+size_b}
link.color=colors(Math.floor(Math.random()*10))
return link;
}
function plot_random()
{
clearCanvas();
var a=Math.floor(Math.random()*10)+2;
var b=Math.floor(Math.random()*3)+1;
var c=Math.floor(Math.random()*20)+20;
var data=random_generator(a,b,c);
bam2x.circos.plot_json(data,"canvas");
}
document.getElementById('file').addEventListener('change', handleFileSelect, false);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment