1. Prepare data.
2. Configure genome.
<span class="dec"><!DOCTYPE html></span><span class="pln"> </span><span class="tag"><html></span><span class="pln"> </span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"utf-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">BioCircos.js</span><span class="tag"></title></span><span class="pln"> </span><span class="tag"></head></span><span class="pln"> </span><span class="tag"><body></span><span class="pln"> </span><span class="com"><!-- BioCircos.js, Jquery.js and D3.js import --></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"./lib/jquery.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"./lib/d3.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"./lib/biocircos-1.1.0.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="com"><!-- Prepare a <div> tag with "biocircos" id to set the picture position your will draw in html --></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"biocircos"</span><span class="tag">></div></span><span class="pln"> </span><span class="com"><!-- Data configuration --></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"./data/gallery/gallery10_LINK01.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"./data/gallery/gallery10_LINK02.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="com"><!-- Genome configuration --></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> </span><span class="typ">BioCircosGenome</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">[</span><span class="str">"1"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">249250621</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"2"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">243199373</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"3"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">198022430</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"4"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">191154276</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"5"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">180915260</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"6"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">171115067</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"7"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">159138663</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"8"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">146364022</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"9"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">141213431</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"10"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">135534747</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"11"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">135006516</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"12"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">133851895</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"13"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">115169878</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"14"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">107349540</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"15"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">102531392</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"16"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">90354753</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"17"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">81195210</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"18"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">78077248</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"19"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">59128983</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"20"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">63025520</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"21"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">48129895</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"22"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">51304566</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"X"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">155270560</span><span class="pun">],</span><span class="pln"> </span><span class="pun">[</span><span class="str">"Y"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">59373566</span><span class="pun">]</span><span class="pln"> </span><span class="pun">];</span><span class="pln"> </span><span class="typ">BioCircos01</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">BioCircos</span><span class="pun">(</span><span class="pln">LINK01</span><span class="pun">,</span><span class="pln">LINK02</span><span class="pun">,</span><span class="typ">BioCircosGenome</span><span class="pun">,{</span><span class="pln"> target </span><span class="pun">:</span><span class="pln"> </span><span class="str">"biocircos"</span><span class="pun">,</span><span class="pln"> svgWidth </span><span class="pun">:</span><span class="pln"> </span><span class="lit">900</span><span class="pun">,</span><span class="pln"> svgHeight </span><span class="pun">:</span><span class="pln"> </span><span class="lit">600</span><span class="pun">,</span><span class="pln"> innerRadius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">246</span><span class="pun">,</span><span class="pln"> outerRadius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">270</span><span class="pun">,</span><span class="pln"> genomeFillColor</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"#FFFFCC"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"#CCFFFF"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"#FFCCCC"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"#CCCC99"</span><span class="pun">,</span><span class="str">"#0099CC"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"#996699"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"#336699"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"#FFCC33"</span><span class="pun">,</span><span class="str">"#66CC00"</span><span class="pun">],</span><span class="pln"> </span><span class="typ">LINKMouseEvent</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="typ">LINKMouseClickDisplay</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="typ">LINKMouseClickOpacity</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.0</span><span class="pun">,</span><span class="pln"> </span><span class="typ">LINKMouseClickStrokeColor</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"red"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">LINKMouseClickStrokeWidth</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="lit">6</span><span class="pun">,</span><span class="pln"> </span><span class="typ">LINKLabelDragEvent</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="typ">BioCircos01</span><span class="pun">.</span><span class="pln">draw_genome</span><span class="pun">(</span><span class="typ">BioCircos01</span><span class="pun">.</span><span class="pln">genomeLength</span><span class="pun">);</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"> </span><span class="tag"></body></span><span class="pln"> </span><span class="tag"></html></span>
3. Open the html file in the browser to see the following results.
Download