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

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));

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>

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:xp@zhu.land">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>