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/45d9c451603a2fa353f6 to your computer and use it in GitHub Desktop.
Save nimezhu/45d9c451603a2fa353f6 to your computer and use it in GitHub Desktop.
Download ZIP
javascript circos plot demo No.2
Raw
README.md

javascript circos plot demo No.2

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 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment