nimezhu · September 1, 2016 19:35
diff --git a/README.md b/README.md
diff --git a/circos.js b/circos.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(
        {
        el:"",
        startAngle:  0,
        endAngle:  6.20,
        innerRadius: 240,
        outerRadius: 245,
        cx: 250,
        cy: 250,
        attributes: {},
        initialize: function(options) {
               if(options.attributes)
               {
                   this.attributes=options.attributes;
               }
              for (var key in options)
                  {
                  this[key]=options[key];
                  }
               _.bindAll(this,'render');

           },
           render: function(text,ticks)
           {
               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.5);
                                ideogram.selectAll(".flash").remove();
                               }
                               
                          ).append("title").text(this.model.id);
                        //text test
               if(text)
                   {
                /*
               var text = ideogram.append("svg:text")
               .attr("x", 10)
               .attr("dy",-15) 
               text.append("svg:textPath")
               .attr("xlink:href","#symbol-"+this.model.id)
               .text(self.model.id);
                */
                var k =  self.startAngle ;
                var text = ideogram.append("g").attr("class","chr-name");
                text.attr("transform","rotate("+ (k*180/Math.PI - 90) +")"+"translate("+(self.outerRadius+15)+ ",0)");
                text.append("text").attr("transform","rotate(90)").attr("x",5).text(self.model.id);
                   }   ;

                if(ticks) {
                    var ideogram=this.el
                    var ticks = ideogram.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 
                        };
                });
            }
        }               
 );
 



 var IdeogramTrack = Backbone.View.extend(
        {
        id:"ideograms",
        el:"",
        startAngle:  0,
        endAngle:  6.20,
        innerRadius: 240,
        outerRadius: 245,
        cx: 250,
        cy: 250,
        attributes: {},
        ideogramViews: {},
        gapAngle: 0.02,

           initialize: function(options) {
              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");
                  }
               _.bindAll(this,'render');

           },
           add: function(ideogram)
           {
               this.collection.add(ideogram);
           }
           ,

           render: function(ticks)
           {
               var offsetAngle=this.startAngle;
               var totalLength=this.collection.totalLength();
               var totalGaps=this.collection.size();
               var gapAngle=this.gapAngle; //set later
               var totalAngle=this.endAngle-this.startAngle-gapAngle*totalGaps;
               var startAngle=offsetAngle;
               var self=this;
               this.collection.each( function(i)
                   {
                     var endAngle=startAngle+i.length/totalLength*totalAngle;
                     var ideogramView = new 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);
               
           }
        }
 );


 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 options)
              {
              this[key]=options[key];
              }
        },
        length: function()
        {
            return this.end-this.start;
        }
        });
        

 var LinkModel = Backbone.Model.extend(
        {
        initialize: function(options)
        {
            for (var key in options)
              {
              this[key]=options[key];
              }
        },
        });
       
 var LinksCollection = Backbone.Collection.extend({
    model: LinkModel,
    
    initialize: function(models,options){
        for (var key in options)
          {
          this[key]=options[key];
          } 
    },

  });

 var LinkView = Backbone.View.extend({
            radius: 120,
            initialize: function(options) {
                for (var key in options)
                  {
                  this[key]=options[key];
                  } 
                //need el and model.
            },
            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"
                    )
            }

          });


 var LinkTrack = Backbone.View.extend(
        {
        radius: 150,
        cx: 250,
        cy: 250,

           initialize: function(options) {
              for (var key in options)
                  {
                  this[key]=options[key];
                  };
                  this.el.attr("transform","translate("+this.cx+","+this.cy+")");

           },

           render: function(coordinates)
           {   var self=this;
               this.collection.each(function(i)
                       {
                 
                        linkView = new LinkView({"el":self.el.append("g"),
                                                 "model":i,
                                                 "radius":self.radius,
                                                 "cx":self.cx,
                                                 "cy":self.cy
                                                });
                        linkView.render(coordinates);
                       });   
       },
           
        }
 );


 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:"beds",
        el:"",
        startAngle:  0,
        endAngle:  6.20,
        innerRadius: 230,
        outerRadius: 235,
        cx: 250,
        cy: 250,
        attributes: {},
        bedViews: {},
        gapAngle: 0.02,
       // collections: new BedsCollection(),
        },

           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");
                  }
               //add coordinates (ideogramTrack)
             //confirm add ideogramTrack! 
               _.bindAll(this,'render');

           },
           add: function(bed)
           {
               this.collection.add(bed);
           }
           ,

           render: function(coordinates)
           {   var self=this;
               this.collection.each(function(i)
                       {
                            var angles=coordinates.translateBed(i.chr,i.start,i.end);
                            var startAngle=angles[0];
                            var endAngle=angles[1];
                            var ideogramView = new 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();
                       });   
       },
           
        }
 );




 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({
    innerRadius: 240,
    outerRadius: 250,
    startAngle: 0,
    endAngle: 6.20,
    yMax: 10,
    yMin: -10,
    cx:200,
    cy:200,
    initialize: function(options) {
        for (var key in options)
          {
          this[key]=options[key];
          }     
    },

    render: function(coordinates) {
        var self=this;
        var bars=this.el.selectAll("path").data(this.collection.models).enter().append("path");
        this.el.attr("class","plot");
        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}
       
      
        if (self.yMin >= 0)
         {      
                bars.attr("fill",self.collection.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.collection.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;
    }
  });

 var BedGraphTrack = BedGraphView;




 var PlotModel = Backbone.Model.extend({
        defaults: {
            chr: "chr", //chromosome or RNA name
            name: "noname",
            values: new Array(1,2,3),
            color: "black",
        },
        initialize: function(options){
            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({
    
    innerRadius: 240,
    outerRadius: 250,
    startAngle: 0,
    endAngle: 6.20,
    yMax: 10,
    yMin: -10,
    cx:200,
    cy:200,
    
    initialize: function(options) {
        for (var key in options)
          {
          this[key]=options[key];
          }     
        //initial model  PlotModel
          //this.yMin = Math.min.apply(Math, this.model.values);  
          //this.yMax = Math.max.apply(Math, this.model.values);  
    },

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

  });


 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(
        {
        startAngle:  0,
        endAngle:  6.20,
        innerRadius: 230,
        outerRadius: 235,
        cx: 250,
        cy: 250,
        attributes: {},
        plotViews: {},
        gapAngle: 0.02,
        yMin: -10,
        yMax: 10,
       // collections: new PlotsCollection(),

           initialize: function(options) {
              for (var key in options)
                  {
                  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 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 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();
                       });   
       },
           
        }
 );




 var TracksModel = Backbone.Model.extend(
        {
        initialize: function(options)
        {
          for (var key in options)
          {
          this[key]=options[key];
          };
          
         //ideogramsCollection
         //bedsCollectionArray
         //linksCollectionArray
         //plotsCollectionArray
          if(!this.ideogramsCollection)
              {
               this.ideogramsCollection = new IdeogramsCollection();
              };
         
        },
        
        
        }       
        );

 var TracksViewer = Backbone.View.extend({
      innerRadius: 70,
      outerRadius: 230,
      cx: 250,
      cy: 250,
      //model: TracksModel.
      initialize: function(options) {
      for (var key in options)
      {
      this[key]=options[key];
      };
      //innerRadius
      //outerRadius
      //cx
      //cy
      //el : d3.append("g")
     this.model.bind('change', this.render);
    },
    render: function(){
        this.el.selectAll("g").remove();
      var stepRadius=(this.outerRadius-this.innerRadius)/(1+this.model.plotsCollectionArray.length*2+this.model.bedsCollectionArray.length);
      var ideogramTrack = new IdeogramTrack({"collection":this.model.ideogramsCollection,"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","ideograms"),"outerRadius":this.outerRadius,"innerRadius":this.outerRadius-stepRadius});       
      ideogramTrack.render(true);
      var j=0;
      for (var i in this.model.bedsCollectionArray)
          { 
            var bedTrack = new BedTrack({"collection":this.model.bedsCollectionArray[i],"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","bed"),"outerRadius":(j+1)*stepRadius+this.innerRadius,"innerRadius":j*stepRadius+this.innerRadius});
            j+=1;
            bedTrack.render(ideogramTrack);
          }
      for (var i in this.model.plotsCollectionArray)
      {
        
        var plotTrack = new PlotTrack({"collection":this.model.plotsCollectionArray[i],"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","plot"),"outerRadius":(j+2)*stepRadius+this.innerRadius,"innerRadius":j*stepRadius+this.innerRadius});
        j+=2;
        plotTrack.render(ideogramTrack);
      }
      for (var i in this.model.linksCollectionArray)
      {
        
        var linkTrack = new LinkTrack({"collection":this.model.linksCollectionArray[i],"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","links"),"radius":this.innerRadius});
        linkTrack.render(ideogramTrack);
      }
    
    }

  }); 
diff --git a/circos.json b/circos.json
 { "ideograms":[
 {"id":"chr2L","length":47,"color":"blue"},
 {"id":"chr2R","length":43,"color":"green"},
 {"id":"chr3L","length":50,"color":"red"},
 {"id":"chr3R","length":56,"color":"yellow"},
 {"id":"chr4","length":3,"color":"grey"},
 {"id":"chrU","length":21,"color":"orange"},
 {"id":"chrX","length":45,"color":"purple"}
 ],

 "tracks":
 [
 {
 "name": "conservation",
 "type": "plot",
 "values":
 [
 {"color":"blue","chr":"chr2L","values":[28,24,23,18,26,28,36,21,16,12,29,29,30,34,30,32,25,20,27,31,16,17,24,13,23,22,45,29,28,25,28,15,33,27,39,28,23,19,29,33,42,32,29,26,42,35]},
 {"color":"green","chr":"chr2R","values":[30,34,24,33,48,32,16,32,25,29,26,31,20,30,24,36,39,14,31,21,32,23,26,19,24,20,20,39,23,28,28,22,20,23,22,28,27,34,23,18,18,21,8]},
 {"color":"red","chr":"chr3L","values":[25,40,24,15,38,20,32,25,31,15,32,23,13,17,31,19,25,124,30,16,22,20,27,33,28,25,25,25,26,26,20,21,24,31,24,29,22,28,31,18,33,32,31,29,29,29,27,29,45,5]},
 {"color":"yellow","chr":"chr3R","values":[39,29,28,27,13,24,24,30,30,34,42,24,24,25,28,26,28,25,16,25,21,18,26,34,14,22,24,26,19,27,13,26,32,28,23,24,26,27,19,27,29,20,26,21,32,29,19,35,14,21,27,28,27,16,28,28]},
 {"color":"grey","chr":"chr4","values":[24,32,42]},
 {"color":"orange","chr":"chrU","values":[26,26,32,20,28,27,32,26,27,16,13,33,43,58,91,52,49,61,64,80,6]},
 {"color":"purple","chr":"chrX","values":[40,31,36,19,33,32,26,20,29,30,26,22,27,35,18,32,47,36,30,28,34,32,13,35,18,37,19,20,30,40,20,22,31,22,28,20,39,25,35,37,30,27,25,71,27]}
 ]},
 {
 "name":"coverage",
 "color":"blue",
 "type":"plot",
 "values":
 [
 {"chr":"chr2L","values":[28,24,23,18,26,28,36,21,16,12,29,29,30,34,30,32,25,20,27,31,16,17,24,13,23,22,45,29,28,25,28,15,33,27,39,28,23,19,29,33,42,32,29,26,42,35]},
 {"chr":"chr2R","values":[30,34,24,33,48,32,16,32,25,29,26,31,20,30,24,36,39,14,31,21,32,23,26,19,24,20,20,39,23,28,28,22,20,23,22,28,27,34,23,18,18,21,8]},
 {"chr":"chr3L","values":[25,40,24,15,38,20,32,25,31,15,32,23,13,17,31,19,25,124,30,16,22,20,27,33,28,25,25,25,26,26,20,21,24,31,24,29,22,28,31,18,33,32,31,29,29,29,27,29,45,5]},
 {"chr":"chr3R","values":[39,29,28,27,13,24,24,30,30,34,42,24,24,25,28,26,28,25,16,25,21,18,26,34,14,22,24,26,19,27,13,26,32,28,23,24,26,27,19,27,29,20,26,21,32,29,19,35,14,21,27,28,27,16,28,28]},
 {"chr":"chr4","values":[24,32,42]},
 {"chr":"chrU","values":[26,26,32,20,28,27,32,26,27,16,13,33,43,58,91,52,49,61,64,80,6]},
 {"chr":"chrX","values":[40,31,36,19,33,32,26,20,29,30,26,22,27,35,18,32,47,36,30,28,34,32,13,35,18,37,19,20,30,40,20,22,31,22,28,20,39,25,35,37,30,27,25,71,27]}
 ]},
 {
    "name":"bedGraph_test",
    "color":"green",
    "type":"bedgraph",
    "values":
    [
      {"chr":"chr3R","start":25,"end":35,"value":25},
      {"chr":"chr3R","start":2,"end":5,"value":65}
    ]
 },
 {
    "name":"bed_test",
    "color":"green",
    "type":"bed",
    "values":
    [
      {"chr":"chr2L","start":25,"end":35,"value":25,"color":"red","id":"aha"},
      {"chr":"chr2L","start":2,"end":5,"value":65,"color":"blue","id":"oh"}
    ]
 },

 {
 "name":"links_test",
 "color":"yellow",
 "type":"links",
 "values":
 [
 {"source":{"chr":"chr3R","start":22,"end":35},"target":{"chr":"chrU","start":10,"end":14}},
 {"source":{"chr":"chr3L","start":2,"end":5},"target":{"chr":"chr3R","start":10,"end":14},"color":"red"},
 {"source":{"chr":"chr2L","start":2,"end":5},"target":{"chr":"chrX","start":20,"end":24},"color":"green"}
 ]
 }

 ]
 }
diff --git a/demo_bedGraph.html b/demo_bedGraph.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="circos.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,"color":"yellow"});
      var collection = new IdeogramsCollection();
      collection.add([ideogram1,ideogram2,ideogram3]);
      var ideogramView = new IdeogramView({});
      var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":150,"innerRadius":140});
      ideogramTrack.render();
      var bedGraph1 = new BedGraphModel({"chr":"lnc1","start":2,"end":5,"value":10})
      var bedGraph3 = new BedGraphModel({"chr":"lnc1","start":5,"length":2,"value":5})
      var bedGraph4 = new BedGraphModel({"chr":"lnc1","start":15,"end":18,"value":5})
      var bedGraph2 = new BedGraphModel({"chr":"lnc2","start":2,"end":5,"value":5})
      var c = new BedGraphsCollection();
      c.add([bedGraph1,bedGraph2,bedGraph3, bedGraph4]);
      var bedGraphView = new BedGraphView({"collection":c,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":100,"innerRadius":70});
      bedGraphView.render(ideogramTrack);



 </script>
diff --git a/demo_read_json.html b/demo_read_json.html
 <!DOCTYPE HTML>
 <body>
 <link rel="stylesheet" href="mydiv.css"/>


 <div id="FIGURE" class="myDiv" align="center">
 <h2> FIGURE </h2>
 <div id="canvas" align="center">
 </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="circos.js"></script>

 <script>
 function render(data) {
      console.log(data);
      console.log(data.ideograms);
      
      var outerRadius=250;
      var innteRadius=70;
      var plotHeight=30;
      var bedHeight=10;
      var cx = outerRadius + 30;
      var cy = outerRadius + 30;
      var gapHeight=30
      var nowRadius=outerRadius;
      var svg = d3.select("#canvas").append("svg");
      var collection = new IdeogramsCollection();
      var ideograms = []
      for (var i in data.ideograms){
          ideograms.push(new IdeogramModel(data.ideograms[i]))
      }
      collection.add(ideograms);
      var ideogramView = new IdeogramView({});
      var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":cx,"cy":cy,"outerRadius":nowRadius,"innerRadius":nowRadius-bedHeight});
      ideogramTrack.render();
     
     nowRadius=nowRadius-bedHeight-gapHeight;
     for( var i in data.plottracks)
     {
     track=data.plottracks[i];
     console.log(track);
     var plots=[]; 
     for( var j in track.values)
     {
         plots.push(new PlotModel(track.values[j]));
     }
     console.log(plots);
      var plotsCollection= new PlotsCollection(plots,{"name":track.name});
      console.log(plotsCollection);
      var plotTrack = new PlotTrack({"collection":plotsCollection,"el":svg.append("g"),"cx":cx,"cy":cy,'outerRadius':nowRadius,'innerRadius':nowRadius-plotHeight});
      plotTrack.render(ideogramTrack);
      nowRadius-=plotHeight+gapHeight
    }
    
    var links = new LinksCollection();

    for(var i in data.links){
        links.push(new LinkModel(data.links[i]));
    }
    var linkTrack = new LinkTrack({"collection":links,"el":svg.append("g"),"cx":cx,"cy":cy,'radius':nowRadius+plotHeight});
    linkTrack.render(ideogramTrack);


 }



 $.getJSON( "circos.json", function( data ) {
    render(data)
    
    });
 </script>
diff --git a/demo_simple.html b/demo_simple.html
 <!DOCTYPE HTML>
 <body>
 <link rel="stylesheet" href="../lib/mydiv.css"/>
 <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="circos.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,"color":"yellow"});
      var collection = new IdeogramsCollection();
      collection.add([ideogram1,ideogram2,ideogram3]);
      var ideogramView = new IdeogramView({});
      var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":150,"innerRadius":140});
      ideogramTrack.render();

      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"),"cx":200,"cy":200,'outerRadius':65,'innerRadius':60});
      bedTrack.render(ideogramTrack);
      
      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)});
      var plotsCollection= new PlotsCollection([plot2,plot1,plot3],{"id":"conserve"});
      plotsCollection.add([plot2,plot1,plot3]);
      var plotTrack = new PlotTrack({"collection":plotsCollection,"el":svg.append("g"),"cx":200,"cy":200,'outerRadius':95,'innerRadius':70});
      plotTrack.render(ideogramTrack);
      
      
      var link1 = new LinkModel({"source":bed1,"target":bed2});
      var link2 = new LinkModel({"source":bed3,"target":bed4});
      var linksCollection = new LinksCollection();
      linksCollection.add(link1);
      linksCollection.add(link2);
      var linkTrack = new LinkTrack({"collection":linksCollection,"el":svg.append("g"),"cx":200,"cy":200,'radius':45});
      linkTrack.render(ideogramTrack);


 </script>
diff --git a/demo_trackView.html b/demo_trackView.html
 <!DOCTYPE HTML>
 <body>
 <link rel="stylesheet" href="../lib/mydiv.css"/>
 <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="circos.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,"color":"yellow"});
      var collection = new IdeogramsCollection();
      collection.add([ideogram1,ideogram2,ideogram3]);

      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 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)});
      var plotsCollection= new PlotsCollection([plot2,plot1,plot3],{"id":"conserve"});
      plotsCollection.add([plot2,plot1,plot3]);
      
      
      var link1 = new LinkModel({"source":bed1,"target":bed2});
      var link2 = new LinkModel({"source":bed3,"target":bed4});
      var linksCollection = new LinksCollection();
      linksCollection.add(link1);
      linksCollection.add(link2);
      
      var tracksModel = new TracksModel( {
                                         "ideogramsCollection":collection,
                                         "bedsCollectionArray":[bedsCollection,bedsCollection,bedsCollection],
                                         "linksCollectionArray":[linksCollection],
                                         "plotsCollectionArray":[plotsCollection,plotsCollection,plotsCollection,plotsCollection],
                                         }                  
                        ); 
       
     var viewer=new TracksViewer({"el":svg.append("g"),
                "model":tracksModel,
                "cx":100,
                "cy":100,
                "innerRadius":30,
                "outerRadius":90});
      viewer.render();


 </script>
diff --git a/index.html b/index.html
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <title>plot circos 0.1.1</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://underscorejs.org/underscore-min.js"></script>
 <script src="http://backbonejs.org/backbone-min.js"></script>
 <script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
 <script src="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>


 <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) {
          plot(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;;
    plot(eval("("+httpGet(url)+")"));
    
 }
 function readInputText()
 {   clearCanvas();
    plot(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);
    plot(data);
 }
 function plot(data) {
      
      var outerRadius=250;
      var innteRadius=70;
      var plotHeight=30;
      var bedHeight=10;
      //var cx = outerRadius + 30;
      var cy = outerRadius + 30;
      //var cy = document.getElementById('canvas').clientHeight/2
      var cx = document.getElementById('canvas').clientWidth/2;
      var gapHeight= 5
      var nowRadius=outerRadius;
      var svg = d3.select("#canvas").append("svg").attr("id","svg");
      var collection = new IdeogramsCollection();
      var ideograms = []
      for (var i in data.ideograms){
          ideograms.push(new IdeogramModel(data.ideograms[i]))
      }
      collection.add(ideograms);
      var ideogramView = new IdeogramView({});
      var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":cx,"cy":cy,"outerRadius":nowRadius,"innerRadius":nowRadius-bedHeight});
      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 PlotModel(track.values[j]);
         if (track.color)
         {
             model.color=track.color
         }
         plots.push(model);

     }
      var plotsCollection= new PlotsCollection(plots,{"name":track.name});
      var plotTrack = new PlotTrack({"collection":plotsCollection,"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= new BedGraphsCollection()
        collection.add(track.values)
        if (track.color)
        {
            collection.color=track.color
        }
        var bedGraphTrack = new BedGraphView({"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= new BedsCollection()
        collection.add(track.values)
        if (track.color)
        {
            collection.color=track.color
        }
        var bedTrack = new 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 = new LinksCollection();

        for(var i in track.values){
            links.push(new LinkModel(track.values[i]));
         }
        var linkTrack = new LinkTrack({"collection":links,"el":svg.append("g"),"cx":cx,"cy":cy,'radius':nowRadius});
        linkTrack.render(ideogramTrack);
    };



    }
    
    

 }





 document.getElementById('file').addEventListener('change', handleFileSelect, false);



 </script>
 </body>
diff --git a/mydiv.css b/mydiv.css
    html,body{margin:5;padding:5;}

    body {
          font: 10px sans-serif;
    }

    /*.myDiv { width: 250px; height: 240px; padding: 0.5em; } */
    input { size:200;}
    svg {margin: 0 auto;}
    .myDiv {
        border:0px solid black;
        margin-bottom: 1cm;
        /*
        -webkit-border-top-left-radius:6px;
        -webkit-border-top-right-radius:6px;
        -moz-border-radius-topleft:6px;
        -moz-border-radius-topright:6px;
        border-top-left-radius:6px;
        border-top-right-radius:6px;
        /*width:300px; */
        font-size:8pt; /* or whatever */
        /* background-color: aliceblue */
    }
    .myDiv h2 {
        padding:4px;
        color:#fff;
        margin:0;
        background-color:black;
        font-size: 10pt; /* or whatever */
        font-family:Arial;
    }
    .myDiv p {
        font-family:Arial;
        /*padding:4px; */
    }

    .middle h2 {
        padding:4px;
        color:#fff;
        margin:0;
        background-color:navy;
        font-size: 10pt; /* or whatever */
        font-family:Arial;

    }
    
    textarea  {
    	
 	width: 60%;
 	height: 60%;
 	border: 3px solid #cccccc;
 	padding: 3px;
 	font-family: Tahoma, sans-serif;
 	background-image: url(bg.gif);
 	background-position: bottom right;
 	background-repeat: no-repeat;
 }

    li:hover {
        background-color: #FFFFCC;
    }
    td:hover {
       background-color: #FFFFCC;
    } 
    table {width:100px}
    td {white-space:nowrap;overflow:hidden;width:100px}
diff --git a/thumbnail.png b/thumbnail.png
 _
	/* 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(
	{
	el:"",
	startAngle: 0,
	endAngle: 6.20,
	innerRadius: 240,
	outerRadius: 245,
	cx: 250,
	cy: 250,
	attributes: {},
	initialize: function(options) {
	if(options.attributes)
	{
	this.attributes=options.attributes;
	}
	for (var key in options)
	{
	this[key]=options[key];
	}
	_.bindAll(this,'render');

	},
	render: function(text,ticks)
	{
	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.5);
	ideogram.selectAll(".flash").remove();
	}

	).append("title").text(this.model.id);
	//text test
	if(text)
	{
	/*
	var text = ideogram.append("svg:text")
	.attr("x", 10)
	.attr("dy",-15)
	text.append("svg:textPath")
	.attr("xlink:href","#symbol-"+this.model.id)
	.text(self.model.id);
	*/
	var k = self.startAngle ;
	var text = ideogram.append("g").attr("class","chr-name");
	text.attr("transform","rotate("+ (k*180/Math.PI - 90) +")"+"translate("+(self.outerRadius+15)+ ",0)");
	text.append("text").attr("transform","rotate(90)").attr("x",5).text(self.model.id);
	} ;

	if(ticks) {
	var ideogram=this.el
	var ticks = ideogram.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/(k2410))*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
	};
	});
	}
	}
	);




	var IdeogramTrack = Backbone.View.extend(
	{
	id:"ideograms",
	el:"",
	startAngle: 0,
	endAngle: 6.20,
	innerRadius: 240,
	outerRadius: 245,
	cx: 250,
	cy: 250,
	attributes: {},
	ideogramViews: {},
	gapAngle: 0.02,

	initialize: function(options) {
	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");
	}
	_.bindAll(this,'render');

	},
	add: function(ideogram)
	{
	this.collection.add(ideogram);
	}
	,

	render: function(ticks)
	{
	var offsetAngle=this.startAngle;
	var totalLength=this.collection.totalLength();
	var totalGaps=this.collection.size();
	var gapAngle=this.gapAngle; //set later
	var totalAngle=this.endAngle-this.startAngle-gapAngle*totalGaps;
	var startAngle=offsetAngle;
	var self=this;
	this.collection.each( function(i)
	{
	var endAngle=startAngle+i.length/totalLength*totalAngle;
	var ideogramView = new 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);

	}
	}
	);


	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 options)
	{
	this[key]=options[key];
	}
	},
	length: function()
	{
	return this.end-this.start;
	}
	});


	var LinkModel = Backbone.Model.extend(
	{
	initialize: function(options)
	{
	for (var key in options)
	{
	this[key]=options[key];
	}
	},
	});

	var LinksCollection = Backbone.Collection.extend({
	model: LinkModel,

	initialize: function(models,options){
	for (var key in options)
	{
	this[key]=options[key];
	}
	},

	});

	var LinkView = Backbone.View.extend({
	radius: 120,
	initialize: function(options) {
	for (var key in options)
	{
	this[key]=options[key];
	}
	//need el and model.
	},
	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"
	)
	}

	});


	var LinkTrack = Backbone.View.extend(
	{
	radius: 150,
	cx: 250,
	cy: 250,

	initialize: function(options) {
	for (var key in options)
	{
	this[key]=options[key];
	};
	this.el.attr("transform","translate("+this.cx+","+this.cy+")");

	},

	render: function(coordinates)
	{ var self=this;
	this.collection.each(function(i)
	{

	linkView = new LinkView({"el":self.el.append("g"),
	"model":i,
	"radius":self.radius,
	"cx":self.cx,
	"cy":self.cy
	});
	linkView.render(coordinates);
	});
	},

	}
	);


	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:"beds",
	el:"",
	startAngle: 0,
	endAngle: 6.20,
	innerRadius: 230,
	outerRadius: 235,
	cx: 250,
	cy: 250,
	attributes: {},
	bedViews: {},
	gapAngle: 0.02,
	// collections: new BedsCollection(),
	},

	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");
	}
	//add coordinates (ideogramTrack)
	//confirm add ideogramTrack!
	_.bindAll(this,'render');

	},
	add: function(bed)
	{
	this.collection.add(bed);
	}
	,

	render: function(coordinates)
	{ var self=this;
	this.collection.each(function(i)
	{
	var angles=coordinates.translateBed(i.chr,i.start,i.end);
	var startAngle=angles[0];
	var endAngle=angles[1];
	var ideogramView = new 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();
	});
	},

	}
	);




	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({
	innerRadius: 240,
	outerRadius: 250,
	startAngle: 0,
	endAngle: 6.20,
	yMax: 10,
	yMin: -10,
	cx:200,
	cy:200,
	initialize: function(options) {
	for (var key in options)
	{
	this[key]=options[key];
	}
	},

	render: function(coordinates) {
	var self=this;
	var bars=this.el.selectAll("path").data(this.collection.models).enter().append("path");
	this.el.attr("class","plot");
	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}


	if (self.yMin >= 0)
	{
	bars.attr("fill",self.collection.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.collection.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;
	}
	});

	var BedGraphTrack = BedGraphView;




	var PlotModel = Backbone.Model.extend({
	defaults: {
	chr: "chr", //chromosome or RNA name
	name: "noname",
	values: new Array(1,2,3),
	color: "black",
	},
	initialize: function(options){
	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({

	innerRadius: 240,
	outerRadius: 250,
	startAngle: 0,
	endAngle: 6.20,
	yMax: 10,
	yMin: -10,
	cx:200,
	cy:200,

	initialize: function(options) {
	for (var key in options)
	{
	this[key]=options[key];
	}
	//initial model PlotModel
	//this.yMin = Math.min.apply(Math, this.model.values);
	//this.yMax = Math.max.apply(Math, this.model.values);
	},

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

	});


	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(
	{
	startAngle: 0,
	endAngle: 6.20,
	innerRadius: 230,
	outerRadius: 235,
	cx: 250,
	cy: 250,
	attributes: {},
	plotViews: {},
	gapAngle: 0.02,
	yMin: -10,
	yMax: 10,
	// collections: new PlotsCollection(),

	initialize: function(options) {
	for (var key in options)
	{
	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 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 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();
	});
	},

	}
	);




	var TracksModel = Backbone.Model.extend(
	{
	initialize: function(options)
	{
	for (var key in options)
	{
	this[key]=options[key];
	};

	//ideogramsCollection
	//bedsCollectionArray
	//linksCollectionArray
	//plotsCollectionArray
	if(!this.ideogramsCollection)
	{
	this.ideogramsCollection = new IdeogramsCollection();
	};

	},


	}
	);

	var TracksViewer = Backbone.View.extend({
	innerRadius: 70,
	outerRadius: 230,
	cx: 250,
	cy: 250,
	//model: TracksModel.
	initialize: function(options) {
	for (var key in options)
	{
	this[key]=options[key];
	};
	//innerRadius
	//outerRadius
	//cx
	//cy
	//el : d3.append("g")
	this.model.bind('change', this.render);
	},
	render: function(){
	this.el.selectAll("g").remove();
	var stepRadius=(this.outerRadius-this.innerRadius)/(1+this.model.plotsCollectionArray.length*2+this.model.bedsCollectionArray.length);
	var ideogramTrack = new IdeogramTrack({"collection":this.model.ideogramsCollection,"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","ideograms"),"outerRadius":this.outerRadius,"innerRadius":this.outerRadius-stepRadius});
	ideogramTrack.render(true);
	var j=0;
	for (var i in this.model.bedsCollectionArray)
	{
	var bedTrack = new BedTrack({"collection":this.model.bedsCollectionArray[i],"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","bed"),"outerRadius":(j+1)stepRadius+this.innerRadius,"innerRadius":jstepRadius+this.innerRadius});
	j+=1;
	bedTrack.render(ideogramTrack);
	}
	for (var i in this.model.plotsCollectionArray)
	{

	var plotTrack = new PlotTrack({"collection":this.model.plotsCollectionArray[i],"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","plot"),"outerRadius":(j+2)stepRadius+this.innerRadius,"innerRadius":jstepRadius+this.innerRadius});
	j+=2;
	plotTrack.render(ideogramTrack);
	}
	for (var i in this.model.linksCollectionArray)
	{

	var linkTrack = new LinkTrack({"collection":this.model.linksCollectionArray[i],"cx":this.cx,"cy":this.cy,"el":this.el.append("g").attr("class","links"),"radius":this.innerRadius});
	linkTrack.render(ideogramTrack);
	}

	}

	});
	{ "ideograms":[
	{"id":"chr2L","length":47,"color":"blue"},
	{"id":"chr2R","length":43,"color":"green"},
	{"id":"chr3L","length":50,"color":"red"},
	{"id":"chr3R","length":56,"color":"yellow"},
	{"id":"chr4","length":3,"color":"grey"},
	{"id":"chrU","length":21,"color":"orange"},
	{"id":"chrX","length":45,"color":"purple"}
	],

	"tracks":
	[
	{
	"name": "conservation",
	"type": "plot",
	"values":
	[
	{"color":"blue","chr":"chr2L","values":[28,24,23,18,26,28,36,21,16,12,29,29,30,34,30,32,25,20,27,31,16,17,24,13,23,22,45,29,28,25,28,15,33,27,39,28,23,19,29,33,42,32,29,26,42,35]},
	{"color":"green","chr":"chr2R","values":[30,34,24,33,48,32,16,32,25,29,26,31,20,30,24,36,39,14,31,21,32,23,26,19,24,20,20,39,23,28,28,22,20,23,22,28,27,34,23,18,18,21,8]},
	{"color":"red","chr":"chr3L","values":[25,40,24,15,38,20,32,25,31,15,32,23,13,17,31,19,25,124,30,16,22,20,27,33,28,25,25,25,26,26,20,21,24,31,24,29,22,28,31,18,33,32,31,29,29,29,27,29,45,5]},
	{"color":"yellow","chr":"chr3R","values":[39,29,28,27,13,24,24,30,30,34,42,24,24,25,28,26,28,25,16,25,21,18,26,34,14,22,24,26,19,27,13,26,32,28,23,24,26,27,19,27,29,20,26,21,32,29,19,35,14,21,27,28,27,16,28,28]},
	{"color":"grey","chr":"chr4","values":[24,32,42]},
	{"color":"orange","chr":"chrU","values":[26,26,32,20,28,27,32,26,27,16,13,33,43,58,91,52,49,61,64,80,6]},
	{"color":"purple","chr":"chrX","values":[40,31,36,19,33,32,26,20,29,30,26,22,27,35,18,32,47,36,30,28,34,32,13,35,18,37,19,20,30,40,20,22,31,22,28,20,39,25,35,37,30,27,25,71,27]}
	]},
	{
	"name":"coverage",
	"color":"blue",
	"type":"plot",
	"values":
	[
	{"chr":"chr2L","values":[28,24,23,18,26,28,36,21,16,12,29,29,30,34,30,32,25,20,27,31,16,17,24,13,23,22,45,29,28,25,28,15,33,27,39,28,23,19,29,33,42,32,29,26,42,35]},
	{"chr":"chr2R","values":[30,34,24,33,48,32,16,32,25,29,26,31,20,30,24,36,39,14,31,21,32,23,26,19,24,20,20,39,23,28,28,22,20,23,22,28,27,34,23,18,18,21,8]},
	{"chr":"chr3L","values":[25,40,24,15,38,20,32,25,31,15,32,23,13,17,31,19,25,124,30,16,22,20,27,33,28,25,25,25,26,26,20,21,24,31,24,29,22,28,31,18,33,32,31,29,29,29,27,29,45,5]},
	{"chr":"chr3R","values":[39,29,28,27,13,24,24,30,30,34,42,24,24,25,28,26,28,25,16,25,21,18,26,34,14,22,24,26,19,27,13,26,32,28,23,24,26,27,19,27,29,20,26,21,32,29,19,35,14,21,27,28,27,16,28,28]},
	{"chr":"chr4","values":[24,32,42]},
	{"chr":"chrU","values":[26,26,32,20,28,27,32,26,27,16,13,33,43,58,91,52,49,61,64,80,6]},
	{"chr":"chrX","values":[40,31,36,19,33,32,26,20,29,30,26,22,27,35,18,32,47,36,30,28,34,32,13,35,18,37,19,20,30,40,20,22,31,22,28,20,39,25,35,37,30,27,25,71,27]}
	]},
	{
	"name":"bedGraph_test",
	"color":"green",
	"type":"bedgraph",
	"values":
	[
	{"chr":"chr3R","start":25,"end":35,"value":25},
	{"chr":"chr3R","start":2,"end":5,"value":65}
	]
	},
	{
	"name":"bed_test",
	"color":"green",
	"type":"bed",
	"values":
	[
	{"chr":"chr2L","start":25,"end":35,"value":25,"color":"red","id":"aha"},
	{"chr":"chr2L","start":2,"end":5,"value":65,"color":"blue","id":"oh"}
	]
	},

	{
	"name":"links_test",
	"color":"yellow",
	"type":"links",
	"values":
	[
	{"source":{"chr":"chr3R","start":22,"end":35},"target":{"chr":"chrU","start":10,"end":14}},
	{"source":{"chr":"chr3L","start":2,"end":5},"target":{"chr":"chr3R","start":10,"end":14},"color":"red"},
	{"source":{"chr":"chr2L","start":2,"end":5},"target":{"chr":"chrX","start":20,"end":24},"color":"green"}
	]
	}

	]
	}
	<!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="circos.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,"color":"yellow"});
	var collection = new IdeogramsCollection();
	collection.add([ideogram1,ideogram2,ideogram3]);
	var ideogramView = new IdeogramView({});
	var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":150,"innerRadius":140});
	ideogramTrack.render();
	var bedGraph1 = new BedGraphModel({"chr":"lnc1","start":2,"end":5,"value":10})
	var bedGraph3 = new BedGraphModel({"chr":"lnc1","start":5,"length":2,"value":5})
	var bedGraph4 = new BedGraphModel({"chr":"lnc1","start":15,"end":18,"value":5})
	var bedGraph2 = new BedGraphModel({"chr":"lnc2","start":2,"end":5,"value":5})
	var c = new BedGraphsCollection();
	c.add([bedGraph1,bedGraph2,bedGraph3, bedGraph4]);
	var bedGraphView = new BedGraphView({"collection":c,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":100,"innerRadius":70});
	bedGraphView.render(ideogramTrack);



	</script>
	<!DOCTYPE HTML>
	<body>
	<link rel="stylesheet" href="mydiv.css"/>


	<div id="FIGURE" class="myDiv" align="center">
	<h2> FIGURE </h2>
	<div id="canvas" align="center">
	</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="circos.js"></script>

	<script>
	function render(data) {
	console.log(data);
	console.log(data.ideograms);

	var outerRadius=250;
	var innteRadius=70;
	var plotHeight=30;
	var bedHeight=10;
	var cx = outerRadius + 30;
	var cy = outerRadius + 30;
	var gapHeight=30
	var nowRadius=outerRadius;
	var svg = d3.select("#canvas").append("svg");
	var collection = new IdeogramsCollection();
	var ideograms = []
	for (var i in data.ideograms){
	ideograms.push(new IdeogramModel(data.ideograms[i]))
	}
	collection.add(ideograms);
	var ideogramView = new IdeogramView({});
	var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":cx,"cy":cy,"outerRadius":nowRadius,"innerRadius":nowRadius-bedHeight});
	ideogramTrack.render();

	nowRadius=nowRadius-bedHeight-gapHeight;
	for( var i in data.plottracks)
	{
	track=data.plottracks[i];
	console.log(track);
	var plots=[];
	for( var j in track.values)
	{
	plots.push(new PlotModel(track.values[j]));
	}
	console.log(plots);
	var plotsCollection= new PlotsCollection(plots,{"name":track.name});
	console.log(plotsCollection);
	var plotTrack = new PlotTrack({"collection":plotsCollection,"el":svg.append("g"),"cx":cx,"cy":cy,'outerRadius':nowRadius,'innerRadius':nowRadius-plotHeight});
	plotTrack.render(ideogramTrack);
	nowRadius-=plotHeight+gapHeight
	}

	var links = new LinksCollection();

	for(var i in data.links){
	links.push(new LinkModel(data.links[i]));
	}
	var linkTrack = new LinkTrack({"collection":links,"el":svg.append("g"),"cx":cx,"cy":cy,'radius':nowRadius+plotHeight});
	linkTrack.render(ideogramTrack);


	}



	$.getJSON( "circos.json", function( data ) {
	render(data)

	});
	</script>
	<!DOCTYPE HTML>
	<body>
	<link rel="stylesheet" href="../lib/mydiv.css"/>
	<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="circos.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,"color":"yellow"});
	var collection = new IdeogramsCollection();
	collection.add([ideogram1,ideogram2,ideogram3]);
	var ideogramView = new IdeogramView({});
	var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":200,"cy":200,"outerRadius":150,"innerRadius":140});
	ideogramTrack.render();

	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"),"cx":200,"cy":200,'outerRadius':65,'innerRadius':60});
	bedTrack.render(ideogramTrack);

	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)});
	var plotsCollection= new PlotsCollection([plot2,plot1,plot3],{"id":"conserve"});
	plotsCollection.add([plot2,plot1,plot3]);
	var plotTrack = new PlotTrack({"collection":plotsCollection,"el":svg.append("g"),"cx":200,"cy":200,'outerRadius':95,'innerRadius':70});
	plotTrack.render(ideogramTrack);


	var link1 = new LinkModel({"source":bed1,"target":bed2});
	var link2 = new LinkModel({"source":bed3,"target":bed4});
	var linksCollection = new LinksCollection();
	linksCollection.add(link1);
	linksCollection.add(link2);
	var linkTrack = new LinkTrack({"collection":linksCollection,"el":svg.append("g"),"cx":200,"cy":200,'radius':45});
	linkTrack.render(ideogramTrack);


	</script>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>plot circos 0.1.1</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://underscorejs.org/underscore-min.js"></script>
	<script src="http://backbonejs.org/backbone-min.js"></script>
	<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script src="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 © <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>


	<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) {
	plot(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;;
	plot(eval("("+httpGet(url)+")"));

	}
	function readInputText()
	{ clearCanvas();
	plot(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);
	plot(data);
	}
	function plot(data) {

	var outerRadius=250;
	var innteRadius=70;
	var plotHeight=30;
	var bedHeight=10;
	//var cx = outerRadius + 30;
	var cy = outerRadius + 30;
	//var cy = document.getElementById('canvas').clientHeight/2
	var cx = document.getElementById('canvas').clientWidth/2;
	var gapHeight= 5
	var nowRadius=outerRadius;
	var svg = d3.select("#canvas").append("svg").attr("id","svg");
	var collection = new IdeogramsCollection();
	var ideograms = []
	for (var i in data.ideograms){
	ideograms.push(new IdeogramModel(data.ideograms[i]))
	}
	collection.add(ideograms);
	var ideogramView = new IdeogramView({});
	var ideogramTrack = new IdeogramTrack({"collection":collection,"el":svg.append("g"),"cx":cx,"cy":cy,"outerRadius":nowRadius,"innerRadius":nowRadius-bedHeight});
	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 PlotModel(track.values[j]);
	if (track.color)
	{
	model.color=track.color
	}
	plots.push(model);

	}
	var plotsCollection= new PlotsCollection(plots,{"name":track.name});
	var plotTrack = new PlotTrack({"collection":plotsCollection,"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= new BedGraphsCollection()
	collection.add(track.values)
	if (track.color)
	{
	collection.color=track.color
	}
	var bedGraphTrack = new BedGraphView({"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= new BedsCollection()
	collection.add(track.values)
	if (track.color)
	{
	collection.color=track.color
	}
	var bedTrack = new 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 = new LinksCollection();

	for(var i in track.values){
	links.push(new LinkModel(track.values[i]));
	}
	var linkTrack = new LinkTrack({"collection":links,"el":svg.append("g"),"cx":cx,"cy":cy,'radius':nowRadius});
	linkTrack.render(ideogramTrack);
	};



	}



	}





	document.getElementById('file').addEventListener('change', handleFileSelect, false);



	</script>
	</body>
	html,body{margin:5;padding:5;}

	body {
	font: 10px sans-serif;
	}

	/.myDiv { width: 250px; height: 240px; padding: 0.5em; } /
	input { size:200;}
	svg {margin: 0 auto;}
	.myDiv {
	border:0px solid black;
	margin-bottom: 1cm;
	/*
	-webkit-border-top-left-radius:6px;
	-webkit-border-top-right-radius:6px;
	-moz-border-radius-topleft:6px;
	-moz-border-radius-topright:6px;
	border-top-left-radius:6px;
	border-top-right-radius:6px;
	/width:300px; /
	font-size:8pt; /* or whatever */
	/* background-color: aliceblue */
	}
	.myDiv h2 {
	padding:4px;
	color:#fff;
	margin:0;
	background-color:black;
	font-size: 10pt; /* or whatever */
	font-family:Arial;
	}
	.myDiv p {
	font-family:Arial;
	/padding:4px; /
	}

	.middle h2 {
	padding:4px;
	color:#fff;
	margin:0;
	background-color:navy;
	font-size: 10pt; /* or whatever */
	font-family:Arial;

	}

	textarea {

	width: 60%;
	height: 60%;
	border: 3px solid #cccccc;
	padding: 3px;
	font-family: Tahoma, sans-serif;
	background-image: url(bg.gif);
	background-position: bottom right;
	background-repeat: no-repeat;
	}

	li:hover {
	background-color: #FFFFCC;
	}
	td:hover {
	background-color: #FFFFCC;
	}
	table {width:100px}
	td {white-space:nowrap;overflow:hidden;width:100px}