Download ARC.zip and click *.html file(in ARC.zip) to open this demo in local browser!.
Users should prepare the input data in the following format (separated by tabs).
#chr start end color des
EGFR 57 167 #CD8500 Recep_L domain
EGFR 185 338 blue Furin-like domain
EGFR 361 480 #CD8500 Recep_L domain
EGFR 505 636 yellow GF_recep_IV domain
EGFR 713 965 red Pkinase Tyr domain
Following fields are required:
The 1 column(chr) is the name of the chromosome. In this example, this field specify the protein name.
The 2 column(start) is the start of the arc.
The 3 column(end) is the end of the arc.
The 4 column(color) is the color of the arc.
The 5 column(des) is the description of the arc.
python NGCircos_PrepareData.py ARC ARC01.txt > ARC01.jsvar ARC01 = [ "ARC01" , {
innerRadius: 145,
outerRadius: 155,
} , [
{chr: "EGFR", start: "57", end: "167", color: "#CD8500", des: "Recep_L domain"},
{chr: "EGFR", start: "185", end: "338", color: "blue", des: "Furin-like domain"},
{chr: "EGFR", start: "361", end: "480", color: "#CD8500", des: "Recep_L domain"},
{chr: "EGFR", start: "505", end: "636", color: "yellow", des: "GF_recep_IV domain"},
{chr: "EGFR", start: "713", end: "965", color: "red", des: "Pkinase Tyr domain"},
]];
<script src="js/ARC01.js"></script> NGCircos01 = new NGCircos(ARC01,NGCircosGenome,{ // Initialize with "ARC01" data tag<span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"svg-action-btn download-img"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln">line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">11px</span><span class="pun">;</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black</span><span class="atv">"</span><span class="tag">></span><span class="pln">Download png ↓</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"javascript:(function () { var e = document.createElement('script');if (window.location.protocol === 'https:') { e.setAttribute('src', './lib/svg-crowbar.js'); } else { e.setAttribute('src', './lib/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln">line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">11px</span><span class="pun">;</span><span class="pln">background</span><span class="pun">:</span><span class="pln"> </span><span class="com">#FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black</span><span class="atv">"</span><span class="pln"> </span><span class="tag">></span><span class="pln">Download svg ↓</span><span class="tag"></a></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">"NGCircos"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-lg-12"</span><span class="tag">></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">"NGCircos"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </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">"./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/NGCircos.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">"js/ARC01.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"> TEXT01 </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">"TEXT01"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> x</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">20</span><span class="pun">,</span><span class="pln"> y</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> textSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">,</span><span class="pln"> textWeight</span><span class="pun">:</span><span class="pln"> </span><span class="str">"bold"</span><span class="pun">,</span><span class="pln"> </span><span class="com">//normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900</span><span class="pln"> textColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"red"</span><span class="pun">,</span><span class="pln"> textOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.0</span><span class="pun">,</span><span class="pln"> text</span><span class="pun">:</span><span class="pln"> </span><span class="str">"EGFR"</span><span class="pln"> </span><span class="pun">}];</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> </span><span class="typ">NGCircosGenome</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="com">// Configure your own genome here.</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="pun">[</span><span class="str">"EGFR"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">1211</span><span class="pun">],</span><span class="pln"> </span><span class="pun">]</span><span class="pln"> </span><span class="pun">];</span><span class="pln"> </span><span class="typ">NGCircos01</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">NGCircos</span><span class="pun">(</span><span class="pln">TEXT01</span><span class="pun">,</span><span class="pln">ARC01</span><span class="pun">,</span><span class="typ">NGCircosGenome</span><span class="pun">,{</span><span class="pln"> </span><span class="com">// Initialize NGCircos.js with "NGCircosGenome" and Main configuration</span><span class="pln"> target </span><span class="pun">:</span><span class="pln"> </span><span class="str">"NGCircos"</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"> svgClassName</span><span class="pun">:</span><span class="pln"> </span><span class="str">"NGCircos"</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">250</span><span class="pun">,</span><span class="pln"> zoom </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</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">"#999999"</span><span class="pun">],</span><span class="pln"> ticks </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> display </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> len </span><span class="pun">:</span><span class="pln"> </span><span class="lit">5</span><span class="pun">,</span><span class="pln"> color </span><span class="pun">:</span><span class="pln"> </span><span class="str">"#000"</span><span class="pun">,</span><span class="pln"> textSize </span><span class="pun">:</span><span class="pln"> </span><span class="lit">8</span><span class="pun">,</span><span class="pln"> textColor </span><span class="pun">:</span><span class="pln"> </span><span class="str">"#000"</span><span class="pun">,</span><span class="pln"> scale </span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> genomeLabel </span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> display </span><span class="pun">:</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">,</span><span class="pln"> textSize </span><span class="pun">:</span><span class="pln"> </span><span class="lit">16</span><span class="pun">,</span><span class="pln"> textColor </span><span class="pun">:</span><span class="pln"> </span><span class="str">"red"</span><span class="pun">,</span><span class="pln"> dx </span><span class="pun">:</span><span class="pln"> </span><span class="lit">3.14</span><span class="pun">,</span><span class="pln"> dy </span><span class="pun">:</span><span class="pln"> </span><span class="str">"-0.95em"</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="typ">ARCMouseEvent</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">ARCMouseClickDisplay</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">ARCMouseClickColor</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">ARCMouseClickArcOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickArcStrokeColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#F26223"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickArcStrokeWidth</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickTextFromData</span><span class="pun">:</span><span class="pln"> </span><span class="str">"fifth"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickTextOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickTextColor</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">ARCMouseClickTextSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">8</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickTextPostionX</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickTextPostionY</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseClickTextDrag</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">ARCMouseMoveDisplay</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">ARCMouseMoveColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"none"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseMoveArcOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseMoveArcStrokeColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#F26223"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseMoveArcStrokeWidth</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOutDisplay</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">ARCMouseOutAnimationTime</span><span class="pun">:</span><span class="pln"> </span><span class="lit">500</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOutColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"none"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOutArcOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOutArcStrokeColor</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">ARCMouseOutArcStrokeWidth</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOverDisplay</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">ARCMouseOverColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"none"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOverArcOpacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOverArcStrokeColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"#F26223"</span><span class="pun">,</span><span class="pln"> </span><span class="typ">ARCMouseOverArcStrokeWidth</span><span class="pun">:</span><span class="pln"> </span><span class="lit">3</span><span class="pun">,</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="typ">NGCircos01</span><span class="pun">.</span><span class="pln">draw_genome</span><span class="pun">(</span><span class="typ">NGCircos01</span><span class="pun">.</span><span class="pln">genomeLength</span><span class="pun">);</span><span class="pln"> </span><span class="com">// NGCircos.js callback</span><span class="pln"> </span><span class="typ">NGCircos01</span><span class="pun">.</span><span class="pln">draw_genome</span><span class="pun">(</span><span class="typ">NGCircos01</span><span class="pun">.</span><span class="pln">genomeLength2</span><span class="pun">);</span><span class="pln"> </span><span class="com">// NGCircos2.js callback second time // NGCircos2.js callback second time</span><span class="pln"> </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/saveSvgAsPng.js"</span><span class="tag">></script></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> </span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> downloadImg </span><span class="pun">=</span><span class="pln"> getEle</span><span class="pun">(</span><span class="str">".download-img"</span><span class="pun">),</span><span class="pln"> imgName </span><span class="pun">=</span><span class="pln"> getEle</span><span class="pun">(</span><span class="str">"."</span><span class="pun">+</span><span class="typ">NGCircos01</span><span class="pun">.</span><span class="pln">svgClassName</span><span class="pun">);</span><span class="pln"> </span><span class="com">// imgScale = getEle(".img-scale");</span><span class="pln"> downloadImg</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">"click"</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> mySvg </span><span class="pun">=</span><span class="pln"> getEle</span><span class="pun">(</span><span class="str">"."</span><span class="pun">+</span><span class="typ">NGCircos01</span><span class="pun">.</span><span class="pln">svgClassName</span><span class="pun">),</span><span class="pln"> </span><span class="com">//iImgScale = parseInt(imgScale.value) || 1,</span><span class="pln"> oImgName </span><span class="pun">=</span><span class="pln"> imgName</span><span class="pun">.</span><span class="pln">value </span><span class="pun">||</span><span class="pln"> </span><span class="typ">NGCircos01</span><span class="pun">.</span><span class="pln">svgClassName</span><span class="pun">;</span><span class="pln"> </span><span class="com">// saveSvgAsPng(mySvg, oImgName+".png", iImgScale);</span><span class="pln"> saveSvgAsPng</span><span class="pun">(</span><span class="pln">mySvg</span><span class="pun">,</span><span class="pln"> oImgName</span><span class="pun">+</span><span class="str">".png"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">})</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> getEle</span><span class="pun">(</span><span class="pln">obj</span><span class="pun">){</span><span class="pln"> </span><span class="kwd">var</span><span class="pln"> d </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> d</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="pln">obj</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">})()</span><span class="pln"> </span><span class="tag"></script></span>