Download HEATMAP.zip and click *.html file(in HEATMAP.zip) to open this demo in local browser!.
Users should prepare the input data in the following format (separated by tabs).
#chr start end name value
2L 1 1011544 test heatmap 0.8
2L 1011548 2011544 test heatmap 0.3
2L 2011548 3011544 test heatmap 0.1
2L 2011545 2011546 test heatmap 0.01
......
X 18011548 19011544 test heatmap 0.83
X 19011548 20011544 test heatmap 0.39
X 20011548 21146708 test heatmap 0.49
X 21011548 22422827 test heatmap 0.83
Following fields are required:
The 1 column(chr
) is the name of the chromosome.
The 2 column(start
) is the start of the region.
The 3 column(end
) is the end of the region.
The 4 column(name
) is the name of the region.
The 5 column(value
) is the value of the region.
python NGCircos_PrepareData.py HEATMAP HEATMAP01.txt > HEATMAP01.js
var HEATMAP01 = [ "HEATMAP01" , {
innerRadius: 125,
outerRadius: 165,
maxColor: "red",
minColor: "yellow"
} , [
{chr: "2L", start: "1", end: "1011544", name: "test heatmap", value: "0.8"},
{chr: "2L", start: "1011548", end: "2011544", name: "test heatmap", value: "0.3"},
{chr: "2L", start: "2011548", end: "3011544", name: "test heatmap", value: "0.1"},
{chr: "2L", start: "2011545", end: "2011546", name: "test heatmap", value: "0.01"},
......
{chr: "X", start: "18011548", end: "19011544", name: "test heatmap", value: "0.83"},
{chr: "X", start: "19011548", end: "20011544", name: "test heatmap", value: "0.39"},
{chr: "X", start: "20011548", end: "21146708", name: "test heatmap", value: "0.49"},
{chr: "X", start: "21011548", end: "22422827", name: "test heatmap", value: "0.83"},
]];
<script src="js/HEATMAP01.js"></script>
NGCircos01 = new NGCircos(HEATMAP01,NGCircosGenome,{ // Initialize with "HEATMAP01" data tag
<button class="svg-action-btn download-img" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black">Download png ↓</button> <a href="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); })();" style="height: 18px;line-height: 18px;padding: 0 11px;background: #FFFFFF;border: 1px #D9D9D9 solid;border-radius: 3px;display: inline-block;font-size: 12px;outline: none;color: black" >Download svg ↓</a> <div id="NGCircos"></div> </div> </div> <div class="row"> <div class="col-lg-12"> <div id="NGCircos"></div> </div> </div> <!-- Data configuration --> <script src="./lib/jquery.js"></script> <script src="./lib/d3.js"></script> <script src="./lib/NGCircos.js"></script> <script src="js/HEATMAP01.js"></script> <!-- Genome configuration --> <script> var NGCircosGenome = [ // Configure your own genome here. [ ["2L" , 23011544], ["2R" , 21146708], ["3L" , 24543557], ["3R" , 27905053], ["X" , 22422827], ["4" , 1351857] ] ]; NGCircos01 = new NGCircos(HEATMAP01,NGCircosGenome,{ // Initialize NGCircos.js with "NGCircosGenome" and Main configuration target : "NGCircos", svgWidth : 900, svgHeight : 600, innerRadius: 246, outerRadius: 250, zoom : false, genomeFillColor: ["#999999"], ticks : { display : true, len : 5, color : "#000", textSize : 8, textColor : "#000", scale : 5000000 }, genomeLabel : { display : true, textSize : 16, textColor : "#000", dx : 3.14, dy : "-0.95em" }, HEATMAPMouseEvent: true, HEATMAPMouseClickDisplay: true, HEATMAPMouseClickColor: "green", HEATMAPMouseClickOpacity: 1, HEATMAPMouseClickStrokeColor: "#F26223", HEATMAPMouseClickStrokeWidth: 0, HEATMAPMouseOutDisplay: true, HEATMAPMouseOutAnimationTime: 500, HEATMAPMouseOutColor: "none", HEATMAPMouseOutOpacity: 1, HEATMAPMouseOutStrokeColor: "none", HEATMAPMouseOutStrokeWidth: 0, HEATMAPMouseOverDisplay: true, HEATMAPMouseOverColor: "none", HEATMAPMouseOverOpacity: 1, HEATMAPMouseOverStrokeColor: "#F26223", HEATMAPMouseOverStrokeWidth: 3, }); NGCircos01.draw_genome(NGCircos01.genomeLength); // NGCircos.js callback NGCircos01.draw_genome(NGCircos01.genomeLength2); // NGCircos2.js callback second time </script> <script src="./lib/saveSvgAsPng.js"></script> <script> (function(){ var downloadImg = getEle(".download-img"), imgName = getEle("."+NGCircos01.svgClassName); // imgScale = getEle(".img-scale"); downloadImg.addEventListener("click",function(){ var mySvg = getEle("."+NGCircos01.svgClassName), //iImgScale = parseInt(imgScale.value) || 1, oImgName = imgName.value || NGCircos01.svgClassName; // saveSvgAsPng(mySvg, oImgName+".png", iImgScale); saveSvgAsPng(mySvg, oImgName+".png"); }) function getEle(obj){ var d = document; return d.querySelector(obj); } })() </script>