Skip to content

Instantly share code, notes, and snippets.

@nimezhu

nimezhu/README.md

Last active August 29, 2015 14:01
Show Gist options
  • Save nimezhu/11546637 to your computer and use it in GitHub Desktop.
Save nimezhu/11546637 to your computer and use it in GitHub Desktop.
Download ZIP
javascript circos module v0.1
Raw
README.md
Raw
index.html
<!DOCTYPE HTML>
<body>
<link rel="stylesheet" href="http://v.zhu.land/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="http://v.zhu.land/gist/circos/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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment