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:

    <span class="tag">&lt;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">&gt;</span><span class="pln">Download png ↓</span><span class="tag">&lt;/button&gt;</span><span class="pln">
    </span><span class="tag">&lt;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">&gt;</span><span class="pln">Download svg ↓</span><span class="tag">&lt;/a&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"NGCircos"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
                    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
                </span><span class="tag">&lt;/div&gt;</span><span class="pln">
                </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"row"</span><span class="tag">&gt;</span><span class="pln">
                    </span><span class="tag">&lt;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">&gt;</span><span class="pln">
                        </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"NGCircos"</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
                    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
                </span><span class="tag">&lt;/div&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- Data configuration --&gt;</span><span class="pln">
    </span><span class="tag">&lt;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">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;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">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;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">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"js/HEATMAP01.js"</span><span class="tag">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="com">&lt;!-- Genome configuration --&gt;</span><span class="pln">
    </span><span class="tag">&lt;script&gt;</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">"2L"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">23011544</span><span class="pun">],</span><span class="pln">
         </span><span class="pun">[</span><span class="str">"2R"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">21146708</span><span class="pun">],</span><span class="pln">
         </span><span class="pun">[</span><span class="str">"3L"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">24543557</span><span class="pun">],</span><span class="pln">
         </span><span class="pun">[</span><span class="str">"3R"</span><span class="pln"> </span><span class="pun">,</span><span class="pln"> </span><span class="lit">27905053</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">22422827</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">1351857</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">HEATMAP01</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">
         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">5000000</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">true</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">"#000"</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">HEATMAPMouseEvent</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">HEATMAPMouseClickDisplay</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">HEATMAPMouseClickColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">"green"</span><span class="pun">,</span><span class="pln">
         </span><span class="typ">HEATMAPMouseClickOpacity</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">HEATMAPMouseClickStrokeColor</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">HEATMAPMouseClickStrokeWidth</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">HEATMAPMouseOutDisplay</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">HEATMAPMouseOutAnimationTime</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">HEATMAPMouseOutColor</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">HEATMAPMouseOutOpacity</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">HEATMAPMouseOutStrokeColor</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">HEATMAPMouseOutStrokeWidth</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">HEATMAPMouseOverDisplay</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">HEATMAPMouseOverColor</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">HEATMAPMouseOverOpacity</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">HEATMAPMouseOverStrokeColor</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">HEATMAPMouseOverStrokeWidth</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</span><span class="pln">
    </span><span class="tag">&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;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">&gt;&lt;/script&gt;</span><span class="pln">
    </span><span class="tag">&lt;script&gt;</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">&lt;/script&gt;</span>

6. Visualization of HEATMAP data using NG-Circos

Download svg ↓
2L2R3L3RX4012340123401234012345012340