Display a HEATMAP module step by step

0. Download all files in this tutorial.

Download HEATMAP.zip and click *.html file(in HEATMAP.zip) to open this demo in local browser!.

1. Input data.

    Example file: HEATMAP01.txt

    Data structure

    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.

2. Prepare module through python script.

    Use:

    python NGCircos_PrepareData.py HEATMAP HEATMAP01.txt > HEATMAP01.js

    Example file: HEATMAP01.js

    Details in js file:

    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"},
]];
    Note: explaination for each parameter is available in document

3. Including HEATMAP data

    Use <script> tag to include HEATMAP01.js.

    <script src="js/HEATMAP01.js"></script>

4. Initialize NG-Circos with HEATMAP data

    Prepare a <div> tag with “example” id to set the picture position your will draw in html, e.g.:

    NGCircos01 = new NGCircos(HEATMAP01,NGCircosGenome,{ // Initialize with "HEATMAP01" data tag

5. Source code

    When step 1 to 4 are finished, the configuration for NGCircos: 

    <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>

6. Visualization of HEATMAP data using NG-Circos

Download svg ↓