1. Introduction

1.1 About

NG-Circos is an interactive circular genome visualization tool to present and interpretate diverse types of genomic data based on web features.. It implements a raster-based SVG visualization using the open source Javascript framework jquery.js. NG-Circos is multiplatform and works in all major internet browsers (Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera). Its speed is determined by the client’s hardware and internet browser. For smoothest user experience, we recommend Google Chrome.

NG-Circos can visualize popular genomic data format (such as WIG and GTF), construct various graphic elements (such as line, scatter, bubble and heatmap) and display/compare multiple genomic features, annotations and associations (such as genomic variations, expressions and gene fusions) in or between genomic intervals with 21 functional modules. NG-Circos also provides flexible interactive events and fascinating animations for each graphic element. Figures created by NG-Circos are publication-quality and downloadable.

NG-Circos provides SNP, CNV, HEATMAP, LINK, LINE, SCATTER, ARC, TEXT, WIG, LOLLIPOP, GENE, CHORD, AUXILIARYLINE, BUBBLE, HISTGRAM, BACKGROUND, LEGEND, COMPARE and COMBINATION, REDIRECT, DOWNLOAD totally.

Note

NG-Circos itself is not a web application, but a visualization tool that provides the functionality for bioinformatians to build Circos-like figure on bioinformatians’ own web applications. The NG-Circos users are supposed to be familiar with HTML, CSS and JavaScript.

1.2 NG-Circos & Circos

Though NG-Circos shares its name with Circos, NG-Circos is not exactly the same as Circos desktop. NG-Circos is a tool for programmers. It is not an app for end-users, and developers need to write code around NG-Circos to build graphcentric apps. The comparison between NG-Circos and Circos is as follow:

Comparison

NG-Circos

Circos

Code

JavaScript

Perl

Users

For web developers / bioinformatians

For end-users

Interactive

Yes

No

Used to

Build Circos-like web applications / draw figures

Draw figures

2. Demos

alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text alternate text

Tips: Click and try the demos above!

3. Getting started

Overview of “Getting started”

alternate text alternate text alternate text alternate text alternate text alternate text

Step0. View demos in locale

There is a very easy and quick way to experience the power of NG-Circos. Do it step by step according to the following:

  1. Download and extract demos file NGCircos_demos.

  2. Open index.html file in NGCircos_demos folder with your local browser. Yes, everything is done! You will see the following. Click on the links, and you can see all of our demos locally.

alternate text

“NGCircos_demos” contains three folders(“lib”, “pages”, “data”) and “index.html”. “lib” contains all JavaScript library files needed. “pages” contains configurations for demos. “data” contains the input data from users. The file structure of “NGCircos_demos”:

---NGCircos_demos
   ---lib
      ---NGCircos.js
      ---d3.js
      ---jquery.js
      ---saveSvgAsPng.js
      ---svg-crowbar.js
   ---pages
      ---gallery01.html
      ---gallery02.html
      ......
   ---data
      ---Figure_ARC_DELETION.js
      ---Figure_SNP01.js
      ......
   ---index.html

Step1. Including NGCircos.js

This section will familiarise you with the basic steps necessarily to start using NG-Circos. Here we will visualize the GWAS data in GWAS Catalog with NG-Circos step by step.

After Step0, you will have a “pages” folder in “NGCircos_demos” folder. Now create a new file “gwas.html” in “pages” folder, then include NGCircos.js in a <script> tag. Now, “gwas.html” is as follows:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>NGCircos.js</title>
</head>
<body>
        <!-- NGCircos.js, Jquery.js and D3.js import -->
        <script src="../lib/jquery.js"></script>
        <script src="../lib/d3.js"></script>
        <script src="../lib/NGCircos.js"></script>
</body>
</html>

Note

NG-Circos is based on Jquery.js and D3.js(v3), so they should be included before NGCircos.js. Jquery.js, D3.js and NGCircos.js can be found in the lib folder of NGCircos_demo.zip.

Step2. <div> tag to set picture position in html

After Step1, prepare a <div> tag with “NG-Circos” id to set the picture position you will draw in html. Now, “gwas.html” is as follows:

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>NGCircos.js</title>
</head>
<body>
        <!-- NGCircos.js, Jquery.js and D3.js import -->
        <script src="../lib/jquery.js"></script>
        <script src="../lib/d3.js"></script>
        <script src="../lib/NGCircos.js"></script>
        <!-- Prepare a <div> tag with "NGCircos" id to set the picture position your will draw in html -->
        <div id="NGCircos"></div>
</body>
</html>

Step3. Genome configuration

“Genome configuration” defines the number and size of chromosomes.

After Step2, We will configure “Genome configuration”. Genome configuration is set in a <script> tag. Here we configure the most used human genome - hg19, its data tag are defined as NGCircosGenome. Now, “gwas.html” is as follows:

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>NGCircos.js</title>
     </head>
     <body>
         <!-- NGCircos.js, Jquery.js and D3.js import -->
         <script src="../lib/jquery.js"></script>
         <script src="../lib/d3.js"></script>
         <script src="../lib/NGCircos.js"></script>
         <!-- Prepare a <div> tag with "NGCircos" id to set the picture position your will draw in html -->
         <div id="NGCircos"></div>
 <!-- Genome configuration -->
 <script>
   var NGCircosGenome = [   // human hg19, data tag is NGCircosGenome
     [
 ["1" , 249250621],
      ["2" , 243199373],
      ["3" , 198022430],
      ["4" , 191154276],
      ["5" , 180915260],
      ["6" , 171115067],
      ["7" , 159138663],
      ["8" , 146364022],
      ["9" , 141213431],
      ["10" , 135534747],
      ["11" , 135006516],
      ["12" , 133851895],
      ["13" , 115169878],
      ["14" , 107349540],
      ["15" , 102531392],
      ["16" , 90354753],
      ["17" , 81195210],
      ["18" , 78077248],
      ["19" , 59128983],
      ["20" , 63025520],
      ["21" , 48129895],
      ["22" , 51304566],
      ["X" , 155270560],
      ["Y" , 59373566]
]
   ];
 </script>
     </body>
 </html>

Note

Here we configure hg19 human genome with data tag as NGCircosGenome.

Step4. Initialization and Main configuration

“Main configuration” is the main configuration file of NG-Circos and mainly divided into four classes: “Customize SVG”, “Customize genome”, “Customize Events” and “Customize Tooltips”.

After Step3, We will initialize NG-Circos and configure “Main configuration”. Here are three changes:

  1. Initialize NG-Circos

All of the data tags that is defined in “Genome configuration” and “Data configuration” must be initialized here. We initialize data tag - NGCircosGenome as below:

NGCircos01 = new NGCircos(NGCircosGenome,{

Danger

All of the data tags that is defined in “Genome configuration” and “Data configuration” must be initialized here.

  1. Main configuration

Here we configure 7 attributes in “Main configuration”, other attributes are used their default values. More attributes can be found in “Main configuration” part of this document.

Main configuration

Default value

Class

Description

target

“NGCircos”

Customize SVG

SVG position in html, where <div> id is “NGCircos”

svgWidth

900

Customize SVG

SVG width

svgHeight

600

Customize SVG

SVG height

svgClassName

NGCircos

Customize genome

class name of SVG

chrPad

0.04

Customize genome

distance between chromosomes

innerRadius

246

Customize genome

inner radius of chromosome

outerRadius

270

Customize genome

outer radius of chromosome

  1. NG-Circos callback

Callback is necessary, Cause we add a compare module for NG-Circos, users need to call back twice, but it is usually the same, so don’t need to be too concerned about it.

Now, “gwas.html” is as follows:

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>NGCircos.js</title>
       </head>
       <body>
           <!-- NGCircos.js, Jquery.js and D3.js import -->
           <script src="../lib/jquery.js"></script>
           <script src="../lib/d3.js"></script>
           <script src="../lib/NGCircos.js"></script>
           <!-- Prepare a <div> tag with "NGCircos" id to set the picture position your will draw in html -->
           <div id="NGCircos"></div>
   <!-- Genome configuration -->
   <script>
     var NGCircosGenome = [
 [
        ["1" , 249250621],
        ["2" , 243199373],
        ["3" , 198022430],
        ["4" , 191154276],
        ["5" , 180915260],
        ["6" , 171115067],
        ["7" , 159138663],
        ["8" , 146364022],
        ["9" , 141213431],
        ["10" , 135534747],
        ["11" , 135006516],
        ["12" , 133851895],
        ["13" , 115169878],
        ["14" , 107349540],
        ["15" , 102531392],
        ["16" , 90354753],
        ["17" , 81195210],
        ["18" , 78077248],
        ["19" , 59128983],
        ["20" , 63025520],
        ["21" , 48129895],
        ["22" , 51304566],
        ["X" , 155270560],
        ["Y" , 59373566]
 ]
     ];
     NGCircos01 = new NGCircos(NGCircosGenome,{  // Initialize NG-Circos with "NGCircosGenome" and Main configuration
     //Main configuration
        target : "NGCircos",                       // Main configuration "target"
        svgWidth : 900,                             // Main configuration "svgWidth"
        svgHeight : 600,                            // Main configuration "svgHeight"
   svgClassName: "NGCircos",                  // Main configuration "svgClassName"
        chrPad : 0.04,                              // Main configuration "chrPad"
        innerRadius: 246,                           // Main configuration "innerRadius"
        outerRadius: 270,                           // Main configuration "outerRadius"
     });
     NGCircos01.draw_genome(NGCircos01.genomeLength); // NG-Circos callback
NGCircos01.draw_genome(NGCircos01.genomeLength2); // NG-Circos callback second time
   </script>
       </body>
   </html>

Great! You have drawn a simple genome! Is it so easy? Open “gwas.html” file with your local browser and view it as below:

alternate text

Step5. Add Data configuration

“Data configuration” is designed for “Function Modules” in NG-Circos. According to “Function Modules” division, “Data configuration” includes the parts below:

Data Configuration Class

For Biological Data

Need “Data Preparation Tools”

SNP module

SNP with value; GWAS data…

Yes

SCATTER module

SNP without value; Genes data…

Yes

LINK module

Gene fusions; Interaction; SV…

Yes

CNV module

CNV with value…

Yes

ARC module

CNV without value; Gene domain; Chromosome band…

Yes

HEATMAP module

Gene expression…

Yes

BUBBLE module

Gene expression and classification…

Yes

HISTOGRAM module

Gene expression…

Yes

LINE module

Gene expression…

Yes

BACKGROUND module

Display background and axis circles

No

TEXT module

Assigning annotation text

No

WIG module

.wig file;Read depth; Gene expression…

Yes

LOLLIPOP module

Muation…

Yes

GENE module

Gene profile…

Yes

CHORD module

Relationship between gene, exon, protein…

Yes

REDIRECT module

Redirect from module to image, website…

No

DOWNLOAD module

Download as SVG, PNG

No

AUXILIARYLINE module

Curve, broken, straight line with 4 kinds of marker

No

LEGEND module

Customize legend in circle, line, rectangle

No

COMPARE module

Advanced module, display two comparable datasets in circle…

No

COMBINATION module

Advanced module, display more biology details with mouse event…

No

We have provided “Data Preparation Tools” to prepare the data for almost all “Function Modules” except 6 auxiliary modules(BAKCGROUND, TEXT, REDIRECT, DOWNLOAD, AUXILIARYLINE, LEGEND, and 2 advanced modules(COMPARE COMBINATION),which don’t require a data input.

Step5.1 Display GWAS data using SNP module

  1. Input GWAS data

We download GWAS data from GWAS Catalog. Then we filtered the data and just left the items which their P-value less than 1E-18. We saved the data in SNP04_gwascatalog.txt, as below:

10      100315722       20.2218 rs603424
10      101219450       19      rs11190870
10      103086421       25.1549 rs11191548
10      112998590       74.0969 rs7903146
......
X       5266661 24.699  rs6638512
X       67343176        90.699  rs2497938
X       69578860        18.1549 rs11796357
X       79241621        32.699  rs5912838
  • The first column is the name of the chromosome.

  • The second column is the position of the SNP

  • The third column is the value of -log10(P-value)

  • The fourth column is the dbSNP id

  1. Use “Data Preparation Tools” to prepare data

Note

You need to install the python 2, before running NGCircos_PrepareData.py. You can skip this step, just download SNP04_gwascatalog.js for the next step.

We provide a python program NGCircos_PrepareData.py to help users prepare the input data for each module of NG-Circos

python NGCircos_PrepareData.py SNP SNP04_gwascatalog.txt > SNP04_gwascatalog.js

Move SNP04_gwascatalog.js to ./NGCircos_demos/data/get_started_gwas/ in your local.

  1. Output GWAS data used in NG-Circos

var SNP04_gwascatalog = [ "SNP04_gwascatalog" , {
  maxRadius: 205,
  minRadius: 153,
  SNPFillColor: "#9400D3",
  PointType: "circle",
  circleSize: 2,
  rectWidth: 2,
  rectHeight: 2
} , [
  {chr: "10", pos: "100315722", value: "20.2218", des: "rs603424", color: "rgb(153,102,0)"},
  {chr: "10", pos: "101219450", value: "19", des: "rs11190870", color: "rgb(153,102,0)"},
  {chr: "10", pos: "103086421", value: "25.1549", des: "rs11191548", color: "rgb(153,102,0)"},
  {chr: "10", pos: "112998590", value: "74.0969", des: "rs7903146", color: "rgb(153,102,0)"},
  ......
  {chr: "X", pos: "5266661", value: "24.699", des: "rs6638512", color: "rgb(153,153,153)"},
  {chr: "X", pos: "67343176", value: "90.699", des: "rs2497938", color: "rgb(153,153,153)"},
  {chr: "X", pos: "69578860", value: "18.1549", des: "rs11796357", color: "rgb(153,153,153)"},
  {chr: "X", pos: "79241621", value: "32.699", des: "rs5912838", color: "rgb(153,153,153)"},
]];
  1. Including GWAS data SNP04_gwascatalog.js

Use <script> tag to include GWAS data SNP04_gwascatalog.js. And add the following code to gwas.html.

<!-- Data configuration -->
<script src="../data/get_started_gwas/SNP04_gwascatalog.js"></script>
  1. Initialize GWAS data in NG-Circos with data tag : SNP04_gwascatalog

Here GWAS data’s data tag is defined as SNP04_gwascatalog. So add the following code to gwas.html.

NGCircos01 = new NGCircos(SNP04_gwascatalog,NGCircosGenome,{

Now, “gwas.html” is as follows:

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>NGCircos.js</title>
       </head>
       <body>
           <!-- NGCircos.js, Jquery.js and D3.js import -->
           <script src="../lib/jquery.js"></script>
           <script src="../lib/d3.js"></script>
           <script src="../lib/NGCircos.js"></script>
           <!-- Prepare a <div> tag with "NGCircos" id to set the picture position your will draw in html -->
           <div id="NGCircos"></div>
   <!-- Data configuration -->
   <script src="../data/get_started_gwas/SNP04_gwascatalog.js"></script>
   <!-- Genome configuration -->
   <script>
     var NGCircosGenome = [
 [
        ["1" , 249250621],
        ["2" , 243199373],
        ["3" , 198022430],
        ["4" , 191154276],
        ["5" , 180915260],
        ["6" , 171115067],
        ["7" , 159138663],
        ["8" , 146364022],
        ["9" , 141213431],
        ["10" , 135534747],
        ["11" , 135006516],
        ["12" , 133851895],
        ["13" , 115169878],
        ["14" , 107349540],
        ["15" , 102531392],
        ["16" , 90354753],
        ["17" , 81195210],
        ["18" , 78077248],
        ["19" , 59128983],
        ["20" , 63025520],
        ["21" , 48129895],
        ["22" , 51304566],
        ["X" , 155270560],
        ["Y" , 59373566]
 ]
     ];
     NGCircos01 = new NGCircos(SNP04_gwascatalog,NGCircosGenome,{  // Initialize NG-Circos with "NGCircosGenome" and Main configuration
     //Main configuration
        target : "NGCircos",                       // Main configuration "target"
        svgWidth : 900,                             // Main configuration "svgWidth"
        svgHeight : 600,                            // Main configuration "svgHeight"
   svgClassName: "NGCircos",                  // Main configuration "svgClassName"
        chrPad : 0.04,                              // Main configuration "chrPad"
        innerRadius: 246,                           // Main configuration "innerRadius"
        outerRadius: 270,                           // Main configuration "outerRadius"
     });
     NGCircos01.draw_genome(NGCircos01.genomeLength); // NG-Circos callback
NGCircos01.draw_genome(NGCircos01.genomeLength2); // NG-Circos callback second time
   </script>
       </body>
   </html>

Open “gwas.html” file with your local browser and view it as below:

alternate text

Step5.2 Display Background using BACKGROUND module

  1. Including BACKGROUND module configuration

BACKGROUND module’s configuration is short. So we can also include BACKGROUND module as the way below.

Note

if your data in other module, such as SNP module, is not too much and the file is short, you can also include it as the way below.

<script>
var BACKGROUND01 = [ "BACKGROUND01" , {
  BginnerRadius: 205,
  BgouterRadius: 153,
  BgFillColor: "#F2F2F2",
  BgborderColor : "#000",
  BgborderSize : 0.3
}];
</script>
  1. Initialize BACKGROUND module with data tag : BACKGROUND01

Here the data tag is defined as BACKGROUND01. So add the following code to gwas.html.

NGCircos01 = new NGCircos(BACKGROUND01,SNP04_gwascatalog,NGCircosGenome,{

Now, “gwas.html” is as follows:

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>NGCircos.js</title>
       </head>
       <body>
           <!-- NGCircos.js, Jquery.js and D3.js import -->
           <script src="../lib/jquery.js"></script>
           <script src="../lib/d3.js"></script>
           <script src="../lib/NGCircos.js"></script>
           <!-- Prepare a <div> tag with "NGCircos" id to set the picture position your will draw in html -->
           <div id="NGCircos"></div>
   <!-- Data configuration -->
   <script src="../data/get_started_gwas/SNP04_gwascatalog.js"></script>
   <script>
   var BACKGROUND01 = [ "BACKGROUND01" , {
     BginnerRadius: 205,
     BgouterRadius: 153,
     BgFillColor: "#F2F2F2",
     BgborderColor : "#000",
     BgborderSize : 0.3
   }];
   </script>
   <!-- Genome configuration -->
   <script>
     var NGCircosGenome = [
 [
        ["1" , 249250621],
        ["2" , 243199373],
        ["3" , 198022430],
        ["4" , 191154276],
        ["5" , 180915260],
        ["6" , 171115067],
        ["7" , 159138663],
        ["8" , 146364022],
        ["9" , 141213431],
        ["10" , 135534747],
        ["11" , 135006516],
        ["12" , 133851895],
        ["13" , 115169878],
        ["14" , 107349540],
        ["15" , 102531392],
        ["16" , 90354753],
        ["17" , 81195210],
        ["18" , 78077248],
        ["19" , 59128983],
        ["20" , 63025520],
        ["21" , 48129895],
        ["22" , 51304566],
        ["X" , 155270560],
        ["Y" , 59373566]
 ]
     ];
     NGCircos01 = new NGCircos(BACKGROUND01,SNP04_gwascatalog,NGCircosGenome,{  // Initialize NG-Circos with "NGCircosGenome" and Main configuration
     //Main configuration
        target : "NGCircos",                       // Main configuration "target"
        svgWidth : 900,                             // Main configuration "svgWidth"
        svgHeight : 600,                            // Main configuration "svgHeight"
   svgClassName: "NGCircos",                  // Main configuration "svgClassName"
        chrPad : 0.04,                              // Main configuration "chrPad"
        innerRadius: 246,                           // Main configuration "innerRadius"
        outerRadius: 270,                           // Main configuration "outerRadius"
     });
     NGCircos01.draw_genome(NGCircos01.genomeLength); // NG-Circos callback
NGCircos01.draw_genome(NGCircos01.genomeLength2); // NG-Circos callback second time
   </script>
       </body>
   </html>

Open “gwas.html” file with your local browser and view it as below:

alternate text

Step5.3 Open MouseOver and MouseOut events of SNP module in “Main configuration”

  1. Here we configure “Customize Events” and “Customize Tooltips” two classes in “Main configuration” to open MouseOver and MouseOut events. More attributes can be found in “Main configuration” part of this document. Attributes used here are below:

Main configuration

Value

Class

Description

SNPMouseOverDisplay

true

Customize Events

default false, [true/false], open/not open mouse mouse Over event of SNP module

SNPMouseOverColor

“red”

Customize Events

default “red”, “none” means no change, element change color after mouse Over the element

SNPMouseOverCircleSize

5

Customize Events

default 2, “none” means no change, element change circle size after mouse Over the element

SNPMouseOverCircleOpacity

1.0

Customize Events

default 1.0, “none” means no change, element change opacity after mouse Over the element

SNPMouseOverCircleStrokeColor

“#F26223”

Customize Events

default “#F26223”, “none” means no change, element change stroke color after mouse Over the element

SNPMouseOverCircleStrokeWidth

3

Customize Events

default 3, “none” means no change, element change stroke width after mouse Over the element

SNPMouseOverTooltipsSetting

“style”

Built in styles or customize tooltips

default “chr : “

SNPMouseOverTooltipsHtml

” “

Customize Tooltips

default ” “

SNPMouseOverTooltipsBorderWidth

1

Customize Tooltips

default 0

SNPMouseOutDisplay

true

Customize Events

default false, [true/false], open/not open mouse mouse out event of SNP module

SNPMouseOutAnimationTime

700

Customize Events

default 500, animation time after mouse out the element

SNPMouseOutColor

“none”

Customize Events

default “red”, “none” means no change, element change color after mouse out the element

SNPMouseOutCircleSize

“none”

Customize Events

default 2, “none” means no change, element change circle size after mouse out the element

SNPMouseOutCircleOpacity

1.0

Customize Events

default 1.0, “none” means no change, element change opacity after mouse out the element

SNPMouseOutCircleStrokeWidth

0

Customize Events

default 0, “none” means no change, element change stroke width after mouse out the element

   NGCircos01 = new NGCircos(BACKGROUND01,SNP04_gwascatalog,NGCircosGenome,{
   //Main configuration
      target : "NGCircos",
      svgWidth : 900,
      svgHeight : 600,
 svgClassName: "NGCircos",
      chrPad : 0.04,
      innerRadius: 246,
      outerRadius: 270,
      SNPMouseOverDisplay : true,
      SNPMouseOverColor : "red",
      SNPMouseOverCircleSize : 5,
      SNPMouseOverCircleOpacity : 1.0,
      SNPMouseOverCircleStrokeColor : "#F26223",
      SNPMouseOverCircleStrokeWidth : 3,
SNPMouseOverTooltipsSetting :"style1",
      SNPMouseOverTooltipsHtml : " ",
      SNPMouseOverTooltipsBorderWidth : 1,
      SNPMouseOutDisplay : true,
      SNPMouseOutAnimationTime : 700,
      SNPMouseOutColor : "none",
      SNPMouseOutCircleSize : "none",
      SNPMouseOutCircleOpacity : 1.0,
      SNPMouseOutCircleStrokeWidth : 0,
   });

Now, “gwas.html” is as follows:

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>NGCircos.js</title>
       </head>
       <body>
           <!-- NGCircos.js, Jquery.js and D3.js import -->
           <script src="../lib/jquery.js"></script>
           <script src="../lib/d3.js"></script>
           <script src="../lib/NGCircos.js"></script>
           <!-- Prepare a <div> tag with "NGCircos" id to set the picture position your will draw in html -->
           <div id="NGCircos"></div>
   <!-- Data configuration -->
   <script src="../data/get_started_gwas/SNP04_gwascatalog.js"></script>
   <script>
   var BACKGROUND01 = [ "BACKGROUND01" , {
     BginnerRadius: 205,
     BgouterRadius: 153,
     BgFillColor: "#F2F2F2",
     BgborderColor : "#000",
     BgborderSize : 0.3
   }];
   </script>
   <!-- Genome configuration -->
   <script>
     var NGCircosGenome = [
 [
        ["1" , 249250621],
        ["2" , 243199373],
        ["3" , 198022430],
        ["4" , 191154276],
        ["5" , 180915260],
        ["6" , 171115067],
        ["7" , 159138663],
        ["8" , 146364022],
        ["9" , 141213431],
        ["10" , 135534747],
        ["11" , 135006516],
        ["12" , 133851895],
        ["13" , 115169878],
        ["14" , 107349540],
        ["15" , 102531392],
        ["16" , 90354753],
        ["17" , 81195210],
        ["18" , 78077248],
        ["19" , 59128983],
        ["20" , 63025520],
        ["21" , 48129895],
        ["22" , 51304566],
        ["X" , 155270560],
        ["Y" , 59373566]
 ]
     ];

     NGCircos01 = new NGCircos(BACKGROUND01,SNP04_gwascatalog,NGCircosGenome,{
     //Main configuration
        target : "NGCircos",
        svgWidth : 900,
        svgHeight : 600,
   svgClassName: "NGCircos",
        chrPad : 0.04,
        innerRadius: 246,
        outerRadius: 270,
        SNPMouseOverDisplay : true,
        SNPMouseOverColor : "red",
        SNPMouseOverCircleSize : 5,
        SNPMouseOverCircleOpacity : 1.0,
        SNPMouseOverCircleStrokeColor : "#F26223",
        SNPMouseOverCircleStrokeWidth : 3,
        SNPMouseOverTooltipsSetting :"style1",
  SNPMouseOverTooltipsHtml : " ",
        SNPMouseOverTooltipsBorderWidth : 1,
        SNPMouseOutDisplay : true,
        SNPMouseOutAnimationTime : 700,
        SNPMouseOutColor : "none",
        SNPMouseOutCircleSize : "none",
        SNPMouseOutCircleOpacity : 1.0,
        SNPMouseOutCircleStrokeWidth : 0,
     });
     NGCircos01.draw_genome(NGCircos01.genomeLength);
NGCircos01.draw_genome(NGCircos01.genomeLength2);
   </script>
       </body>
   </html>

Open “gwas.html” file with your local browser and view it as below:

alternate text

Step5.4 Dispaly Chromosome band using ARC module

The chromosome band represents the approximate location of bands seen on Giemsa-stained chromosomes. We have provided some commonly used genomes as below. The color of chromosome band is the same as Circos.

Species

Genome version

Data name

Genome

cytoBand in UCSC

Human

grch38

ARC_grch38

genome

karyotype.human.grch38.js

Human

hg19

ARC_hg19

genome

karyotype.human.hg19.js

human

hg18

ARC_hg18

genome

karyotype.human.hg18.js

Mouse

mm10

ARC_mm10

genome

karyotype.mouse.mm10.js

Mouse

mm9

ARC_mm9

genome

karyotype.mouse.mm9.js

Here we take hg19 as an example to explain how to build these files.

  1. Input chromosome band data

We download chromosome band data from UCSC. Then we follow Circos’s color settings on chromosome band to add the color column. We saved the data in karyotype.human.hg19.txt, as below:

1       0       2300000 rgb(255,255,255)
1       2300000 5400000 rgb(200,200,200)
1       5400000 7200000 rgb(255,255,255)
1       7200000 9200000 rgb(200,200,200)
......
Y       19800000        22100000        rgb(255,255,255)
Y       22100000        26200000        rgb(200,200,200)
Y       26200000        28800000        rgb(255,255,255)
Y       28800000        59373566        rgb(220,220,220)
  1. Use “Data Preparation Tools” to prepare data

Note

You need to install the python 2, before running NGCircos_PrepareData.py. You can skip this step, just download karyotype.human.hg19.js for the next step.

We provide a python program NGCircos_PrepareData.py to help users prepare the input data for each module of NG-Circos

python NGCircos_PrepareData.py ARC karyotype.human.hg19.txt > karyotype.human.hg19.js

Move karyotype.human.hg19.js to ./NGCircos_demos/data/ in your local.

  1. Output chromosome band data used in NG-Circos

ARC_hg19 = [ "ARC_hg19" , {
  innerRadius: -0,
  outerRadius: -0,
} , [
  {chr: "1", start: "0" , end: "2300000", color: "rgb(255,255,255)"},
  {chr: "1", start: "2300000" , end: "5400000", color: "rgb(200,200,200)"},
  {chr: "1", start: "5400000" , end: "7200000", color: "rgb(255,255,255)"},
  {chr: "1", start: "7200000" , end: "9200000", color: "rgb(200,200,200)"},
  ......
  {chr: "Y", start: "19800000" , end: "22100000", color: "rgb(255,255,255)"},
  {chr: "Y", start: "22100000" , end: "26200000", color: "rgb(200,200,200)"},
  {chr: "Y", start: "26200000" , end: "28800000", color: "rgb(255,255,255)"},
  {chr: "Y", start: "28800000" , end: "59373566", color: "rgb(220,220,220)"},
]];
  1. Including chromosome band data karyotype.human.hg19.js

Use <script> tag to include chromosome band data karyotype.human.hg19.js. And add the following code to gwas.html.

<!-- Data configuration -->
<script src="../data/get_started_gwas/karyotype.human.hg19.js"></script>
  1. Initialize chromosome band data in NG-Circos with data tag : ARC_hg19

Here chromosome band data’s data tag is defined as ARC_hg19. So add the following code to gwas.html.

NGCircos01 = new NGCircos(ARC_hg19,SNP04_gwascatalog,NGCircosGenome,{

Now, “gwas.html” is as follows:

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="utf-8">
           <title>NGCircos.js</title>
       </head>
       <body>
           <!-- NGCircos.js, Jquery.js and D3.js import -->
           <script src="../lib/jquery.js"></script>
           <script src="../lib/d3.js"></script>
           <script src="../lib/NGCircos.js"></script>
           <!-- Prepare a <div> tag with "NGCircos" id to set the picture position your will draw in html -->
           <div id="NGCircos"></div>
   <!-- Data configuration -->
   <script src="../data/karyotype.human.hg19.js"></script>
   <script src="../data/get_started_gwas/SNP04_gwascatalog.js"></script>
   <script>
   var BACKGROUND01 = [ "BACKGROUND01" , {
     BginnerRadius: 205,
     BgouterRadius: 153,
     BgFillColor: "#F2F2F2",
     BgborderColor : "#000",
     BgborderSize : 0.3
   }];
   </script>
   <!-- Genome configuration -->
   <script>
     var NGCircosGenome = [
 [
        ["1" , 249250621],
        ["2" , 243199373],
        ["3" , 198022430],
        ["4" , 191154276],
        ["5" , 180915260],
        ["6" , 171115067],
        ["7" , 159138663],
        ["8" , 146364022],
        ["9" , 141213431],
        ["10" , 135534747],
        ["11" , 135006516],
        ["12" , 133851895],
        ["13" , 115169878],
        ["14" , 107349540],
        ["15" , 102531392],
        ["16" , 90354753],
        ["17" , 81195210],
        ["18" , 78077248],
        ["19" , 59128983],
        ["20" , 63025520],
        ["21" , 48129895],
        ["22" , 51304566],
        ["X" , 155270560],
        ["Y" , 59373566]
 ]
     ];

     NGCircos01 = new NGCircos(ARC_hg19,BACKGROUND01,SNP04_gwascatalog,NGCircosGenome,{
     //Main configuration
        target : "NGCircos",
        svgWidth : 900,
        svgHeight : 600,
   svgClassName: "NGCircos",
        chrPad : 0.04,
        innerRadius: 246,
        outerRadius: 270,
        SNPMouseOverDisplay : true,
        SNPMouseOverColor : "red",
        SNPMouseOverCircleSize : 5,
        SNPMouseOverCircleOpacity : 1.0,
        SNPMouseOverCircleStrokeColor : "#F26223",
        SNPMouseOverCircleStrokeWidth : 3,
        SNPMouseOverTooltipsSetting :"style1",
  SNPMouseOverTooltipsHtml : " ",
        SNPMouseOverTooltipsBorderWidth : 1,
        SNPMouseOutDisplay : true,
        SNPMouseOutAnimationTime : 700,
        SNPMouseOutColor : "none",
        SNPMouseOutCircleSize : "none",
        SNPMouseOutCircleOpacity : 1.0,
        SNPMouseOutCircleStrokeWidth : 0,
     });
     NGCircos01.draw_genome(NGCircos01.genomeLength);
NGCircos01.draw_genome(NGCircos01.genomeLength2); // NG-Circos callback second time
   </script>
       </body>
   </html>

Open “gwas.html” file with your local browser and view it as below:

alternate text

4. Function Modules and Data Preparation Tools

“Function Modules” are designed for specific biological data and graphic elements, which currently contains 20 modules, and later will be expanded according to the needs.

“Data configuration” is designed for “Function Modules” in NG-Circos. According to “Function Modules” division, “Data configuration” includes ten parts.

Function Modules

For Biological Data

Need “Data Preparation Tools”

SNP module

SNP with value; GWAS data…

Yes

SCATTER module

SNP without value; Genes data…

Yes

LINK module

Gene fusions; Interaction; SV…

Yes

CNV module

CNV with value…

Yes

ARC module

CNV without value; Gene domain; Chromosome band…

Yes

HEATMAP module

Gene expression…

Yes

BUBBLE module

Gene expression and classification…

Yes

HISTOGRAM module

Gene expression…

Yes

LINE module

Gene expression…

Yes

BACKGROUND module

Display background and axis circles

No

TEXT module

Assigning annotation text

No

WIG module

.wig file;Read depth; Gene expression…

Yes

LOLLIPOP module

Muation…

Yes

GENE module

Gene profile…

Yes

CHORD module

Relationship between gene, exon, protein…

Yes

REDIRECT module

Redirect from module to image, website…

No

DOWNLOAD module

Download as SVG, PNG

No

AUXILIARYLINE module

Curve, broken, straight line with 4 kinds of marker

No

LEGEND module

Customize legend in circle, line, rectangle

No

COMPARE module

Advanced module, display two comparable datasets in circle…

No

COMBINATION module

Advanced module, display more biology details with mouse event…

No

We also have provided a python program NGCircos_PrepareData.py as “Data Preparation Tools” to prepare the input data for almost all “Function Modules” except 6 auxiliary modules(**BAKCGROUND, TEXT, REDIRECT, DOWNLOAD, AUXILIARYLINE, LEGEND, **and 2 advanced modules(**COMPARE COMBINATION). Below will use this tool to introduce how to prepare the data for each module.

4.1 Data Preparation Tools

(1) NGCircos_PrepareData.py

We provide a python program NGCircos_PrepareData.py to help users prepare the input data for each module of NG-Circos.

Note

If you are familiar with a script language such as Python, Perl, Shell, you can also convert the data format by yourself. Data format is defined in “6. API: Data configuration”.

You need to install Python 2* before running NGCircos_PrepareData.py. The usage of NGCircos_PrepareData.py is as below:

Python Version: Python 2.7.3

Usage:

python NGCircos_PrepareData.py <module: SNP|SCATTER|LINK|CNV|ARC|HEATMAP|HISTOGRAM|LINE|WIG|LOLLIPOP|GENE|CHORD|COMBINATION_SNP> <input: input.txt>  >  <output:output.js>

Arguments:

module: Specify the module name of NG-Circos, including SNP,SCATTER,LINK,CNV,ARC,HEATMAP,HISTOGRAM,LINE,WIG,LOLLIPOP,GENE,CHORD and COMBINATION_SNP
input : input data input.txt
output: output data output.js

Example:

python NGCircos_PrepareData.py SNP SNP01.txt > SNP01.js

Note

If you open the COMBINATION event, you may need to select the specific module, like COMBINATION_SNP. Since the graph for COMBINATION is highly customizable, this python script may not work if you change the column number of the graph, which originally is 5 in COMBINATION_SNP01.txt.

(2) NGCircos_LocusZoomData.py

We provide a python program NGCircos_LocusZoomData.py to help users prepare the LocusZoom data for NG-Circos automatically.

Note

If you are familiar with a script language such as Python, Perl, Shell, you can also convert the data format by yourself. Data format is defined in “6. API: Data configuration”.

You need to install Python 2* before running NGCircos_LocusZoomData.py. The usage of NGCircos_LocusZoomData.py is as below:

Python Version: Python 2.7.3

Usage:

python NGCircos_LocusZoomData.py <--snp> <--out> <--bfile> <--ld-snp> <--ld-window-kb> <--ld-window> <--ld-window-r2> <--recombRate> <--gene_annotation>

Arguments:

--snp: The file address of SNP file, each row with such structure: <chromosome position p-value chr:pos ....>. First 4 columns are required!
--out: The output address of output file(postfix with .js)
--bfile: The ped file address, same parameter as plink
--ld-snp: SNP(chr:pos),same parameter as plink
--ld-window-kb: ,default b200, same parameter as plink
--ld-window: default 99999, same parameter as plink
--ld-window-r2: 0, same parameter as plink
--recombRate: The file address for hapmap data which store the recombination rate of each SNP
--gene_annotation: The file address for gene annotation data from gencode

We apply a `project package </static/script/NGCircos_LocusZoom.zip>` here including a shell script, by executing which with a given SNP(chr:pos), a javascript file for circos-locusZoom plot will be generated automatically.
Usage:
./run.sh chr:pos

Example:
./run.sh chr10:94097048

The output .js file will be stored at result/chr_pos

4.2 SNP module

“SNP module” is used to display the SNP density data, GWAS data, etc. Of course, other data have similar structure can also be displayed by SNP module.

Note

We will use four steps to illustrate the input data preparation and how to use SNP module, below is an example.

(1) SNP data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr    pos     value   des
10      100315722       20.2218 rs603424
10      101219450       19      rs11190870
10      103086421       25.1549 rs11191548
10      112998590       74.0969 rs7903146
 ......
X       5266661 24.699  rs6638512
X       67343176        90.699  rs2497938
X       69578860        18.1549 rs11796357
X       79241621        32.699  rs5912838
  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(pos) is the position of the SNP.

  • The 3 column(value) is the value(density, P-value, etc.) of the SNP.

  • The 4 column(des) is the description of the SNP.

Save the input data to “SNP01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py SNP SNP01.txt > SNP01.js

Output data used in NG-Circos

Change the default configuration, such as minRadius, and finally SNP01.js is in the following:

var SNP01 = [ "SNP01" , {
  maxRadius: 205,
  minRadius: 153,
  SNPFillColor: "#9400D3",
  PointType: "circle",
  circleSize: 2,
  rectWidth: 2,
  rectHeight: 2
} , [
  {chr: "10", pos: "100315722", value: "20.2218", des: "rs603424", color: "rgb(153,102,0)"},
  {chr: "10", pos: "101219450", value: "19", des: "rs11190870", color: "rgb(153,102,0)"},
  {chr: "10", pos: "103086421", value: "25.1549", des: "rs11191548", color: "rgb(153,102,0)"},
  {chr: "10", pos: "112998590", value: "74.0969", des: "rs7903146", color: "rgb(153,102,0)"},
  {chr: "10", pos: "121577821", value: "169.699", des: "rs2981579", color: "rgb(153,102,0)"},
   ......
  {chr: "X", pos: "5266661", value: "24.699", des: "rs6638512", color: "rgb(153,153,153)"},
  {chr: "X", pos: "67343176", value: "90.699", des: "rs2497938", color: "rgb(153,153,153)"},
  {chr: "X", pos: "69578860", value: "18.1549", des: "rs11796357", color: "rgb(153,153,153)"},
  {chr: "X", pos: "79241621", value: "32.699", des: "rs5912838", color: "rgb(153,153,153)"},
]];

(2) Including SNP data

Use <script> tag to include SNP01.js.

<script src="../data/data_prepare/SNP01.js"></script>

(3) Initialize SNP data with data tag : SNP01

Here the data’s data tag is defined as SNP01.

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

(4) Visualization of SNP module using NG-Circos

alternate text

4.3 SCATTER module

“SCATTER module” is used to display the SNP without value, Genes data, etc. Of course, other data have similar structure can also be displayed by SCATTER module.

Note

We will use four steps to illustrate the input data preparation and how to use SCATTER module, below is an example.

(1) SCATTER data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr    start   end     name    des
1       1102484 1102578 hsa-mir-200b    breast cancer
11      122017230       122017301       hsa-let-7a-2    ovarian cancer
22      46508629        46508702        hsa-let-7a-3    leukemia cancer
14      101349316       101349412       hsa-mir-127     breast cancer

Five fields are required:

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(start) is the start position of the scatter.

  • The 3 column(end) is the end position of the scatter.

  • The 4 column(name) is the name of the scatter.

  • The 5 column(des) is the description of the scatter.

Save the input data to “SCATTER01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py SCATTER SCATTER01.txt > SCATTER01.js

Output data used in NG-Circos

Change the default configuration, and finally SCATTER01.js is in the following:

var SCATTER01 = [ "SCATTER01" , {
  SCATTERRadius: 220,
  innerCircleSize: 1,
  outerCircleSize: 7,
  innerCircleColor: "red",
  outerCircleColor: "#CC3399",
  innerPointType: "circle", //circle,rect
  outerPointType: "circle", //circle,rect
  innerrectWidth: 2,
  innerrectHeight: 2,
  outerrectWidth: 10,
  outerrectHeight: 10,
  outerCircleOpacity: 1,
  random_data: 0
} , [
  {chr: "1", start: "1102484", end: "1102578", name: "hsa-mir-200b", des: "breast cancer"},
  {chr: "11", start: "122017230", end: "122017301", name: "hsa-let-7a-2", des: "ovarian cancer"},
  {chr: "22", start: "46508629", end: "46508702", name: "hsa-let-7a-3", des: "leukemia cancer"},
  {chr: "14", start: "101349316", end: "101349412", name: "hsa-mir-127", des: "breast cancer"},
]];

(2) Including SCATTER data

Use <script> tag to include SCATTER01.js.

<script src="../data/data_prepare/SCATTER01.js"></script>

(3) Initialize SCATTER data with data tag : SCATTER01

Here the data’s data tag is defined as SCATTER01.

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

(4) Visualization of SCATTER data using NG-Circos

alternate text

4.5 CNV module

“CNV module” is used to display the CNV data, etc. Of course, other data have similar structure can also be displayed by CNV module.

Note

We will use four steps to illustrate the input data preparation and how to use CNV module, below is an example.

(1) CNV data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr    start   end     value
1       764788  87109267        2.5
1       87109268        120217058       2
1       144101324       222713034       4
1       222713035       222867750       6
......
9       30330084        140139368       3.5
X       105073  114046817       1
X       114112404       114299959       2
X       114376344       154884814       1

Four fields are required:

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(start) is the start of the CNV region.

  • The 3 column(end) is the end of the CNV region.

  • The 4 column(value) is the copy number of CNV region.

Save the input data to “CNV01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py CNV CNV01.txt > CNV01.js

Output data used in NG-Circos

Change the default configuration, and finally CNV01.js is in the following:

var CNV01 = [ "CNV01" , {
  maxRadius: 175,
  minRadius: 116,
  CNVwidth: 2,
  CNVColor: "#4876FF",
} , [
  {chr: "1", start: "764788", end: "87109267", value: "2.5"},
  {chr: "1", start: "87109268", end: "120217058", value: "2"},
  {chr: "1", start: "144101324", end: "222713034", value: "4"},
  {chr: "1", start: "222713035", end: "222867750", value: "6"},
  ......
  {chr: "9", start: "30330084", end: "140139368", value: "3.5"},
  {chr: "X", start: "105073", end: "114046817", value: "1"},
  {chr: "X", start: "114112404", end: "114299959", value: "2"},
  {chr: "X", start: "114376344", end: "154884814", value: "1"},
]];

(2) Including CNV data

Use <script> tag to include CNV01.js.

<script src="../data/data_prepare/CNV01.js"></script>

(3) Initialize CNV data with data tag : CNV01

Here the data’s data tag is defined as CNV01.

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

(4) Visualization of CNV data using NG-Circos

alternate text

4.6 ARC module

“ARC module” is used to display the CNV without value, Gene domain, Chromosome band, etc. Of course, other data have similar structure can also be displayed by ARC module.

Note

We will use four steps to illustrate the input data preparation and how to use ARC module, below is an example.

(1) ARC data preparation

Input data

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

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

Save the input data to “ARC01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py ARC ARC01.txt > ARC01.js

Output data used in NG-Circos

Change the default configuration, and finally ARC01.js is in the following:

var ARC01 = [ "ARC01" , {
  innerRadius: -55,
  outerRadius: -45,
} , [
  {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"},
]];

(2) Including ARC data

Use <script> tag to include ARC01.js.

<script src="../data/data_prepare/ARC01.js"></script>

(3) Initialize ARC data with data tag : ARC01

Here the data’s data tag is defined as ARC01.

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

(4) Visualization of ARC module using NG-Circos

alternate text

4.7 HEATMAP module

“HEATMAP module” is used to display the Gene expression data, etc. Of course, other data have similar structure can also be displayed by HEATMAP module.

Note

We will use four steps to illustrate the input data preparation and how to use HEATMAP module, below is an example.

(1) HEATMAP data preparation

Input data

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

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

Save the input data to “HEATMAP01.txt”, Use “NGCircos_PrepareData.py” to prepare data

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

Output data used in NG-Circos

Change the default configuration, and finally HEATMAP01.js is in the following:

var HEATMAP01 = [ "HEATMAP01" , {
  innerRadius: -25,
  outerRadius: -65,
  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"},
]];

(2) Including HEATMAP data

Use <script> tag to include HEATMAP01.js.

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

(3) Initialize HEATMAP data with data tag : HEATMAP01

Here the data’s data tag is defined as HEATMAP01.

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

(4) Visualization of HEATMAP data using NG-Circos

alternate text

4.8 HISTOGRAM module

“HISTOGRAM module” is used to display the Gene expression data, etc. Of course, other data have similar structure can also be displayed by HISTOGRAM module.

Note

We will use four steps to illustrate the input data preparation and how to use HISTOGRAM module, below is an example.

(1) HISTOGRAM data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr    start   end     name    value
2L      1       1011544 test histogram  0.8
2L      1011548 2011544 test histogram  0.3
2L      2011548 3011544 test histogram  0.1
2L      2011545 2011546 test histogram  0.01
......
X       18011548        19011544        test histogram  0.83
X       19011548        20011544        test histogram  0.39
X       20011548        21146708        test histogram  0.49
X       21011548        22422827        test histogram  0.83

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

Save the input data to “HISTOGRAM01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py HISTOGRAM HISTOGRAM01.txt > HISTOGRAM01.js

Output data used in NG-Circos

Change the default configuration, and finally HISTOGRAM01.js is in the following:

var HISTOGRAM01 = [ "HISTOGRAM01" , {
  maxRadius: 220,
  minRadius: 185,
  histogramFillColor: "#FF6666",
} , [
  {chr: "2L", start: "1", end: "1011544", name: "test histogram", value: "0.8"},
  {chr: "2L", start: "1011548", end: "2011544", name: "test histogram", value: "0.3"},
  {chr: "2L", start: "2011548", end: "3011544", name: "test histogram", value: "0.1"},
  {chr: "2L", start: "2011545", end: "2011546", name: "test histogram", value: "0.01"},
  ......
  {chr: "X", start: "18011548", end: "19011544", name: "test histogram", value: "0.83"},
  {chr: "X", start: "19011548", end: "20011544", name: "test histogram", value: "0.39"},
  {chr: "X", start: "20011548", end: "21146708", name: "test histogram", value: "0.49"},
  {chr: "X", start: "21011548", end: "22422827", name: "test histogram", value: "0.83"},
]];

(2) Including HISTOGRAM data

Use <script> tag to include HISTOGRAM01.js.

<script src="../data/data_prepare/HISTOGRAM01.js"></script>

(3) Initialize HISTOGRAM data with data tag : HISTOGRAM01

Here the data’s data tag is defined as HISTOGRAM01.

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

(4) Visualization of HISTOGRAM data using NG-Circos

alternate text

4.9 LINE module

“LINE module” is used to display the Gene expression data, etc. Of course, other data have similar structure can also be displayed by LINE module.

Note

We will use four steps to illustrate the input data preparation and how to use LINE module, below is an example.

(1) LINE data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr    pos     value
1       813468  0.5
1       3383745 0.22385
1       6157646 0.238643
1       24793116        0.876947
......
X       136860114       0.267261
X       138413104       0.847613
X       149344414       0.830811
X       154203563       0.43466

Three fields are required:

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(pos) is the position of the point.

  • The 3 column(value) is the value of the point.

Save the input data to “LINE01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py LINE LINE01.txt > LINE01.js

Output data used in NG-Circos

Change the default configuration, and finally LINE01.js is in the following:

var LINE01 = [ "LINE01" , {
  maxRadius: 220,
  minRadius: 170,
  LineColor: "#EEAD0E",
  LineWidth: 2,
} , [
  {chr: "1", pos: "813468", value: "0.5"},
  {chr: "1", pos: "3383745", value: "0.22385"},
  {chr: "1", pos: "6157646", value: "0.238643"},
  {chr: "1", pos: "24793116", value: "0.876947"},
  ......
  {chr: "X", pos: "136860114", value: "0.267261"},
  {chr: "X", pos: "138413104", value: "0.847613"},
  {chr: "X", pos: "149344414", value: "0.830811"},
  {chr: "X", pos: "154203563", value: "0.43466"},
]];

(2) Including LINE data

Use <script> tag to include LINE01.js.

<script src="../data/data_prepare/LINE01.js"></script>

(3) Initialize LINE data with data tag : LINE01

Here the data’s data tag is defined as LINE01.

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

(4) Visualization of LINE data using NG-Circos

alternate text

4.10 BACKGROUND module

“BACKGROUND module” is used to display background and axis circles for other modules.

Note

“BACKGROUND module” has no data entry, only the configuration parameters. We will illustrate how to use BACKGROUND module, below is an example.

(1) Including BACKGROUND configuration

Use <script> tag to include BACKGROUND01, BACKGROUND02, BACKGROUND03.

<!-- Data configuration -->
<script>
var BACKGROUND01 = [ "BACKGROUND01" , {
  BginnerRadius: 230,
  BgouterRadius: 200,
  BgFillColor: "#F2F2F2",
  BgborderColor : "#000",
  BgborderSize : 0.3,
  axisShow: "true",
  axisWidth: 0.1,
  axisColor: "#000",
  axisNum: 8
}];
var BACKGROUND02 = [ "BACKGROUND02" , {
  BginnerRadius: 170,
  BgouterRadius: 130,
  BgFillColor: "#F2F2F2",
  BgborderColor : "#000",
  BgborderSize : 0.3,
  axisShow: "true",
  axisWidth: 0.1,
  axisColor: "#000",
  axisNum: 8
}];
var BACKGROUND03 = [ "BACKGROUND03" , {
  BginnerRadius: 100,
  BgouterRadius: 50,
  BgFillColor: "#F2F2F2",
  BgborderColor : "#000",
  BgborderSize : 0.3,
  axisShow: "false",
  axisWidth: 0.1,
  axisColor: "#000",
  axisNum: 8
}];
</script>

(2) Initialize BACKGROUND configuration with data tag : BACKGROUND01, BACKGROUND02, BACKGROUND03

Here the data’s data tag is defined as BACKGROUND01, BACKGROUND02 and BACKGROUND03.

NGCircos01 = new NGCircos(BACKGROUND01,BACKGROUND02,BACKGROUND03,NGCircosGenome,{  // Initialize with data tag

(3) Visualization of BACKGROUND module using NG-Circos

alternate text

4.11 TEXT module

“TEXT module” is used to display annotation text at specific elements.

Note

“TEXT module” has no data entry, only the configuration parameters. We will illustrate how to use TEXT module, below is an example.

(1) Including TEXT configuration

Use <script> tag to include TEXT01.

<!-- Data configuration -->
<script>
  var TEXT01 = [ "TEXT01" , {
     x: -20,
     y: 0,
     textSize: 20,
     textWeight: "bold",
     textColor: "red",
     textOpacity: 1.0,
     text: "EGFR"
  }];
</script>

(2) Initialize TEXT configuration with data tag : TEXT01

Here the data’s data tag is defined as TEXT01.

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

(3) Visualization of TEXT module using NG-Circos

alternate text

4.12 WIG module

“WIG module” is used to display the Gene expression data, etc. Of course, other data have similar structure can also be displayed by WIG module.

Note

We will use four steps to illustrate the input data preparation and how to use WIG module, below is an example.

(1) WIG data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr posStart   posEnd       value
1    813468   813470 6
1    3383745   3383747       3
1    6157646   6157648       3
1    24793116   24793118     9
......
X    136860114   136860116   3
X    138413104   138413106   9
X    149344414   149344416   9
X    154203563   154203565   5

Three fields are required:

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(posStart) is the start position of the sequence.

  • The 3 column(posEnd) is the end position of the sequence.

  • The 4 column(value) is the value of the point.

Save the input data to “WIG01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py WIG WIG01.txt > WIG01.js

Output data used in NG-Circos

Change the default configuration, and finally WIG01.js is in the following:

var WIG01 = [ "WIG01" , {
  maxRadius: 220,
  minRadius: 170,
  WIGStrokeColor: "#EEAD0E",
  WIGColor: "red",
  WIGWIGStrokeType: "cardinal",
} , [
  {chr: "1", pos: "813468", value: "6"},
  {chr: "1", pos: "813469", value: "6"},
  {chr: "1", pos: "813470", value: "6"},
  {chr: "1", pos: "3383745", value: "3"},
  ......
  {chr: "X", pos: "136860114", value: "3"},
  {chr: "X", pos: "136860115", value: "3"},
  {chr: "X", pos: "136860116", value: "3"},
  {chr: "X", pos: "138413104", value: "9"},
]];

(2) Including WIG data

Use <script> tag to include WIG01.js.

<script src="../data/data_prepare/WIG01.js"></script>

(3) Initialize WIG data with data tag : WIG01

Here the data’s data tag is defined as WIG01.

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

(4) Visualization of WIG data using NG-Circos

alternate text

4.13 LOLLIPOP module

“LOLLIPOP module” is used to display the Mutation data, etc. Of course, other data have similar structure can also be displayed by LOLLIPOP module.

Note

We will use four steps to illustrate the input data preparation and how to use LOLLIPOP module, below is an example.

(1) LOLLIPOP data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#protein   chr   pos   strand   CancerTypeNumber   AA_pos   AA_change   Consequence   color   type   link
EGFR 7       101219410       +       2       AA_858  L/R     missense_variant        #FEFF00 Hetero  https://www.intogen.org/search?gene=EGFR
EGFR 7       101219417       +       2       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
EGFR 7       101219425       +       1       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
EGFR 7       101219431       +       3       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
......
EGFR 7       101220278       +       3       AA_858  L/R     missense_variant        #FEFF00 Hetero  https://www.intogen.org/search?gene=EGFR
EGFR 7       101220281       +       2       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
EGFR 7       101220288       +       1       AA_858  L/R     missense_variant        #FEFF00 Homo    https://www.intogen.org/search?gene=EGFR
EGFR 7       101220295       +       1       AA_858  L/R     missense_variant        #FEFF00 Hetero  https://www.intogen.org/search?gene=EGFR

Three fields are required:

  • The 1 column(protein) is the name of the protein.

  • The 2 column(chr) is the name of the chromosome.

  • The 3 column(pos) is the position of the point.

Others are optional: - The 4 column(strand) is the strand position of the point. - The 5 column(CancerTypeNumber) is the number of cancer where the mutation is found. - The 6 column(AA_pos) is the AA position of the point. - The 7 column(AA_change) is the AA_change of the point. - The 8 column(Consequence) is the consequence of the point. - The 9 column(color) is the specific color of the point. - The 10 column(type) is the mutation type of the point. - The 11 column(link) is the hyperlink address of the point.

Save the input data to “LOLLIPOP01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py LOLLIPOP LOLLIPOP01.txt > LOLLIPOP01.js

Output data used in NG-Circos

Change the default configuration, and finally LOLLIPOP01.js is in the following:

var LOLLIPOP01 = [ "LOLLIPOP01" , {
   LOLLIPOPFillColor:"#9400D3",
   LOLLIPOPSecondColor: "#FFFFFFF",
   PointType: "circle",
   circleSize: 6,
   stroke:true,
   strokeColor: "#999999",
   strokeWidth: "1px",
   lineAutoHeight: true,
   LOLLIPOPAnimationDisplay: false,
   LOLLIPOPLineWidth: 1,
   LOLLIPOPLineColor: "#000000",
   realStart: 101219350,
} , [
   {protein: "EGFR", chr: "7", pos: "101219410", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
   {protein: "EGFR", chr: "7", pos: "101219417", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101219425", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101219431", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   ......
   {protein: "EGFR", chr: "7", pos: "101220278", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
   {protein: "EGFR", chr: "7", pos: "101220281", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101220288", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101220295", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
]];

(2) Including LOLLIPOP data

Use <script> tag to include LOLLIPOP01.js.

<script src="../data/data_prepare/LOLLIPOP01.js"></script>

(3) Initialize LOLLIPOP data with data tag : LOLLIPOP01

Here the data’s data tag is defined as LOLLIPOP01.

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

(4) Visualization of LOLLIPOP data using NG-Circos

alternate text

4.14 GENE module

“GENE module” is used to display the Gene profile, etc. Of course, other data have similar structure can also be displayed by GENE module.

Note

We will use four steps to illustrate the input data preparation and how to use GENE module, below is an example.

(1) GENE data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr   strand   start   end   type   name
EGFR +       57      965     gene    EGFR
EGFR +       57      167     cds     EGFR
EGFR +       185     338     cds     EGFR
EGFR +       361     480     cds     EGFR
EGFR +       505     636     cds     EGFR
EGFR +       713     965     cds     EGFR

Three fields are required:

  • The 1 column(chr) is the name of the gene.

  • The 2 column(strand) is the strand of the gene.

  • The 3 column(start) is the start position of the gene.

  • The 4 column(end) is the end position of the point.

  • The 5 column(type) is the type of this fragment in gene.

Others are optional:

  • The 6 column(name) is the neme of the fragment.

Save the input data to “GENE01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py GENE GENE01.txt > GENE01.js

Output data used in NG-Circos

Change the default configuration, and finally GENE01.js is in the following:

var GENE01 = [ "GENE01" , {
   outerRadius: -25,
   innerRadius: -10,
   arrowGap: 2,
   arrowColor: "blue",
   arrowSize: "12px",
   cdsColor: "blue",
   cdsStrokeColor: "blue",
   cdsStrokeWidth: 1,
   utrWidth: -5,
   utrColor: "blue",
   utrStrokeColor: "blue",
   utrStrokeWidth: 1,
   } , [
     {chr: "EGFR", strand: "+", start: "57", end: "965", type: "gene", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "57", end: "167", type: "cds", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "185", end: "338", type: "cds", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "361", end: "480", type: "cds", name: "EGFR"},
     {chr: "EGFR", strand: "+", start: "505", end: "636", type: "cds", name: "EGFR""},
     {chr: "EGFR", strand: "+", start: "713", end: "965", type: "cds", name: "EGFR"},
]];

(2) Including GENE data

Use <script> tag to include GENE01.js.

<script src="../data/data_prepare/GENE01.js"></script>

(3) Initialize GENE data with data tag : GENE01

Here the data’s data tag is defined as GENE01.

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

(4) Visualization of GENE data using NG-Circos

alternate text

4.15 CHORD module

“CHORD module” is used to display the Relationship between gene, exon, protein…, etc. Of course, other data have similar structure can also be displayed by CHORD module.

Note

We will use four steps to illustrate the input data preparation and how to use CHORD module, below is an example.

(1) CHORD data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#    Alphaproteobacteria     Betaproteobacteria      Gammaproteobacteria     Deltaproteobacteria     Acidobacteria   Actinobacteria  Bacteroidetes   Chloroflexi     Firmicutes      Gemmatimonadetes        Planctomycetes  Thaumarchaeota  Verrucomicrobia Ascomycota      Basidiomycota   Zygomycota
C.CK 18.01   5.72    5.74    6.55    13.38   20.04   5.01    3.63    2.37    6.34    4.35    1.51    1.9     51.72   24.75   18.49
C.NPK        16.12   5.75    5.85    5.67    16.88   15.95   5.24    3.74    2.34    6.97    6.15    1.21    2.37    40.28   24.18   29.3
GC.CK        16.16   6.51    7.82    5.13    13.29   13.11   7.32    4.81    1.52    7.92    4.95    1.52    2.57    33.85   17.93   41.7
GC.NPK       19.87   5.53    6.1     5.93    10.07   23.23   4.84    2.9     4.49    5.14    3.81    1.91    1.46    33.56   12.87   49.8

Three fields are required:

  • The 1 column is the name of each row.

  • The 2 column is the name of each column.

Save the input data to “CHORD01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py CHORD CHORD01.txt > CHORD01.js

Output data used in NG-Circos

Change the default configuration, and finally CHORD01.js is in the following:

var CHORD01 = [ "CHORD01" , {
   CHORDinnerRadius: 237,
   CHORDouterRadius: 238,
   CHORDFillOpacity:0.67,
   CHORDStrokeColor: "black",
   CHORDStrokeWidth: 1,
   CHORDPadding:0.06,
   CHORDAutoFillColor: true,
   CHORDouterARC:true,
   CHORDouterARCAutoColor:true,
   CHORDouterARCText:false,
} , [
['C.CK', 'C.NPK', 'GC.CK', 'GC.NPK', 'Alphaproteobacteria', 'Betaproteobacteria', 'Gammaproteobacteria', 'Deltaproteobacteria', 'Acidobacteria', 'Actinobacteria', 'Bacteroidetes', 'Chloroflexi', 'Firmicutes', 'Gemmatimonadetes', 'Planctomycetes', 'Thaumarchaeota', 'Verrucomicrobia', 'Ascomycota', 'Basidiomycota', 'Zygomycota']
[[0, 0, 0, 0, 18.01, 5.72, 5.74, 6.55, 13.38, 20.04, 5.01, 3.63, 2.37, 6.34, 4.35, 1.51, 1.9, 51.72, 24.75, 18.49], [0, 0, 0, 0, 16.12, 5.75, 5.85, 5.67, 16.88, 15.95, 5.24, 3.74, 2.34, 6.97, 6.15, 1.21, 2.37, 40.28, 24.18, 29.3], [0, 0, 0, 0, 16.16, 6.51, 7.82, 5.13, 13.29, 13.11, 7.32, 4.81, 1.52, 7.92, 4.95, 1.52, 2.57, 33.85, 17.93, 41.7], [0, 0, 0, 0, 19.87, 5.53, 6.1, 5.93, 10.07, 23.23, 4.84, 2.9, 4.49, 5.14, 3.81, 1.91, 1.46, 33.56, 12.87, 49.8], [18.01, 16.12, 16.16, 19.87, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [5.72, 5.75, 6.51, 5.53, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [5.74, 5.85, 7.82, 6.1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [6.55, 5.67, 5.13, 5.93, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [13.38, 16.88, 13.29, 10.07, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [20.04, 15.95, 13.11, 23.23, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [5.01, 5.24, 7.32, 4.84, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [3.63, 3.74, 4.81, 2.9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [2.37, 2.34, 1.52, 4.49, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [6.34, 6.97, 7.92, 5.14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [4.35, 6.15, 4.95, 3.81, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1.51, 1.21, 1.52, 1.91, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1.9, 2.37, 2.57, 1.46, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [51.72, 40.28, 33.85, 33.56, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [24.75, 24.18, 17.93, 12.87, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [18.49, 29.3, 41.7, 49.8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]]
]];

(2) Including CHORD data

Use <script> tag to include CHORD01.js.

<script src="../data/data_prepare/CHORD01.js"></script>

(3) Initialize CHORD data with data tag : CHORD01

Here the data’s data tag is defined as CHORD01.

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

(4) Visualization of CHORD data using NG-Circos

alternate text

4.16 REDIRECT module

“REDIRECT module” is used to add hyperlink for selected module. Most modules in NG-Circos are supporting this module, including GENE HISTOGRAM CNV SCATTER SNP LOLLIPOP ARC BUBBLE.

(1) REDIRECT data preparation in LOLLIPOP

Modify the output file you got from NGCircos_PrepareData.py

Before, the LOLLIPOP01.js looks like this:

var LOLLIPOP01 = [ "LOLLIPOP01" , {
   LOLLIPOPFillColor:"#9400D3",
   LOLLIPOPSecondColor: "#FFFFFFF",
   PointType: "circle",
   circleSize: 6,
   stroke:true,
   strokeColor: "#999999",
   strokeWidth: "1px",
   lineAutoHeight: true,
   LOLLIPOPAnimationDisplay: false,
   LOLLIPOPLineWidth: 1,
   LOLLIPOPLineColor: "#000000",
   realStart: 101219350,
} , [
   {protein: "EGFR", chr: "7", pos: "101219410", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
   {protein: "EGFR", chr: "7", pos: "101219417", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101219425", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101219431", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   ......
   {protein: "EGFR", chr: "7", pos: "101220278", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
   {protein: "EGFR", chr: "7", pos: "101220281", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101220288", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo"},
   {protein: "EGFR", chr: "7", pos: "101220295", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero"},
]];

To start using REDIRECT module in LOLLIPOP, add a parameter called link for each mutation as the following:

var LOLLIPOP01 = [ "LOLLIPOP01" , {
   LOLLIPOPFillColor:"#9400D3",
   LOLLIPOPSecondColor: "#FFFFFFF",
   PointType: "circle",
   circleSize: 6,
   stroke:true,
   strokeColor: "#999999",
   strokeWidth: "1px",
   lineAutoHeight: true,
   LOLLIPOPAnimationDisplay: false,
   LOLLIPOPLineWidth: 1,
   LOLLIPOPLineColor: "#000000",
   realStart: 101219350,
} , [
   {protein: "EGFR", chr: "7", pos: "101219410", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101219417", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101219425", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101219431", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   ......
   {protein: "EGFR", chr: "7", pos: "101220278", strand: "+", CancerTypeNumber: "3", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101220281", strand: "+", CancerTypeNumber: "2", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101220288", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Homo", link: "https://www.intogen.org/search?gene=EGFR"},
   {protein: "EGFR", chr: "7", pos: "101220295", strand: "+", CancerTypeNumber: "1", AA_pos: "AA_858", AA_change: "L/R", Consequence: "missense_variant", color: "#FEFF00", type: "Hetero", link: "https://www.intogen.org/search?gene=EGFR"},
]];

See details: REDIRECT01.js

(3) Try and see the REDIRECT in LOLLIPOP

alternate text

4.17 DOWNLOAD module

“DOWNLOAD module” is used to add a download button for your SVG element. DOWNLOAD module provide 2 types of files for downloading(.png and .svg), users can customize the button style freely as well.

(1) Choose the file type for DOWNLOAD module

For .png file

For .png DOWNLOAD module, we need first to create a button with the code following.

<div class="svg-box img-container">
   <button class="svg-action-btn download-img">Download png ↓</button>
</div>

If you are not familiar with the html language, don’t worry, normally you don’t need to change this code block, just add this to your website

The <div> tag here is to set the button position, you can add this code block up or below the main picture.

For .svg file

For .svg DOWNLOAD module, we need first to create a button with the code following.

<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); })();" class="DownButtonNormal" >Download svg ↓</a>

If you are not familiar with the html language, don’t worry, normally you don’t need to change this code block, just add this to your website

The <a> tag here is to set the button position, you can add this code block up or below the main picture.

(2) Essential code

For .png file

Add the code block below after the </script> tag of main picture and before the </body> tag:

<script src=../lib/saveSvgAsPng.js></script>
<script>

   (function(){
      var downloadImg = getEle(".download-img"),
         imgName = getEle("."+NGCircos1.svgClassName);

      //                                  imgScale = getEle(".img-scale");

      downloadImg.addEventListener("click",function(){
         var mySvg = getEle("."+NGCircos1.svgClassName),
            //iImgScale = parseInt(imgScale.value) || 1,
            oImgName = imgName.value || NGCircos1.svgClassName;

      //                                  saveSvgAsPng(mySvg, oImgName+".png", iImgScale);
         saveSvgAsPng(mySvg, oImgName+".png");

      })

      function getEle(obj){
         var d = document;
         return d.querySelector(obj);
      }
   })()

</script>

Actually, the DOWNLOAD module has already been working after this 2 steps, we still provide the third step for customizing button style.

(3) Customizing the style of button

You may notice both in the code block of .png and .svg DOWNLOAD module, we set a class for both button, which is DownButtonNormal.

You can freely customize these 2 buttons by the <style></style> tag as following:

<style>
   .DownButtonNormal{
      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;
   }
</style>

Please add this before the <body> tag and after the </head> tag in your website.

(4) Try to click the DOWNLOAD button.

alternate text

4.18 AUXILIARYLINE module

“AUXILIARYLINE module” is used to display Auxiliary line for better explain the relationship between modules.

Note

We will use 3 steps to illustrate how to use AUXILIARYLINE module, below is an example.

(1) AUXILIARYLINE data preparation

Data used in NG-Circos

Change the default configuration, and finally AUXILIARYLINE01.js is in the following:

var AUXILIARYLINE01 = [ "AUXILIARYLINE01" , {
       startX: -100,
       startY: 0,
       endX: 100,
       endY: 0,
       AUXILIARYLINEType:"curve",
       AUXILIARYLINEControlPointX:0,
       AUXILIARYLINEControlPointY:-100,
       AUXILIARYLINELineType:"dot",
       AUXILIARYLINEDashArray:4,
       AUXILIARYLINEColor: "black",
       AUXILIARYLINEWidth: 2,
       AUXILIARYLINEMarker:true,
       AUXILIARYLINEMarkerType:"arrow",
       AUXILIARYLINEMarkerColor:"black",
       AUXILIARYLINEMarkerPosition:2,
   }];

(2) Including AUXILIARYLINE data

Use <script> tag to include AUXILIARYLINE01.js.

<script src="../data/data_prepare/AUXILIARYLINE01.js"></script>

(3) Initialize AUXILIARYLINE data with data tag : AUXILIARYLINE01

Here the data’s data tag is defined as AUXILIARYLINE01.

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

(4) Visualization of AUXILIARYLINE data using NG-Circos

alternate text

4.19 LEGEND module

“LEGEND module” is used to display Legend easily for better explain each element.

Note

We will use 3 steps to illustrate how to use LEGEND module, below is an example.

(1) LEGEND data preparation

Data used in NG-Circos

Change the default configuration, and finally LEGEND01.js is in the following:

var LEGEND1 = [ "LEGEND1" , {
   x: 300,
   y: -230,
   title: " ",
   titleSize: 16,
   titleWeight: "bold",
   GapBetweenGraphicText:5,
   GapBetweenLines:20
   } , [
      {type: "circle", color:"#1E77B4",opacity:"1.0",circleSize:"8",text: "C.CK", textSize: "14",textWeight:"normal"},
      {type: "circle", color:"#AEC7E8",opacity:"1.0",circleSize:"8",text: "C.NPK", textSize: "14",textWeight:"normal"},
      {type: "circle", color:"#FF7F0B",opacity:"1.0",circleSize:"8",text: "GC.CK", textSize: "14",textWeight:"normal"},
      {type: "circle", color:"#FFBB78",opacity:"1.0",circleSize:"8",text: "GC.NPK", textSize: "14",textWeight:"normal"},
      .....
      {type: "circle", color:"#BCBC22",opacity:"1.0",circleSize:"8",text: "Verrucomicrobia", textSize: "14",textWeight:"normal"},
      {type: "circle", color:"#DADB8D",opacity:"1.0",circleSize:"8",text: "Ascomycota", textSize: "14",textWeight:"normal"},
      {type: "circle", color:"#19BDCF",opacity:"1.0",circleSize:"8",text: "Basidiomycota", textSize: "14",textWeight:"normal"},
      {type: "circle", color:"#9ED9E5",opacity:"1.0",circleSize:"8",text: "Zygomycota", textSize: "14",textWeight:"normal"},
   ]];

(2) Including LEGEND data

Use <script> tag to include LEGEND01.js.

<script src="../data/data_prepare/LEGEND01.js"></script>

(3) Initialize LEGEND data with data tag : LEGEND01

Here the data’s data tag is defined as LEGEND01.

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

(4) Visualization of LEGEND data using NG-Circos

alternate text

4.20 COMPARE module

“COMPARE module” can display two groups of chromosome in half circle as well as the modules in each chromosome.

(1) Add 2 groups of chromosome

Modify the genome configuration

Before add the COMPARE module, the genome configuration looks like this:

var NGCircosGenome = [
[
   ["chr8",1000],
]
];

To start using COMPARE module, we will add another group of chromosome as the following:

var NGCircosGenome = [
[
   ["chr8",1000],
],[
   ["chr8",1000],
]
];

(2) Set compareEvent as true(default false) in NGCircos01

The code should looks like below:

NGCircos01 = new NGCircos(LOLLIPOP01,NGCircosGenome,{
   target:"NGCircos",
   svgWidth:900,
   svgHeight:600,
   svgClassName:"lollipop",
   ......
   compareEvent:true,
   compareEventGroupGapRate:0.2,      //Empty gap rate
   compareEventGroupDistance:100,      //Distance between 2 groups
   ......

(3) Assign group number in each module with compareGroup

Before add the COMPARE module, the COMPARE01.js looks like this:

var WIG01 = [ "WIG01" , {
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.09827044025157233",value:"0.0199"},
   {chr:"chr8",pos:"1.3266509433962264",value:"0.0199"},
   {chr:"chr8",pos:"2.5550314465408803",value:"0.0199"},
   {chr:"chr8",pos:"3.7834119496855347",value:"0.0498"},
   ......
   {chr:"chr8",pos:"996.314858490566",value:"0.0299"},
   {chr:"chr8",pos:"997.5432389937107",value:"0.0398"},
   {chr:"chr8",pos:"998.7716194968554",value:"0.0896"},
   {chr:"chr8",pos:"1000.0",value:"0.1195"},
]];

var WIG02 = [ "WIG02" , {
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.024557353699565337",value:"5"},
   {chr:"chr8",pos:"0.5157044276908721",value:"5"},
   {chr:"chr8",pos:"1.0068515016821786",value:"4"},
   {chr:"chr8",pos:"1.4979985756734855",value:"4"},
   ......
   {chr:"chr8",pos:"998.5265587780261",value:"1"},
   {chr:"chr8",pos:"999.0177058520175",value:"1"},
   {chr:"chr8",pos:"999.5088529260087",value:"1"},
   {chr:"chr8",pos:"1000.0",value:"1"},
]];

To start using COMPARE module, we will add compareGroup (default 1) of chromosome as the following:

var WIG01 = [ "WIG01" , {
   compareGroup:2,
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.09827044025157233",value:"0.0199"},
   {chr:"chr8",pos:"1.3266509433962264",value:"0.0199"},
   {chr:"chr8",pos:"2.5550314465408803",value:"0.0199"},
   {chr:"chr8",pos:"3.7834119496855347",value:"0.0498"},
   ......
   {chr:"chr8",pos:"996.314858490566",value:"0.0299"},
   {chr:"chr8",pos:"997.5432389937107",value:"0.0398"},
   {chr:"chr8",pos:"998.7716194968554",value:"0.0896"},
   {chr:"chr8",pos:"1000.0",value:"0.1195"},
]];

var WIG02 = [ "WIG02" , {
   compareGroup:1,
   maxRadius: 200,
   minRadius: 150,
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeType:"cardinal" //linear,cardinal,basis,monotone
} , [
   {chr:"chr8",pos:"0.024557353699565337",value:"5"},
   {chr:"chr8",pos:"0.5157044276908721",value:"5"},
   {chr:"chr8",pos:"1.0068515016821786",value:"4"},
   {chr:"chr8",pos:"1.4979985756734855",value:"4"},
   ......
   {chr:"chr8",pos:"998.5265587780261",value:"1"},
   {chr:"chr8",pos:"999.0177058520175",value:"1"},
   {chr:"chr8",pos:"999.5088529260087",value:"1"},
   {chr:"chr8",pos:"1000.0",value:"1"},
]];

See details: COMPARE01.js

(4) Try and see the COMPARE

alternate text

4.21 COMBINATION module

“COMBINATION module” can display image and graph with mouse event, currently we only supply SNP module for COMBINATION module, more modules will be adapted and updated in the future.

Note

We will use four steps to illustrate the input data preparation and how to use COMBINATION module, below is an example.

(1) Data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

Notice that this data has more column than in SNP01.txt, which contains the information needed in COMBINATION. For graph, we provide columns(For example, here called eas, sas, afr, eur, amr, which is the five poplation from 1000 genome project) to store the necessary information needed for 3 kinds of graph. For image, there is a column called image to store the url address.

#chr pos     value   des   color     eas     sas     afr     eur     amr     image
10   100315722       20.2218 rs603424
10   101219450       19      rs11190870
10   103086421       25.1549 rs11191548
10   121577821       169.699 rs2981579       #991ECC 0.551   0.61    0.339   0.549   0.57    https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs2981579.400kb-1.png
 ......
X    5266661 24.699  rs6638512
X    67343176        90.699  rs2497938
8    19986711        149     rs12678919      #991ECC 0.12    0.08    0.116   0.13    0.06    https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs12678919.400kb-1.png
X    79241621        32.699  rs5912838
  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(pos) is the position of the SNP.

  • The 3 column(value) is the value(density, P-value, etc.) of the SNP.

  • The 4 column(des) is the description of the SNP.

Save the input data to “COMBINATION_SNP01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py COMBINATION_SNP COMBINATION_SNP01.txt > COMBINATION_SNP01.js

Output data used in NG-Circos

Change the default configuration, such as minRadius, and finally COMBINATION_SNP01.js is in the following:

var SNP01 = [ "SNP01" , {
  maxRadius: 205,
  minRadius: 153,
  SNPFillColor: "#9400D3",
  PointType: "circle",
  circleSize: 2,
  rectWidth: 2,
  rectHeight: 2
} , [
  {chr: "10", pos: "100315722", value: "20.2218", des: "rs603424", color: "rgb(153,102,0)"},
  {chr: "10", pos: "101219450", value: "19", des: "rs11190870", color: "rgb(153,102,0)"},
  {chr: "10", pos: "103086421", value: "25.1549", des: "rs11191548", color: "rgb(153,102,0)"},
  {chr: "10", pos: "112998590", value: "74.0969", des: "rs7903146", color: "rgb(153,102,0)"},
  {chr: "10", pos: "121577821", value: "169.699", des: "rs2981579", color: "rgb(153,102,0)", index: "1", image: "https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs2981579.400kb-1.png"},
   ......
  {chr: "8", pos: "19986711", value: "149", des: "rs12678919", color: "rgb(102,102,102)", index: "66", image: "https://raw.githubusercontent.com/mrcuizhe/Image_NGCircos/master/combination_snp/EUR.rs12678919.400kb-1.png"},
  {chr: "X", pos: "67343176", value: "90.699", des: "rs2497938", color: "rgb(153,153,153)"},
  {chr: "X", pos: "69578860", value: "18.1549", des: "rs11796357", color: "rgb(153,153,153)"},
  {chr: "X", pos: "79241621", value: "32.699", des: "rs5912838", color: "rgb(153,153,153)"},
],[
   ["eas","sas","afr","eur"],
   ["0.551","0.61","0.339","0.549"],
   ["0.583","0.54","0.875","0.348"],
   ["0.953","0.74","0.601","0.786"],
   ["0.759","0.81","0.94","0.907"],
   ["0.296","0.12","0.09","0.365"],
   ["0.97","0.82","0.963","0.847"],
   ["0.941","0.85","0.181","0.726"],
   ["0.565","0.33","0.183","0.311"],
   ["0.567","0.16","0.697","0.363"],
   ["0.951","0.71","0.638","0.638"],
   ["0.204","0.29","0.411","0.346"],
   ["0.216","0.0","0.001","0.0"],
   ["0.063","0.24","0.239","0.263"],
   ["0.123","0.04","0.014","0.161"],
   ["0.189","0.35","0.424","0.409"],
   ["0.002","0.07","0.028","0.636"],
   ["0.0","0.0","0.004","0.014"],
   ["0.168","0.29","0.411","0.414"],
   ["0.0","0.01","0.003","0.062"],
   ["0.34","0.44","0.213","0.441"],
   ["0.001","0.06","0.135","0.241"],
   ["0.025","0.2","0.16","0.304"],
   ["0.001","0.07","0.04","0.242"],
   ["0.001","0.02","0.006","0.121"],
   ["0.012","0.08","0.147","0.110"],
   ["0.98","0.89","0.733","0.85"],
   ["0.614","0.36","0.66","0.31"],
   ["0.877","0.63","0.62","0.767"],
   ["0.211","0.28","0.077","0.328"],
   ["0.115","0.13","0.078","0.298"],
   ["0.154","0.28","0.173","0.291"],
   ["0.28","0.44","0.281","0.5"],
   ["0.375","0.22","0.205","0.367"],
   ["0.13","0.44","0.493","0.298"],
   ["0.13","0.44","0.486","0.298"],
   ["0.009","0.16","0.867","0.23"],
   ["0.005","0.15","0.628","0.216"],
   ["0.005","0.14","0.617","0.21"],
   ["0.006","0.14","0.618","0.208"],
   ["0.572","0.46","0.628","0.327"],
   ["0.297","0.36","0.52","0.417"],
   ["0.441","0.24","0.3","0.232"],
   ["0.3","0.54","0.094","0.583"],
   ["0.013","0.2","0.48","0.214"],
   ["0.041","0.05","0.161","0.031"],
   ["0.959","0.87","0.816","0.89"],
   ["0.864","0.87","0.815","0.89"],
   ["0.052","0.2","0.084","0.143"],
   ["0.315","0.31","0.36","0.273"],
   ["0.001","0.01","0.002","0.047"],
   ["0.001","0.01","0.002","0.047"],
   ["0.052","0.07","0.042","0.187"],
   ["0.52","0.46","0.344","0.382"],
   ["0.994","0.98","0.973","0.88"],
   ["0.354","0.38","0.236","0.451"],
   ["0.365","0.31","0.28","0.393"],
   ["0.003","0.23","0.268","0.305"],
   ["0.002","0.09","0.164","0.242"],
   ["0.676","0.34","0.475","0.422"],
   ["0.794","0.39","0.326","0.403"],
   ["0.365","0.31","0.28","0.393"],
   ["0.455","0.41","0.08","0.54"],
   ["0.005","0.02","0.449","0.082"],
   ["0.006","0.06","0.277","0.104"],
   ["0.299","0.34","0.851","0.057"],
   ["0.999","0.97","0.688","0.912"],
   ["0.12","0.08","0.116","0.13"]
   ]
];

(2) Including data

Use <script> tag to include SNP02.js.

<script src="../data/data_prepare/SNP02.js"></script>

(3) Initialize data with data tag : SNP02 and set SNPMouseEvent and SNPMouseCombinationEvent to true

Here the data’s data tag is defined as SNP02 and the parameters is below.

NGCircos01 = new NGCircos(SNP02,NGCircosGenome,{  // Initialize with "SNP02" data tag
      target:"NGCircos",
      svgWidth:900,
      svgHeight:600,
      svgClassName:"lollipop",
      ......
      SNPMouseEvent:true,
      SNPMouseCombinationEvent:true,
      SNPMouseCombinationImageDisplay:true,
      SNPMouseCombinationImageTitle:"LD",
      SNPMouseCombinationImageTitleSize:20,
      SNPMouseCombinationImageTitleWeight:"bold",
      SNPMouseCombinationImageTitleColor:"black",
      SNPMouseCombinationImagePositionX:300,
      SNPMouseCombinationImagePositionY:-242,
      SNPMouseCombinationImageHeight:200,
      SNPMouseCombinationImageWidth:400,
      SNPMouseCombinationGraphDisplay:true,
      SNPMouseCombinationGraphTitle:"Mutation in population",
      SNPMouseCombinationGraphTitleSize:20,
      SNPMouseCombinationGraphTitleWeight:"bold",
      SNPMouseCombinationGraphTitleColor:"black",
      SNPMouseCombinationGraphType:"histogram",   //histogram,pie,line
      SNPMouseCombinationGraphPositionX:350,
      SNPMouseCombinationGraphPositionY:200,
      SNPMouseCombinationGraphHeight:200,
      SNPMouseCombinationGraphWidth:300,
      SNPMouseCombinationGraphHistogramBarColor:"#99CCFE",
      SNPMouseCombinationGraphHistogramPadding:30,
      SNPMouseCombinationGraphHistogramPositionCorrectX:10,
      SNPMouseCombinationGraphPieAutoColor:true,
      SNPMouseCombinationGraphPieColor:["black","blue","orange","red","green"],
      SNPMouseCombinationGraphPieSize:100,
      SNPMouseCombinationGraphPieStroke:true,
      SNPMouseCombinationGraphPieStrokeColor:"black",
      SNPMouseCombinationGraphPieStrokeWidth:1,
      SNPMouseCombinationGraphPieOpacity:1.0,
      SNPMouseCombinationGraphLineType:"linear",
      SNPMouseCombinationGraphLineColor:"black",
      SNPMouseCombinationGraphLineWidth:1,
      SNPMouseCombinationGraphLinePoint:true,
      SNPMouseCombinationGraphLinePointSize:5,
      SNPMouseCombinationGraphLinePointAutoColor:true,
      SNPMouseCombinationGraphLinePointColor:["black","blue","orange","red","green"],
      SNPMouseCombinationGraphLinePointStroke:true,
      SNPMouseCombinationGraphLinePointStrokeColor:"black",
      SNPMouseCombinationGraphLinePointStrokeWidth:1,
      SNPMouseCombinationGraphLinePointOpacity:1,
      SNPMouseCombinationGraphLinePositionCorrectX:45,
      SNPMouseCombinationTextDisplay:true,
      SNPMouseCombinationTextColor:"#666666",
      SNPMouseCombinationTextSize:13,
      SNPMouseCombinationTextWeight:"bold",
      SNPMouseCombinationTextPositionCorrectX:45,
      SNPMouseCombinationTextPositionCorrectY:40,
      ......
}

(4) Visualization of COMBINATION with SNP module using NG-Circos

alternate text

4.22 BUBBLE module

“BUBBLE module” is used to display the Gene expression data as well as its classification, etc. Of course, other data have similar structure can also be displayed by BUBBLE module.

Note

We will use four steps to illustrate the input data preparation and how to use BUBBLE module, below is an example.

(1) BUBBLE data preparation

Input data

Users should prepare the input data in the following format (separated by tabs).

#chr start   end     name    value   color   layer
chr6 1       100     TP53    0.1     red     3
chr6 100     200     TP53    0.4     blue    3
chr6 200     300     TP53    0.8     green   3
chr6 300     400     TP53    0.9     red     3
......
chr6 600     700     TP53    0.8     red     1
chr6 700     800     TP53    0.2     blue    1
chr6 800     900     TP53    0.6     green   1
chr6 900     1000    TP53    0.5     green   1

Five 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 bubble.

  • The 5 column(value) is the value of the bubble.

  • The 6 column(color) is the specific color of the bubble.

  • The 7 column(layer) is the layer of the bubble.

Save the input data to “BUBBLE01.txt”, Use “NGCircos_PrepareData.py” to prepare data

python NGCircos_PrepareData.py BUBBLE BUBBLE01.txt > BUBBLE01.js

Output data used in NG-Circos

Change the default configuration, and finally BUBBLE01.js is in the following:

var BUBBLE01 = [ "BUBBLE01" , {
   minRadius: 20,
   maxRadius: 80,
   blockStroke:true,
   blockStrokeColor:"grey",
   blockFill:false,
   blockFillColor:"white",
   bubbleMaxSize:10,
   bubbleMinSize:2,
   maxColor: "red",
   minColor: "yellow",
   totalLayer:3,
} , [
   {chr: "chr6", start: "1", end: "100", name: "TP53", value: "0.1", color: "red", layer: "3"},
   {chr: "chr6", start: "100", end: "200", name: "TP53", value: "0.4", color: "blue", layer: "3"},
   {chr: "chr6", start: "200", end: "300", name: "TP53", value: "0.8", color: "green", layer: "3"},
   {chr: "chr6", start: "300", end: "400", name: "TP53", value: "0.9", color: "red", layer: "3"},
   ......
   {chr: "chr6", start: "600", end: "700", name: "TP53", value: "0.8", color: "red", layer: "1"},
   {chr: "chr6", start: "700", end: "800", name: "TP53", value: "0.2", color: "blue", layer: "1"},
   {chr: "chr6", start: "800", end: "900", name: "TP53", value: "0.6", color: "green", layer: "1"},
   {chr: "chr6", start: "900", end: "1000", name: "TP53", value: "0.5", color: "green", layer: "1"},
]];

(2) Including BUBBLE data

Use <script> tag to include BUBBLE01.js.

<script src="../data/data_prepare/BUBBLE01.js"></script>

(3) Initialize BUBBLE data with data tag : BUBBLE01

Here the data’s data tag is defined as BUBBLE01.

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

(4) Visualization of BUBBLE data using NG-Circos

alternate text

5. API: Main configuration

“Main configuration” is the main configuration part of NG-Circos and mainly divided into four classes: “Customize SVG”, “Customize genome”, “Customize Events” and “Customize Tooltips”.

Class of Main configuration

Major function

Customize SVG

Customize the length, width and position of the canvas(SVG)…

Customize genome

Customize the wtidth and color of the genome; Customize the attributes of the ticks; Customize the attributes of the genome labels…

Customize Events

Customize text drag event, zoom translation event and mouse binding event…

Customize Tooltips

Customize content and style of tooltips…

5.1 Customize SVG

Customize SVG class is used to customize the length, width and position of the canvas(SVG).

(1)All configuration parameters

Here we show all the configuration parameters in Customize SVG class.

  NGCircos01 = new NGCircos(NGCircosGenome,{
     // Main configuration - Customize SVG
     target : "NGCircos",
     svgWidth : 900,
     svgHeight : 600,
svgClassName: "NGCircos",
  });

(2)Configuration and examples

  • target

    default “NGCircos”, SVG position in html, where <div> id is “NGCircos”

  • svgWidth

    default 900, SVG width

  • svgHeight

    default 600, SVG height

  • svgClassName

    default NGCircos, SVG class name

Example: change the size of SVG

Example

Before

After

Code change

svgWidth : 900,
svgHeight : 600,
svgWidth : 600,
svgHeight : 400,

Image change

alternate text alternate text

5.2 Customize genome

Customize genome class is used to customize the width and color of the genome, the attributes of the ticks and the attributes of the genome labels.

(1)All configuration parameters

Here we show all the configuration parameters in Customize genome class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize genome
   chrPad : 0.04,
   innerRadius : 246,
   outerRadius : 270,
   genomeFillColor : ["rgb(153,102,0)", "rgb(102,102,0)", "rgb(153,153,30)", "rgb(204,0,0)","rgb(255,0,0)", "rgb(255,0,204)", "rgb(255,204,204)", "rgb(255,153,0)", "rgb(255,204,0)", "rgb(255,255,0)", "rgb(204,255,0)", "rgb(0,255,0)","rgb(53,128,0)", "rgb(0,0,204)", "rgb(102,153,255)", "rgb(153,204,255)", "rgb(0,255,255)", "rgb(204,255,255)", "rgb(153,0,204)", "rgb(204,51,255)","rgb(204,153,255)", "rgb(102,102,102)", "rgb(153,153,153)", "rgb(204,204,204)"],
   genomeBorder : {
      "display" : true,
      "borderColor" : "#000",
      "borderSize" : 0.5
   },
   ticks : {
      "display" : true,
      "len" : 5,
      "color" : "#000",
      "textSize" : 10,
      "textColor" : "#000",
      "scale" : 30000000
   },
   genomeLabel : {
      "display" : true,
      "textSize" : 15,
      "textColor" : "#000",
      "dx" : 0.028,
      "dy" : "-0.55em"
   },
});

(2)Configuration and examples

  • chrPad

    default 0.04, distance between chromosomes

  • innerRadius

    default 246, inner radius of chromosome

  • outerRadius

    default 270, outer radius of chromosome

  • genomeFillColor

    default [“rgb(153,102,0)”, “rgb(102,102,0)”, “rgb(153,153,30)”, “rgb(204,0,0)”,”rgb(255,0,0)”, “rgb(255,0,204)”, “rgb(255,204,204)”, “rgb(255,153,0)”, “rgb(255,204,0)”, “rgb(255,255,0)”, “rgb(204,255,0)”, “rgb(0,255,0)”,”rgb(53,128,0)”, “rgb(0,0,204)”, “rgb(102,153,255)”, “rgb(153,204,255)”, “rgb(0,255,255)”, “rgb(204,255,255)”, “rgb(153,0,204)”, “rgb(204,51,255)”,”rgb(204,153,255)”, “rgb(102,102,102)”, “rgb(153,153,153)”, “rgb(204,204,204)”] , an array of UCSC chromosome color

Example: change the width of genome; change distance between chromosomes; change color of chromosomes.

Example

Before

After

Code change

chrPad:0.01,
innerRadius:246,
outerRadius:270,
genomeFillColor:["green", "grey"],
chrPad:0.05,
innerRadius:266,
outerRadius:270,
genomeFillColor:["red", "black"],

Image change

alternate text alternate text

genomeBorder

genomeBorder : {
   "display" : true,
   "borderColor" : "#000",
   "borderSize" : 0.5
},
  • display

    default true, [true/false], dispaly/not dispaly genome border

  • borderColor

    default “#000”, genome border color

  • borderSize

    default 0.5, genome border size

Example: change the width and color of genome border

Example

Before

After

Code change

genomeBorder : {
   "display" : true,
   "borderColor" : "#000",
   "borderSize" : 0.5
},
genomeBorder : {
   "display" : true,
   "borderColor" : "yellow",
   "borderSize" : 2
},

Image change

alternate text alternate text

ticks

ticks : {
   "display" : true,
   "len" : 5,
   "color" : "#000",
   "textSize" : 10,
   "textColor" : "#000",
   "scale" : 30000000,
   "realLength":false,
   "offset": 0 ,
},
  • display

    default true, [true/false], dispaly/not dispaly genome ticks

  • len

    default 5, length of genome ticks

  • color

    default “#000”, color of genome ticks

  • textSize

    default 10, size of genome ticks text

  • textColor

    default “#000”, color of genome ticks text

  • scale

    default 30000000, unit scale of genome ticks

  • realLength

    default false, whether ticks display the real length of genome or not

  • offset

    default 0, the offset from the real length of genome, which can help users display the realistic ticks of genome.

Example: change the length and color of ticks; change the size and color of tick texts

Example

Before

After

Code change

ticks : {
   "display" : true,
   "len" : 5,
   "color" : "#000",
   "textSize" : 10,
   "textColor" : "#000",
   "scale" : 30000000,
   "realLength" : false,
   "offset": 0 ,
},
ticks : {
   "display" : true,
   "len" : 7,
   "color" : "red",
   "textSize" : 15,
   "textColor" : "red",
   "scale" : 50000000,
   "realLength" : false,
   "offset": 0 ,
},

Image change

alternate text alternate text

genomeLabel

genomeLabel : {
   "display" : true,
   "textSize" : 15,
   "textColor" : "#000",
   "dx" : 0.028,
   "dy" : "-0.55em"
}
  • display

    default true, [true/false], dispaly/not dispaly genome label

  • textSize

    default 15, size of genome label text

  • textColor

    default “#000”, color of genome label text

  • dx

    default 0.028, rotation value of genome label text

  • dy

    default “-0.55em”, distance between center and genome label text

Example: change the color and size of genome label

Example

Before

After

Code change

 genomeLabel : {
   "display" : true,
   "textSize" : 15,
   "textColor" : "#000",
   "dx" : 0.028,
   "dy" : "-0.55em"
},
 genomeLabel : {
   "display" : true,
   "textSize" : 17,
   "textColor" : "red",
   "dx" : 0.028,
   "dy" : "-0.55em"
},

Image change

alternate text alternate text

5.3 Customize Events

Customize Events class is used to customize text drag event, zoom translation event and mouse binding event.

zoom event

Here we show how to customize the zoom event.

NGCircos01 = new NGCircos(NGCircosGenome,{
   zoom : false,
});
  • zoom

    default false, [true/false], enable/disable SVG zoom and translation

Example: open the zoom event to make SVG enable to zoom and translation

Example

Before

After

Code change

zoom : false,
zoom : true,

Image change

alternate text alternate text

TEXT module

Here we show how to customize the TEXTModuleDragEvent event.

NGCircos01 = new NGCircos(NGCircosGenome,{
   TEXTModuleDragEvent : true,
});
  • TEXTModuleDragEvent

    default true, [true/false], open/not open TEXT module label drag event

Example: open TEXT module label drag event

Example

Before

After

Code change

TEXTModuleDragEvent : false,
TEXTModuleDragEvent : true,

Image change

alternate text alternate text

SNP module

(1)All configuration parameters

Here we show all the configuration parameters in SNP module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events -SNP module
   SNPMouseEvent : true,
   SNPMouseClickDisplay : false,
   SNPMouseClickColor : "red",
   SNPMouseClickCircleSize : 4,
   SNPMouseClickCircleOpacity : 1.0,
   SNPMouseClickCircleStrokeColor : "#F26223",
   SNPMouseClickCircleStrokeWidth : 0,
   SNPMouseClickTextFromData : "fourth",
   SNPMouseClickTextOpacity : 1.0,
   SNPMouseClickTextColor : "red",
   SNPMouseClickTextSize : 8,
   SNPMouseClickTextPostionX : 1.0,
   SNPMouseClickTextPostionY : 10.0,
   SNPMouseClickTextDrag : true,
   SNPMouseDownDisplay : false,
   SNPMouseDownColor : "green",
   SNPMouseDownCircleSize : 4,
   SNPMouseDownCircleOpacity : 1.0,
   SNPMouseDownCircleStrokeColor : "#F26223",
   SNPMouseDownCircleStrokeWidth : 0,
   SNPMouseEnterDisplay : false,
   SNPMouseEnterColor : "yellow",
   SNPMouseEnterCircleSize : 4,
   SNPMouseEnterCircleOpacity : 1.0,
   SNPMouseEnterCircleStrokeColor : "#F26223",
   SNPMouseEnterCircleStrokeWidth : 0,
   SNPMouseLeaveDisplay : false,
   SNPMouseLeaveColor : "pink",
   SNPMouseLeaveCircleSize : 4,
   SNPMouseLeaveCircleOpacity : 1.0,
   SNPMouseLeaveCircleStrokeColor : "#F26223",
   SNPMouseLeaveCircleStrokeWidth : 0,
   SNPMouseMoveDisplay : false,
   SNPMouseMoveColor : "red",
   SNPMouseMoveCircleSize : 2,
   SNPMouseMoveCircleOpacity : 1.0,
   SNPMouseMoveCircleStrokeColor : "#F26223",
   SNPMouseMoveCircleStrokeWidth : 0,
   SNPMouseOutDisplay : false,
   SNPMouseOutAnimationTime : 500,
   SNPMouseOutColor : "red",
   SNPMouseOutCircleSize : 2,
   SNPMouseOutCircleOpacity : 1.0,
   SNPMouseOutCircleStrokeColor : "red",
   SNPMouseOutCircleStrokeWidth : 0,
   SNPMouseUpDisplay : false,
   SNPMouseUpColor : "grey",
   SNPMouseUpCircleSize : 4,
   SNPMouseUpCircleOpacity : 1.0,
   SNPMouseUpCircleStrokeColor : "#F26223",
   SNPMouseUpCircleStrokeWidth : 0,
   SNPMouseOverDisplay : false,
   SNPMouseOverColor : "red",
   SNPMouseOverCircleSize : 2,
   SNPMouseOverCircleOpacity : 1.0,
   SNPMouseOverCircleStrokeColor : "#F26223",
   SNPMouseOverCircleStrokeWidth : 3,
});

(2)Configuration and examples

  • SNPMouseEvent

    default true, [true/false], open/not open mouse event of SNP module

Mouse click

  • SNPMouseClickDisplay

    default true, [true/false], open/not open mouse click event of SNP module

  • SNPMouseClickColor

    default “red”, “none” means no change, element change color after click the element

  • SNPMouseClickCircleSize

    default 4, “none” means no change, element change circle size after click the element.

  • SNPMouseClickCircleOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • SNPMouseClickCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after click the element.

  • SNPMouseClickCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after click the element.

  • SNPMouseClickTextFromData

    default “fourth”, first,second,third,fourth column data click to show

  • SNPMouseClickTextOpacity

    default 1.0, text opacity after click the element

  • SNPMouseClickTextColor

    default “red”, text color after click the element

  • SNPMouseClickTextSize

    default 8, text size after click the element

  • SNPMouseClickTextPostionX

    default 1.0, text x position after click the element

  • SNPMouseClickTextPostionY

    default 10.0, text y position after click the element

  • SNPMouseClickTextDrag

    default true, [true/false], open/not open text drag function

Example: change the circle size and color when mouse click; change the annotated text content when mouse click;

Example

Before

After

Code change

SNPMouseClickColor : "red",
SNPMouseClickCircleSize : 4,
SNPMouseClickTextFromData : "second",
SNPMouseClickColor : "blue",
SNPMouseClickCircleSize : 8,
SNPMouseClickTextFromData : "fourth",

Image change

alternate text alternate text

Mouse down

  • SNPMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of SNP module

  • SNPMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • SNPMouseDownCircleSize

    default 4, “none” means no change, element change circle size after mouse down the element.

  • SNPMouseDownCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • SNPMouseDownCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse down the element.

  • SNPMouseDownCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse down the element.

Example: change the color, size, opacity and stroke color of the circle when mouse down.

Example

Before

After

Code change

SNPMouseDownColor : "green",
SNPMouseDownCircleSize : 4,
SNPMouseDownCircleOpacity : 1.0,
SNPMouseDownCircleStrokeColor : "#F26223",
SNPMouseDownColor : "blue",
SNPMouseDownCircleSize : 8,
SNPMouseDownCircleOpacity : 0.5,
SNPMouseDownCircleStrokeColor : "red",

Image change

alternate text alternate text

Mouse enter

  • SNPMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of SNP module

  • SNPMouseEnterColor

    default “yellow”, “none” means no change, element change color after mouse enter the element

  • SNPMouseEnterCircleSize

    default 4, “none” means no change, element change circle size after mouse enter the element.

  • SNPMouseEnterCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • SNPMouseEnterCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse enter the element.

  • SNPMouseEnterCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse enter the element.

Example: change color, stroke color and opacity of the circle when mouse enter the element;

Example

Before

After

Code change

SNPMouseEnterColor : "yellow",
SNPMouseEnterCircleOpacity : 1.0,
SNPMouseEnterCircleStrokeColor : "#F26223",
SNPMouseEnterColor : "red",
SNPMouseEnterCircleOpacity : 0.7,
SNPMouseEnterCircleStrokeColor : "green",

Image change

alternate text alternate text

Mouse leave

  • SNPMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of SNP module

  • SNPMouseLeaveColor

    default “pink”, “none” means no change, element change color after mouse leave the element

  • SNPMouseLeaveCircleSize

    default 4, “none” means no change, element change circle size after mouse leave the element.

  • SNPMouseLeaveCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • SNPMouseLeaveCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse leave the element.

  • SNPMouseLeaveCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse leave the element.

Example: change color, size, stroke color and stroke width of the circle when mouse leave the element;

Example

Before

After

Code change

SNPMouseLeaveColor : "blue",
SNPMouseLeaveCircleSize : 4,
SNPMouseLeaveCircleStrokeColor : "#F26223",
SNPMouseLeaveCircleStrokeWidth : 1,
SNPMouseLeaveColor : "red",
SNPMouseLeaveCircleSize : 6,
SNPMouseLeaveCircleStrokeColor : "green",
SNPMouseLeaveCircleStrokeWidth : 2,

Image change

alternate text alternate text

Mouse move

  • SNPMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of SNP module

  • SNPMouseMoveColor

    default “red”, “none” means no change, element change color after mouse move the element

  • SNPMouseMoveCircleSize

    default 2, “none” means no change, element change circle size after mouse move the element.

  • SNPMouseMoveCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • SNPMouseMoveCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse move the element.

  • SNPMouseMoveCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Example: mouse move event and mouse out event

Example

Before

After

Code change

SNPMouseMoveColor : "green",
SNPMouseMoveCircleStrokeColor : "blue",
SNPMouseMoveCircleStrokeWidth : 3,
SNPMouseMoveColor : "red",
SNPMouseMoveCircleStrokeColor : "#F26223",
SNPMouseMoveCircleStrokeWidth : 0,
SNPMouseOutDisplay : true,
SNPMouseOutAnimationTime : 500,
SNPMouseOutColor : "none",
SNPMouseOutCircleSize : "none",
SNPMouseOutCircleOpacity : 1.0,
SNPMouseOutCircleStrokeColor : "red",
SNPMouseOutCircleStrokeWidth : 0,

Image change

alternate text alternate text

Mouse out

  • SNPMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of SNP module

  • SNPMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • SNPMouseOutColor

    default “red”, “none” means no change, element change color after mouse out the element

  • SNPMouseOutCircleSize

    default 2, “none” means no change, element change circle size after mouse out the element.

  • SNPMouseOutCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • SNPMouseOutCircleStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • SNPMouseOutCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse out the element.

Example: change animation time, size, stroke color and stroke width of the circle when mouse out the element;

Example

Before

After

Code change

SNPMouseOutAnimationTime : 400,
SNPMouseOutCircleSize : 5,
SNPMouseOutCircleStrokeColor : "red",
SNPMouseOutCircleStrokeWidth : 1,
SNPMouseOutAnimationTime : 1000,
SNPMouseOutCircleSize : 5,
SNPMouseOutCircleStrokeColor : "green",
SNPMouseOutCircleStrokeWidth : 2,

Image change

alternate text alternate text

Mouse up

  • SNPMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of SNP module

  • SNPMouseUpColor

    default “grey”, “none” means no change, element change color after mouse up the element

  • SNPMouseUpCircleSize

    default 4, “none” means no change, element change circle size after mouse up the element.

  • SNPMouseUpCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • SNPMouseUpCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse up the element.

  • SNPMouseUpCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse up the element.

Example: change size and color of the circle when mouse up the element;

Example

Before

After

Code change

SNPMouseUpColor : "grey",
SNPMouseUpCircleSize : 4,
SNPMouseUpColor : "red",
SNPMouseUpCircleSize : 6,

Image change

alternate text alternate text

Mouse over

  • SNPMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of SNP module

  • SNPMouseOverColor

    default “red”, “none” means no change, element change color after mouse Over the element

  • SNPMouseOverCircleSize

    default 2, “none” means no change, element change circle size after mouse Over the element.

  • SNPMouseOverCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • SNPMouseOverCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse Over the element.

  • SNPMouseOverCircleStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse Over the element.

Example: change size and color of the circle when mouse over the element;

Example

Before

After

Code change

SNPMouseOverColor : "red",
SNPMouseOverCircleSize : 4,
SNPMouseOverColor : "none",
SNPMouseOverCircleSize : "none",

Image change

alternate text alternate text

SCATTER module

(1)All configuration parameters

Here we show all the configuration parameters in SCATTER module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events - SCATTER module
   SCATTERMouseEvent : true,
   SCATTERMouseClickDisplay : false,
   SCATTERMouseClickColor : "red",
   SCATTERMouseClickCircleSize : 4,
   SCATTERMouseClickCircleOpacity : 1.0,
   SCATTERMouseClickCircleStrokeColor : "#F26223",
   SCATTERMouseClickCircleStrokeWidth : 0,
   SCATTERMouseClickTextFromData : "fourth",
   SCATTERMouseClickTextOpacity : 1,
   SCATTERMouseClickTextColor : "red",
   SCATTERMouseClickTextSize : 8,
   SCATTERMouseClickTextPostionX : 1.0,
   SCATTERMouseClickTextPostionY : 10.0,
   SCATTERMouseClickTextDrag : true,
   SCATTERMouseDownDisplay : false,
   SCATTERMouseDownColor : "green",
   SCATTERMouseDownCircleSize : 4,
   SCATTERMouseDownCircleOpacity : 1.0,
   SCATTERMouseDownCircleStrokeColor : "#F26223",
   SCATTERMouseDownCircleStrokeWidth : 0,
   SCATTERMouseEnterDisplay : false,
   SCATTERMouseEnterColor : "yellow",
   SCATTERMouseEnterCircleSize : 4,
   SCATTERMouseEnterCircleOpacity : 1.0,
   SCATTERMouseEnterCircleStrokeColor : "#F26223",
   SCATTERMouseEnterCircleStrokeWidth : 0,
   SCATTERMouseLeaveDisplay : false,
   SCATTERMouseLeaveColor : "pink",
   SCATTERMouseLeaveCircleSize : 4,
   SCATTERMouseLeaveCircleOpacity : 1.0,
   SCATTERMouseLeaveCircleStrokeColor : "#F26223",
   SCATTERMouseLeaveCircleStrokeWidth : 0,
   SCATTERMouseMoveDisplay : false,
   SCATTERMouseMoveColor : "red",
   SCATTERMouseMoveCircleSize : 2,
   SCATTERMouseMoveCircleOpacity : 1.0,
   SCATTERMouseMoveCircleStrokeColor : "#F26223",
   SCATTERMouseMoveCircleStrokeWidth : 0,
   SCATTERMouseOutDisplay : false,
   SCATTERMouseOutAnimationTime : 500,
   SCATTERMouseOutColor : "red",
   SCATTERMouseOutCircleSize : 2,
   SCATTERMouseOutCircleOpacity : 1.0,
   SCATTERMouseOutCircleStrokeColor : "red",
   SCATTERMouseOutCircleStrokeWidth : 0,
   SCATTERMouseUpDisplay : false,
   SCATTERMouseUpColor : "grey",
   SCATTERMouseUpCircleSize : 4,
   SCATTERMouseUpCircleOpacity : 1.0,
   SCATTERMouseUpCircleStrokeColor : "#F26223",
   SCATTERMouseUpCircleStrokeWidth : 0,
   SCATTERMouseOverDisplay : false,
   SCATTERMouseOverColor : "red",
   SCATTERMouseOverCircleSize : 2,
   SCATTERMouseOverCircleOpacity : 1.0,
   SCATTERMouseOverCircleStrokeColor : "#F26223",
   SCATTERMouseOverCircleStrokeWidth : 3,
});

(2)Configuration and examples

  • SCATTERMouseEvent

    default true, [true/false], open/not open mouse event of SCATTER module

Mouse click

  • SCATTERMouseClickDisplay

    default true, [true/false], open/not open mouse click event of SCATTER module

  • SCATTERMouseClickColor

    default “red”, “none” means no change, element change color after click the element

  • SCATTERMouseClickCircleSize

    default 4, “none” means no change, element change circle size after click the element.

  • SCATTERMouseClickCircleOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • SCATTERMouseClickCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after click the element.

  • SCATTERMouseClickCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after click the element.

  • SCATTERMouseClickTextFromData

    default “fourth”, first,second,third,fourth column data click to show

  • SCATTERMouseClickTextOpacity

    default 1.0, text opacity after click the element

  • SCATTERMouseClickTextColor

    default “red”, text color after click the element

  • SCATTERMouseClickTextSize

    default 8, text size after click the element

  • SCATTERMouseClickTextPostionX

    default 1.0, text x position after click the element

  • SCATTERMouseClickTextPostionY

    default 10.0, text y position after click the element

  • SCATTERMouseClickTextDrag

    default true, [true/false], open/not open text drag function

Mouse down

  • SCATTERMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of SCATTER module

  • SCATTERMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • SCATTERMouseDownCircleSize

    default 4, “none” means no change, element change circle size after mouse down the element.

  • SCATTERMouseDownCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • SCATTERMouseDownCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse down the element.

  • SCATTERMouseDownCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • SCATTERMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of SCATTER module

  • SCATTERMouseEnterColor

    default “yellow”, “none” means no change, element change color after mouse enter the element

  • SCATTERMouseEnterCircleSize

    default 4, “none” means no change, element change circle size after mouse enter the element.

  • SCATTERMouseEnterCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • SCATTERMouseEnterCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse enter the element.

  • SCATTERMouseEnterCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • SCATTERMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of SCATTER module

  • SCATTERMouseLeaveColor

    default “pink”, “none” means no change, element change color after mouse leave the element

  • SCATTERMouseLeaveCircleSize

    default 4, “none” means no change, element change circle size after mouse leave the element.

  • SCATTERMouseLeaveCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • SCATTERMouseLeaveCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse leave the element.

  • SCATTERMouseLeaveCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • SCATTERMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of SCATTER module

  • SCATTERMouseMoveColor

    default “red”, “none” means no change, element change color after mouse move the element

  • SCATTERMouseMoveCircleSize

    default 2, “none” means no change, element change circle size after mouse move the element.

  • SCATTERMouseMoveCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • SCATTERMouseMoveCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse move the element.

  • SCATTERMouseMoveCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • SCATTERMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of SCATTER module

  • SCATTERMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • SCATTERMouseOutColor

    default “red”, “none” means no change, element change color after mouse out the element

  • SCATTERMouseOutCircleSize

    default 2, “none” means no change, element change circle size after mouse out the element.

  • SCATTERMouseOutCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • SCATTERMouseOutCircleStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • SCATTERMouseOutCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • SCATTERMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of SCATTER module

  • SCATTERMouseUpColor

    default “grey”, “none” means no change, element change color after mouse up the element

  • SCATTERMouseUpCircleSize

    default 4, “none” means no change, element change circle size after mouse up the element.

  • SCATTERMouseUpCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • SCATTERMouseUpCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse up the element.

  • SCATTERMouseUpCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • SCATTERMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of SCATTER module

  • SCATTERMouseOverColor

    default “red”, “none” means no change, element change color after mouse Over the element

  • SCATTERMouseOverCircleSize

    default 2, “none” means no change, element change circle size after mouse Over the element.

  • SCATTERMouseOverCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • SCATTERMouseOverCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse Over the element.

  • SCATTERMouseOverCircleStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse Over the element.

LINK module

(1)All configuration parameters

Here we show all the configuration parameters in LINK module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events - LINK module
   LINKMouseEvent : true,
   LINKMouseClickDisplay : false,
   LINKMouseClickOpacity : 1.0,
   LINKMouseClickStrokeColor : "green",
   LINKMouseClickStrokeWidth : 4,
   LINKMouseDownDisplay : false,
   LINKMouseDownOpacity : 1.0,
   LINKMouseDownStrokeColor : "#F26223",
   LINKMouseDownStrokeWidth : 4,
   LINKMouseEnterDisplay : false,
   LINKMouseEnterOpacity : 1.0,
   LINKMouseEnterStrokeColor : "#F26223",
   LINKMouseEnterStrokeWidth : 4,
   LINKMouseLeaveDisplay : false,
   LINKMouseLeaveOpacity : 1.0,
   LINKMouseLeaveStrokeColor : "#F26223",
   LINKMouseLeaveStrokeWidth : 4,
   LINKMouseMoveDisplay : false,
   LINKMouseMoveOpacity : 1.0,
   LINKMouseMoveStrokeColor : "#F26223",
   LINKMouseMoveStrokeWidth : 4,
   LINKMouseOutDisplay : false,
   LINKMouseOutAnimationTime : 500,
   LINKMouseOutOpacity : 1.0,
   LINKMouseOutStrokeColor : "red",
   LINKMouseOutStrokeWidth : 4,
   LINKMouseUpDisplay : false,
   LINKMouseUpOpacity : 1.0,
   LINKMouseUpStrokeColor : "#F26223",
   LINKMouseUpStrokeWidth : 4,
   LINKMouseOverDisplay : false,
   LINKMouseOverOpacity : 1.0,
   LINKMouseOverStrokeColor : "#F26223",
   LINKMouseOverStrokeWidth : 3,
   LINKLabelDragEvent : false,
});

(2)Configuration and examples

  • LINKMouseEvent

    default true, [true/false], open/not open mouse event of LINK module

Mouse click

  • LINKMouseClickDisplay

    default true, [true/false], open/not open mouse click event of LINK module

  • LINKMouseClickOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • LINKMouseClickStrokeColor

    default “green”, “none” means no change, element change color after click the element

  • LINKMouseClickStrokeWidth

    default 4, “none” means no change, element change stroke width after click the element.

Mouse down

  • LINKMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of LINK module

  • LINKMouseDownOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • LINKMouseDownStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse down the element

  • LINKMouseDownStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • LINKMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of LINK module

  • LINKMouseEnterOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • LINKMouseEnterStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse enter the element

  • LINKMouseEnterStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • LINKMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of LINK module

  • LINKMouseLeaveOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • LINKMouseLeaveStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse leave the element

  • LINKMouseLeaveStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • LINKMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of LINK module

  • LINKMouseMoveOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • LINKMouseMoveStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse move the element

  • LINKMouseMoveStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • LINKMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of LINK module

  • LINKMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • LINKMouseOutOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • LINKMouseOutStrokeColor

    default “red”, “none” means no change, element change color after mouse out the element

  • LINKMouseOutStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • LINKMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of LINK module

  • LINKMouseUpOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • LINKMouseUpStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse up the element

  • LINKMouseUpStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • LINKMouseOverDisplay

    default true, [true/false], open/not open mouse mouse over event of LINK module

  • LINKMouseOverOpacity

    default 1.0, “none” means no change, element change opacity after mouse over the element

  • LINKMouseOverStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse over the element

  • LINKMouseOverStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse over the element.

CNV module

(1)All configuration parameters

Here we show all the configuration parameters in CNV module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events - CNV module
   CNVMouseEvent : true,
   CNVMouseClickDisplay : false,
   CNVMouseClickColor : "red",
   CNVMouseClickArcOpacity : 1.0,
   CNVMouseClickArcStrokeColor : "#F26223",
   CNVMouseClickArcStrokeWidth : 0,
   CNVMouseClickTextFromData : "fourth",   //first,second,third,fourth column
   CNVMouseClickTextOpacity : 1,
   CNVMouseClickTextColor : "red",
   CNVMouseClickTextSize : 8,
   CNVMouseClickTextPostionX : 0,
   CNVMouseClickTextPostionY : 0,
   CNVMouseClickTextDrag : true,
   CNVMouseDownDisplay : false,
   CNVMouseDownColor : "green",
   CNVMouseDownArcOpacity : 1.0,
   CNVMouseDownArcStrokeColor : "#F26223",
   CNVMouseDownArcStrokeWidth : 0,
   CNVMouseEnterDisplay : false,
   CNVMouseEnterColor : "yellow",
   CNVMouseEnterArcOpacity : 1.0,
   CNVMouseEnterArcStrokeColor : "#F26223",
   CNVMouseEnterArcStrokeWidth : 0,
   CNVMouseLeaveDisplay : false,
   CNVMouseLeaveColor : "pink",
   CNVMouseLeaveArcOpacity : 1.0,
   CNVMouseLeaveArcStrokeColor : "#F26223",
   CNVMouseLeaveArcStrokeWidth : 0,
   CNVMouseMoveDisplay : false,
   CNVMouseMoveColor : "red",
   CNVMouseMoveArcOpacity : 1.0,
   CNVMouseMoveArcStrokeColor : "#F26223",
   CNVMouseMoveArcStrokeWidth : 0,
   CNVMouseOutDisplay : false,
   CNVMouseOutAnimationTime : 500,
   CNVMouseOutColor : "red",
   CNVMouseOutArcOpacity : 1.0,
   CNVMouseOutArcStrokeColor : "red",
   CNVMouseOutArcStrokeWidth : 0,
   CNVMouseUpDisplay : false,
   CNVMouseUpColor : "grey",
   CNVMouseUpArcOpacity : 1.0,
   CNVMouseUpArcStrokeColor : "#F26223",
   CNVMouseUpArcStrokeWidth : 0,
   CNVMouseOverDisplay : false,
   CNVMouseOverColor : "red",
   CNVMouseOverArcOpacity : 1.0,
   CNVMouseOverArcStrokeColor : "#F26223",
   CNVMouseOverArcStrokeWidth : 3,
   CNVMouseOverTooltipsSetting :"style1",
   CNVMouseOverTooltipsHtml : " ",
   CNVMouseOverTooltipsPosition : "absolute",
   CNVMouseOverTooltipsBackgroundColor : "white",
   CNVMouseOverTooltipsBorderStyle : "solid",
   CNVMouseOverTooltipsBorderWidth : 0,
   CNVMouseOverTooltipsPadding : "3px",
   CNVMouseOverTooltipsBorderRadius : "3px",
   CNVMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

  • CNVMouseEvent

    default true, [true/false], open/not open mouse event of CNV module

Mouse click

  • CNVMouseClickDisplay

    default true, [true/false], open/not open mouse click event of CNV module

  • CNVMouseClickColor

    default “red”, “none” means no change, element change color after click the element

  • CNVMouseClickArcOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • CNVMouseClickArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after click the element.

  • CNVMouseClickArcStrokeWidth

    default 0, “none” means no change, element change stroke width after click the element.

  • CNVMouseClickTextFromData

    default “fourth”, first,second,third,fourth column data click to show

  • CNVMouseClickTextOpacity

    default 1.0, text opacity after click the element

  • CNVMouseClickTextColor

    default “red”, text color after click the element

  • CNVMouseClickTextSize

    default 8, text size after click the element

  • CNVMouseClickTextPostionX

    default 0, text x position after click the element

  • CNVMouseClickTextPostionY

    default 0, text y position after click the element

  • CNVMouseClickTextDrag

    default true, [true/false], open/not open text drag function

Mouse down

  • CNVMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of CNV module

  • CNVMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • CNVMouseDownArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • CNVMouseDownArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse down the element.

  • CNVMouseDownArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • CNVMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of CNV module

  • CNVMouseEnterColor

    default “yellow”, “none” means no change, element change color after mouse enter the element

  • CNVMouseEnterArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • CNVMouseEnterArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse enter the element.

  • CNVMouseEnterArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • CNVMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of CNV module

  • CNVMouseLeaveColor

    default “pink”, “none” means no change, element change color after mouse leave the element

  • CNVMouseLeaveArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • CNVMouseLeaveArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse leave the element.

  • CNVMouseLeaveArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • CNVMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of CNV module

  • CNVMouseMoveColor

    default “red”, “none” means no change, element change color after mouse move the element

  • CNVMouseMoveArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • CNVMouseMoveArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse move the element.

  • CNVMouseMoveArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • CNVMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of CNV module

  • CNVMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • CNVMouseOutColor

    default “red”, “none” means no change, element change color after mouse out the element

  • CNVMouseOutArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • CNVMouseOutArcStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • CNVMouseOutArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • CNVMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of CNV module

  • CNVMouseUpColor

    default “grey”, “none” means no change, element change color after mouse up the element

  • CNVMouseUpArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • CNVMouseUpArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse up the element.

  • CNVMouseUpArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • CNVMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of CNV module

  • CNVMouseOverColor

    default “red”, “none” means no change, element change color after mouse Over the element

  • CNVMouseOverArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • CNVMouseOverArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse Over the element.

  • CNVMouseOverArcStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse Over the element.

ARC module

(1)All configuration parameters

Here we show all the configuration parameters in ARC module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events - ARC module
   ARCMouseEvent : true,
   ARCMouseClickDisplay : false,
   ARCMouseClickColor : "red",
   ARCMouseClickArcOpacity : 1.0,
   ARCMouseClickArcStrokeColor : "#F26223",
   ARCMouseClickArcStrokeWidth : 1,
   ARCMouseClickTextFromData : "fourth",
   ARCMouseClickTextOpacity : 1,
   ARCMouseClickTextColor : "red",
   ARCMouseClickTextSize : 8,
   ARCMouseClickTextPostionX : 0,
   ARCMouseClickTextPostionY : 0,
   ARCMouseClickTextDrag : true,
   ARCMouseDownDisplay : false,
   ARCMouseDownColor : "green",
   ARCMouseDownArcOpacity : 1.0,
   ARCMouseDownArcStrokeColor : "#F26223",
   ARCMouseDownArcStrokeWidth : 0,
   ARCMouseEnterDisplay : false,
   ARCMouseEnterColor : "yellow",
   ARCMouseEnterArcOpacity : 1.0,
   ARCMouseEnterArcStrokeColor : "#F26223",
   ARCMouseEnterArcStrokeWidth : 0,
   ARCMouseLeaveDisplay : false,
   ARCMouseLeaveColor : "pink",
   ARCMouseLeaveArcOpacity : 1.0,
   ARCMouseLeaveArcStrokeColor : "#F26223",
   ARCMouseLeaveArcStrokeWidth : 0,
   ARCMouseMoveDisplay : false,
   ARCMouseMoveColor : "red",
   ARCMouseMoveArcOpacity : 1.0,
   ARCMouseMoveArcStrokeColor : "#F26223",
   ARCMouseMoveArcStrokeWidth : 0,
   ARCMouseOutDisplay : false,
   ARCMouseOutAnimationTime : 500,
   ARCMouseOutColor : "red",
   ARCMouseOutArcOpacity : 1.0,
   ARCMouseOutArcStrokeColor : "red",
   ARCMouseOutArcStrokeWidth : 0,
   ARCMouseUpDisplay : false,
   ARCMouseUpColor : "grey",
   ARCMouseUpArcOpacity : 1.0,
   ARCMouseUpArcStrokeColor : "#F26223",
   ARCMouseUpArcStrokeWidth : 0,
   ARCMouseOverDisplay : false,
   ARCMouseOverColor : "red",
   ARCMouseOverArcOpacity : 1.0,
   ARCMouseOverArcStrokeColor : "#F26223",
   ARCMouseOverArcStrokeWidth : 3,
});

(2)Configuration and examples

  • ARCMouseEvent

    default false, [true/false], open/not open mouse event of ARC module

Mouse click

  • ARCMouseClickDisplay

    default true, [true/false], open/not open mouse click event of ARC module

  • ARCMouseClickColor

    default “red”, “none” means no change, element change color after click the element

  • ARCMouseClickArcOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • ARCMouseClickArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after click the element.

  • ARCMouseClickArcStrokeWidth

    default 1, “none” means no change, element change stroke width after click the element.

  • ARCMouseClickTextFromData

    default “fourth”, first,second,third,fourth column data click to show

  • ARCMouseClickTextOpacity

    default 1.0, text opacity after click the element

  • ARCMouseClickTextColor

    default “red”, text color after click the element

  • ARCMouseClickTextSize

    default 8, text size after click the element

  • ARCMouseClickTextPostionX

    default 0, text x position after click the element

  • ARCMouseClickTextPostionY

    default 0, text y position after click the element

  • ARCMouseClickTextDrag

    default true, [true/false], open/not open text drag function

Mouse down

  • ARCMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of ARC module

  • ARCMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • ARCMouseDownArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • ARCMouseDownArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse down the element.

  • ARCMouseDownArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • ARCMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of ARC module

  • ARCMouseEnterColor

    default “yellow”, “none” means no change, element change color after mouse enter the element

  • ARCMouseEnterArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • ARCMouseEnterArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse enter the element.

  • ARCMouseEnterArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • ARCMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of ARC module

  • ARCMouseLeaveColor

    default “pink”, “none” means no change, element change color after mouse leave the element

  • ARCMouseLeaveArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • ARCMouseLeaveArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse leave the element.

  • ARCMouseLeaveArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • ARCMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of ARC module

  • ARCMouseMoveColor

    default “red”, “none” means no change, element change color after mouse move the element

  • ARCMouseMoveArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • ARCMouseMoveArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse move the element.

  • ARCMouseMoveArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • ARCMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of ARC module

  • ARCMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • ARCMouseOutColor

    default “red”, “none” means no change, element change color after mouse out the element

  • ARCMouseOutArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • ARCMouseOutArcStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • ARCMouseOutArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • ARCMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of ARC module

  • ARCMouseUpColor

    default “grey”, “none” means no change, element change color after mouse up the element

  • ARCMouseUpArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • ARCMouseUpArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse up the element.

  • ARCMouseUpArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • ARCMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of ARC module

  • ARCMouseOverColor

    default “red”, “none” means no change, element change color after mouse Over the element

  • ARCMouseOverArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • ARCMouseOverArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse Over the element.

  • ARCMouseOverArcStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse Over the element.

HEATMAP module

(1)All configuration parameters

Here we show all the configuration parameters in HEATMAP module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events - HEATMAP module
   HEATMAPMouseEvent : true,
   HEATMAPMouseClickDisplay : false,
   HEATMAPMouseClickColor : "green",            //"none","red"
   HEATMAPMouseClickOpacity : 1.0,            //"none",1.0
   HEATMAPMouseClickStrokeColor : "non   e",  //"none","#F26223"
   HEATMAPMouseClickStrokeWidth : "none",          //"none",3
   HEATMAPMouseDownDisplay : false,
   HEATMAPMouseDownColor : "green",            //"none","red"
   HEATMAPMouseDownOpacity : 1.0,            //"none",1.0
   HEATMAPMouseDownStrokeColor : "none",  //"none","#F26223"
   HEATMAPMouseDownStrokeWidth : "none",          //"none",3
   HEATMAPMouseEnterDisplay : false,
   HEATMAPMouseEnterColor : "green",            //"none","red"
   HEATMAPMouseEnterOpacity : 1.0,            //"none",1.0
   HEATMAPMouseEnterStrokeColor : "none",  //"none","#F26223"
   HEATMAPMouseEnterStrokeWidth : "none",          //"none",3
   HEATMAPMouseLeaveDisplay : false,
   HEATMAPMouseLeaveColor : "green",            //"none","red"
   HEATMAPMouseLeaveOpacity : 1.0,            //"none",1.0
   HEATMAPMouseLeaveStrokeColor : "none",  //"none","#F26223"
   HEATMAPMouseLeaveStrokeWidth : "none",          //"none",3
   HEATMAPMouseMoveDisplay : false,
   HEATMAPMouseMoveColor : "green",            //"none","red"
   HEATMAPMouseMoveOpacity : 1.0,            //"none",1.0
   HEATMAPMouseMoveStrokeColor : "none",  //"none","#F26223"
   HEATMAPMouseMoveStrokeWidth : "none",          //"none",3
   HEATMAPMouseOutDisplay : false,
   HEATMAPMouseOutAnimationTime : 500,
   HEATMAPMouseOutColor : "green",            //"none","red"
   HEATMAPMouseOutOpacity : 1.0,            //"none",1.0
   HEATMAPMouseOutStrokeColor : "none",  //"none","#F26223"
   HEATMAPMouseOutStrokeWidth : "none",          //"none",3
   HEATMAPMouseUpDisplay : false,
   HEATMAPMouseUpColor : "green",            //"none","red"
   HEATMAPMouseUpOpacity : 1.0,            //"none",1.0
   HEATMAPMouseUpStrokeColor : "none",  //"none","#F26223"
   HEATMAPMouseUpStrokeWidth : "none",          //"none",3
   HEATMAPMouseOverDisplay : false,
   HEATMAPMouseOverColor : "none",            //"none","red"
   HEATMAPMouseOverOpacity : 1.0,            //"none",1.0
   HEATMAPMouseOverStrokeColor : "none",  //"none","#F26223"
   HEATMAPMouseOverStrokeWidth : "none",          //"none",3
});

(2)Configuration and examples

  • HEATMAPMouseEvent

    default true, [true/false], open/not open mouse event of HEATMAP module

Mouse click

  • HEATMAPMouseClickDisplay

    default false, [true/false], open/not open mouse click event of HEATMAP module

  • HEATMAPMouseClickColor

    default “green”, “none” means no change, element change color after click the element

  • HEATMAPMouseClickOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • HEATMAPMouseClickStrokeColor

    default “none”, “none” means no change, element change stroke color after click the element.

  • HEATMAPMouseClickStrokeWidth

    default “none”, “none” means no change, element change stroke width after click the element.

Mouse down

  • HEATMAPMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of HEATMAP module

  • HEATMAPMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • HEATMAPMouseDownOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • HEATMAPMouseDownStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse down the element.

  • HEATMAPMouseDownStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • HEATMAPMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of HEATMAP module

  • HEATMAPMouseEnterColor

    default “green”, “none” means no change, element change color after mouse enter the element

  • HEATMAPMouseEnterOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • HEATMAPMouseEnterStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse enter the element.

  • HEATMAPMouseEnterStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • HEATMAPMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of HEATMAP module

  • HEATMAPMouseLeaveColor

    default “green”, “none” means no change, element change color after mouse leave the element

  • HEATMAPMouseLeaveOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • HEATMAPMouseLeaveStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse leave the element.

  • HEATMAPMouseLeaveStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • HEATMAPMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of HEATMAP module

  • HEATMAPMouseMoveColor

    default “green”, “none” means no change, element change color after mouse move the element

  • HEATMAPMouseMoveOpacity

    default “none”, “none” means no change, element change opacity after mouse move the element

  • HEATMAPMouseMoveStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse move the element.

  • HEATMAPMouseMoveStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • HEATMAPMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of HEATMAP module

  • HEATMAPMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • HEATMAPMouseOutColor

    default “green”, “none” means no change, element change color after mouse out the element

  • HEATMAPMouseOutOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • HEATMAPMouseOutStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse out the element.

  • HEATMAPMouseOutStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • HEATMAPMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of HEATMAP module

  • HEATMAPMouseUpColor

    default “green”, “none” means no change, element change color after mouse up the element

  • HEATMAPMouseUpOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • HEATMAPMouseUpStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse up the element.

  • HEATMAPMouseUpStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • HEATMAPMouseOverDisplay

    default true, [true/false], open/not open mouse mouse Over event of HEATMAP module

  • HEATMAPMouseOverColor

    default “none”, “none” means no change, element change color after mouse Over the element

  • HEATMAPMouseOverOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • HEATMAPMouseOverStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse Over the element.

  • HEATMAPMouseOverStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse Over the element.

BUBBLE module

(1)All configuration parameters

Here we show all the configuration parameters in BUBBLE module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - BUBBLE module
BUBBLEMouseEvent : true,
BUBBLEMouseClickDisplay : false,
BUBBLEMouseClickColor : "green",            //"none","red"
BUBBLEMouseClickOpacity : 1.0,            //"none",1.0
BUBBLEMouseClickStrokeColor : "non   e",  //"none","#F26223"
BUBBLEMouseClickStrokeWidth : "none",          //"none",3
BUBBLEMouseDownDisplay : false,
BUBBLEMouseDownColor : "green",            //"none","red"
BUBBLEMouseDownOpacity : 1.0,            //"none",1.0
BUBBLEMouseDownStrokeColor : "none",  //"none","#F26223"
BUBBLEMouseDownStrokeWidth : "none",          //"none",3
BUBBLEMouseEnterDisplay : false,
BUBBLEMouseEnterColor : "green",            //"none","red"
BUBBLEMouseEnterOpacity : 1.0,            //"none",1.0
BUBBLEMouseEnterStrokeColor : "none",  //"none","#F26223"
BUBBLEMouseEnterStrokeWidth : "none",          //"none",3
BUBBLEMouseLeaveDisplay : false,
BUBBLEMouseLeaveColor : "green",            //"none","red"
BUBBLEMouseLeaveOpacity : 1.0,            //"none",1.0
BUBBLEMouseLeaveStrokeColor : "none",  //"none","#F26223"
BUBBLEMouseLeaveStrokeWidth : "none",          //"none",3
BUBBLEMouseMoveDisplay : false,
BUBBLEMouseMoveColor : "green",            //"none","red"
BUBBLEMouseMoveOpacity : 1.0,            //"none",1.0
BUBBLEMouseMoveStrokeColor : "none",  //"none","#F26223"
BUBBLEMouseMoveStrokeWidth : "none",          //"none",3
BUBBLEMouseOutDisplay : false,
BUBBLEMouseOutAnimationTime : 500,
BUBBLEMouseOutColor : "green",            //"none","red"
BUBBLEMouseOutOpacity : 1.0,            //"none",1.0
BUBBLEMouseOutStrokeColor : "none",  //"none","#F26223"
BUBBLEMouseOutStrokeWidth : "none",          //"none",3
BUBBLEMouseUpDisplay : false,
BUBBLEMouseUpColor : "green",            //"none","red"
BUBBLEMouseUpOpacity : 1.0,            //"none",1.0
BUBBLEMouseUpStrokeColor : "none",  //"none","#F26223"
BUBBLEMouseUpStrokeWidth : "none",          //"none",3
BUBBLEMouseOverDisplay : false,
BUBBLEMouseOverColor : "none",            //"none","red"
BUBBLEMouseOverOpacity : 1.0,            //"none",1.0
BUBBLEMouseOverStrokeColor : "none",  //"none","#F26223"
BUBBLEMouseOverStrokeWidth : "none",          //"none",3
 });

(2)Configuration and examples

  • BUBBLEMouseEvent

    default true, [true/false], open/not open mouse event of BUBBLE module

Mouse click

  • BUBBLEMouseClickDisplay

    default false, [true/false], open/not open mouse click event of BUBBLE module

  • BUBBLEMouseClickColor

    default “green”, “none” means no change, element change color after click the element

  • BUBBLEMouseClickOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • BUBBLEMouseClickStrokeColor

    default “none”, “none” means no change, element change stroke color after click the element.

  • BUBBLEMouseClickStrokeWidth

    default “none”, “none” means no change, element change stroke width after click the element.

Mouse down

  • BUBBLEMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of BUBBLE module

  • BUBBLEMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • BUBBLEMouseDownOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • BUBBLEMouseDownStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse down the element.

  • BUBBLEMouseDownStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • BUBBLEMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of BUBBLE module

  • BUBBLEMouseEnterColor

    default “green”, “none” means no change, element change color after mouse enter the element

  • BUBBLEMouseEnterOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • BUBBLEMouseEnterStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse enter the element.

  • BUBBLEMouseEnterStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • BUBBLEMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of BUBBLE module

  • BUBBLEMouseLeaveColor

    default “green”, “none” means no change, element change color after mouse leave the element

  • BUBBLEMouseLeaveOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • BUBBLEMouseLeaveStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse leave the element.

  • BUBBLEMouseLeaveStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • BUBBLEMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of BUBBLE module

  • BUBBLEMouseMoveColor

    default “green”, “none” means no change, element change color after mouse move the element

  • BUBBLEMouseMoveOpacity

    default “none”, “none” means no change, element change opacity after mouse move the element

  • BUBBLEMouseMoveStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse move the element.

  • BUBBLEMouseMoveStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • BUBBLEMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of BUBBLE module

  • BUBBLEMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • BUBBLEMouseOutColor

    default “green”, “none” means no change, element change color after mouse out the element

  • BUBBLEMouseOutOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • BUBBLEMouseOutStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse out the element.

  • BUBBLEMouseOutStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • BUBBLEMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of BUBBLE module

  • BUBBLEMouseUpColor

    default “green”, “none” means no change, element change color after mouse up the element

  • BUBBLEMouseUpOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • BUBBLEMouseUpStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse up the element.

  • BUBBLEMouseUpStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • BUBBLEMouseOverDisplay

    default true, [true/false], open/not open mouse mouse Over event of BUBBLE module

  • BUBBLEMouseOverColor

    default “none”, “none” means no change, element change color after mouse Over the element

  • BUBBLEMouseOverOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • BUBBLEMouseOverStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse Over the element.

  • BUBBLEMouseOverStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse Over the element.

HISTOGRAM module

(1)All configuration parameters

Here we show all the configuration parameters in HISTOGRAM module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events - HISTOGRAM module
   HISTOGRAMMouseEvent : true,
   HISTOGRAMMouseClickDisplay : false,
   HISTOGRAMMouseClickColor : "red",            //"none","red"
   HISTOGRAMMouseClickOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseClickStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseClickStrokeWidth : "none",          //"none",3
   HISTOGRAMMouseDownDisplay : false,
   HISTOGRAMMouseDownColor : "red",            //"none","red"
   HISTOGRAMMouseDownOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseDownStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseDownStrokeWidth : "none",          //"none",3
   HISTOGRAMMouseEnterDisplay : false,
   HISTOGRAMMouseEnterColor : "red",            //"none","red"
   HISTOGRAMMouseEnterOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseEnterStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseEnterStrokeWidth : "none",          //"none",3
   HISTOGRAMMouseLeaveDisplay : false,
   HISTOGRAMMouseLeaveColor : "red",            //"none","red"
   HISTOGRAMMouseLeaveOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseLeaveStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseLeaveStrokeWidth : "none",          //"none",3
   HISTOGRAMMouseMoveDisplay : false,
   HISTOGRAMMouseMoveColor : "red",            //"none","red"
   HISTOGRAMMouseMoveOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseMoveStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseMoveStrokeWidth : "none",          //"none",3
   HISTOGRAMMouseOutDisplay : false,
   HISTOGRAMMouseOutAnimationTime : 500,
   HISTOGRAMMouseOutColor : "red",            //"none","red"
   HISTOGRAMMouseOutOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseOutStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseOutStrokeWidth : "none",          //"none",3
   HISTOGRAMMouseUpDisplay : false,
   HISTOGRAMMouseUpColor : "red",            //"none","red"
   HISTOGRAMMouseUpOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseUpStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseUpStrokeWidth : "none",          //"none",3
   HISTOGRAMMouseOverDisplay : false,
   HISTOGRAMMouseOverColor : "red",            //"none","red"
   HISTOGRAMMouseOverOpacity : 1.0,            //"none",1.0
   HISTOGRAMMouseOverStrokeColor : "none",  //"none","#F26223"
   HISTOGRAMMouseOverStrokeWidth : "none",          //"none",3
});

(2)Configuration and examples

  • HISTOGRAMMouseEvent

    default true, [true/false], open/not open mouse event of HISTOGRAM module

Mouse click

  • HISTOGRAMMouseClickDisplay

    default false, [true/false], open/not open mouse click event of HISTOGRAM module

  • HISTOGRAMMouseClickColor

    default “red”, “none” means no change, element change color after click the element

  • HISTOGRAMMouseClickOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • HISTOGRAMMouseClickStrokeColor

    default “none”, “none” means no change, element change stroke color after click the element.

  • HISTOGRAMMouseClickStrokeWidth

    default “none”, “none” means no change, element change stroke width after click the element.

Mouse down

  • HISTOGRAMMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of HISTOGRAM module

  • HISTOGRAMMouseDownColor

    default “red”, “none” means no change, element change color after mouse down the element

  • HISTOGRAMMouseDownOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • HISTOGRAMMouseDownStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse down the element.

  • HISTOGRAMMouseDownStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • HISTOGRAMMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of HISTOGRAM module

  • HISTOGRAMMouseEnterColor

    default “red”, “none” means no change, element change color after mouse enter the element

  • HISTOGRAMMouseEnterOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • HISTOGRAMMouseEnterStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse enter the element.

  • HISTOGRAMMouseEnterStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • HISTOGRAMMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of HISTOGRAM module

  • HISTOGRAMMouseLeaveColor

    default “red”, “none” means no change, element change color after mouse leave the element

  • HISTOGRAMMouseLeaveOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • HISTOGRAMMouseLeaveStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse leave the element.

  • HISTOGRAMMouseLeaveStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • HISTOGRAMMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of HISTOGRAM module

  • HISTOGRAMMouseMoveColor

    default “red”, “none” means no change, element change color after mouse move the element

  • HISTOGRAMMouseMoveOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • HISTOGRAMMouseMoveStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse move the element.

  • HISTOGRAMMouseMoveStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • HISTOGRAMMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of HISTOGRAM module

  • HISTOGRAMMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • HISTOGRAMMouseOutColor

    default “red”, “none” means no change, element change color after mouse out the element

  • HISTOGRAMMouseOutOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • HISTOGRAMMouseOutStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse out the element.

  • HISTOGRAMMouseOutStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • HISTOGRAMMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of HISTOGRAM module

  • HISTOGRAMMouseUpColor

    default “red”, “none” means no change, element change color after mouse up the element

  • HISTOGRAMMouseUpOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • HISTOGRAMMouseUpStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse up the element.

  • HISTOGRAMMouseUpStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • HISTOGRAMMouseOverDisplay

    default true, [true/false], open/not open mouse mouse Over event of HISTOGRAM module

  • HISTOGRAMMouseOverColor

    default “red”, “none” means no change, element change color after mouse Over the element

  • HISTOGRAMMouseOverOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • HISTOGRAMMouseOverStrokeColor

    default “none”, “none” means no change, element change stroke color after mouse Over the element.

  • HISTOGRAMMouseOverStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse Over the element.

LINE module

(1)All configuration parameters

Here we show all the configuration parameters in LINE module of Customize Events class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize events - LINE module
   LINEMouseEvent : true,
   LINEMouseClickDisplay : false,
   LINEMouseClickLineOpacity : 1,           //"none"
   LINEMouseClickLineStrokeColor : "red",   //"none"
   LINEMouseClickLineStrokeWidth : "none",  //"none"
   LINEMouseDownDisplay : false,
   LINEMouseDownLineOpacity : 1,           //"none"
   LINEMouseDownLineStrokeColor : "red",   //"none"
   LINEMouseDownLineStrokeWidth : "none",  //"none"
   LINEMouseEnterDisplay : false,
   LINEMouseEnterLineOpacity : 1,           //"none"
   LINEMouseEnterLineStrokeColor : "red",   //"none"
   LINEMouseEnterLineStrokeWidth : "none",  //"none"
   LINEMouseLeaveDisplay : false,
   LINEMouseLeaveLineOpacity : 1,           //"none"
   LINEMouseLeaveLineStrokeColor : "red",   //"none"
   LINEMouseLeaveLineStrokeWidth : "none",  //"none"
   LINEMouseMoveDisplay : false,
   LINEMouseMoveLineOpacity : 1,           //"none"
   LINEMouseMoveLineStrokeColor : "red",   //"none"
   LINEMouseMoveLineStrokeWidth : "none",  //"none"
   LINEMouseOutDisplay : false,
   LINEMouseOutAnimationTime : 500,
   LINEMouseOutLineOpacity : 1.0,   //"none"
   LINEMouseOutLineStrokeColor : "red",    //"none"
   LINEMouseOutLineStrokeWidth : "none",    //"none"
   LINEMouseUpDisplay : false,
   LINEMouseUpLineOpacity : 1,           //"none"
   LINEMouseUpLineStrokeColor : "red",   //"none"
   LINEMouseUpLineStrokeWidth : "none",  //"none"
   LINEMouseOverDisplay : false,
   LINEMouseOverLineOpacity : 1,           //"none"
   LINEMouseOverLineStrokeColor : "red",   //"none"
   LINEMouseOverLineStrokeWidth : "none",  //"none"
});

(2)Configuration and examples

  • LINEMouseEvent

    default true, [true/false], open/not open mouse event of LINE module

Mouse click

  • LINEMouseClickDisplay

    default false, [true/false], open/not open mouse click event of LINE module

  • LINEMouseClickLineOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • LINEMouseClickLineStrokeColor

    default “red”, “none” means no change, element change stroke color after click the element.

  • LINEMouseClickLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after click the element.

Mouse down

  • LINEMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of LINE module

  • LINEMouseDownLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • LINEMouseDownLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse down the element.

  • LINEMouseDownLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • LINEMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of LINE module

  • LINEMouseEnterLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • LINEMouseEnterLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse enter the element.

  • LINEMouseEnterLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • LINEMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of LINE module

  • LINEMouseLeaveLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • LINEMouseLeaveLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse leave the element.

  • LINEMouseLeaveLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • LINEMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of LINE module

  • LINEMouseMoveLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • LINEMouseMoveLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse move the element.

  • LINEMouseMoveLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • LINEMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of LINE module

  • LINEMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • LINEMouseOutLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • LINEMouseOutLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • LINEMouseOutLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • LINEMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of LINE module

  • LINEMouseUpLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • LINEMouseUpLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse up the element.

  • LINEMouseUpLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • LINEMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of LINE module

  • LINEMouseOverLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • LINEMouseOverLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse Over the element.

  • LINEMouseOverLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse Over the element.

WIG module

(1)All configuration parameters

Here we show all the configuration parameters in WIG module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - WIG module
WIGMouseEvent : true,
WIGMouseClickDisplay : false,
WIGMouseClickLineOpacity : 1,           //"none"
WIGMouseClickLineStrokeColor : "red",   //"none"
WIGMouseClickLineStrokeWidth : "none",  //"none"
WIGMouseClickFillColor :"none",
WIGMouseDownDisplay : false,
WIGMouseDownLineOpacity : 1,           //"none"
WIGMouseDownLineStrokeColor : "red",   //"none"
WIGMouseDownLineStrokeWidth : "none",  //"none"
WIGMouseDownFillColor :"none",
WIGMouseEnterDisplay : false,
WIGMouseEnterLineOpacity : 1,           //"none"
WIGMouseEnterLineStrokeColor : "red",   //"none"
WIGMouseEnterLineStrokeWidth : "none",  //"none"
WIGMouseEnterFillColor :"none",
WIGMouseLeaveDisplay : false,
WIGMouseLeaveLineOpacity : 1,           //"none"
WIGMouseLeaveLineStrokeColor : "red",   //"none"
WIGMouseLeaveLineStrokeWidth : "none",  //"none"
WIGMouseLeaveFillColor :"none",
WIGMouseMoveDisplay : false,
WIGMouseMoveLineOpacity : 1,           //"none"
WIGMouseMoveLineStrokeColor : "red",   //"none"
WIGMouseMoveLineStrokeWidth : "none",  //"none"
WIGMouseMoveFillColor :"none",
WIGMouseOutDisplay : false,
WIGMouseOutAnimationTime : 500,
WIGMouseOutLineOpacity : 1.0,   //"none"
WIGMouseOutLineStrokeColor : "red",    //"none"
WIGMouseOutLineStrokeWidth : "none",    //"none"
WIGMouseOutFillColor :"none",
WIGMouseUpDisplay : false,
WIGMouseUpLineOpacity : 1,           //"none"
WIGMouseUpLineStrokeColor : "red",   //"none"
WIGMouseUpLineStrokeWidth : "none",  //"none"
WIGMouseUpFillColor :"none",
WIGMouseOverDisplay : false,
WIGMouseOverLineOpacity : 1,           //"none"
WIGMouseOverLineStrokeColor : "red",   //"none"
WIGMouseOverLineStrokeWidth : "none",  //"none"
WIGMouseOverFillColor :"none",
 });

(2)Configuration and examples

  • WIGMouseEvent

    default true, [true/false], open/not open mouse event of WIG module

Mouse click

  • WIGMouseClickDisplay

    default false, [true/false], open/not open mouse click event of WIG module

  • WIGMouseClickLineOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • WIGMouseClickLineStrokeColor

    default “red”, “none” means no change, element change stroke color after click the element.

  • WIGMouseClickLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after click the element.

  • WIGMouseClickFillColor

    default “none”, “none” means no change, element change fill color after click the element.

Mouse down

  • WIGMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of WIG module

  • WIGMouseDownLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • WIGMouseDownLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse down the element.

  • WIGMouseDownLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse down the element.

  • WIGMouseDownFillColor

    default “none”, “none” means no change, element change fill color after mouse down the element.

Mouse enter

  • WIGMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of WIG module

  • WIGMouseEnterLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • WIGMouseEnterLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse enter the element.

  • WIGMouseEnterLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse enter the element.

  • WIGMouseEnterFillColor

    default “none”, “none” means no change, element change fill color after mouse enter the element.

Mouse leave

  • WIGMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of WIG module

  • WIGMouseLeaveLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • WIGMouseLeaveLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse leave the element.

  • WIGMouseLeaveLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse leave the element.

  • WIGMouseLeaveFillColor

    default “none”, “none” means no change, element change fill color after mouse leave the element.

Mouse move

  • WIGMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of WIG module

  • WIGMouseMoveLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • WIGMouseMoveLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse move the element.

  • WIGMouseMoveLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse move the element.

  • WIGMouseMoveFillColor

    default “none”, “none” means no change, element change fill color after mouse move the element.

Mouse out

  • WIGMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of WIG module

  • WIGMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • WIGMouseOutLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • WIGMouseOutLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • WIGMouseOutLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse out the element.

  • WIGMouseOutFillColor

    default “none”, “none” means no change, element change fill color after mouse out the element.

Mouse up

  • WIGMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of WIG module

  • WIGMouseUpLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • WIGMouseUpLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse up the element.

  • WIGMouseUpLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse up the element.

  • WIGMouseUpFillColor

    default “none”, “none” means no change, element change fill color after mouse up the element.

Mouse over

  • WIGMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of WIG module

  • WIGMouseOverLineOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • WIGMouseOverLineStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse Over the element.

  • WIGMouseOverLineStrokeWidth

    default “none”, “none” means no change, element change stroke width after mouse Over the element.

  • WIGMouseOverFillColor

    default “none”, “none” means no change, element change fill color after mouse over the element.

LOLLIPOP module

(1)All configuration parameters

Here we show all the configuration parameters in LOLLIPOP module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - LOLLIPOP module
LOLLIPOPMouseEvent : true,
LOLLIPOPMouseClickDisplay : false,
LOLLIPOPMouseClickColor : "red",
LOLLIPOPMouseClickCircleSize : 4,
LOLLIPOPMouseClickCircleOpacity : 1.0,
LOLLIPOPMouseClickCircleStrokeColor : "#F26223",
LOLLIPOPMouseClickCircleStrokeWidth : 0,
LOLLIPOPMouseClickTextFromData : "fourth",
LOLLIPOPMouseClickTextOpacity : 1,
LOLLIPOPMouseClickTextColor : "red",
LOLLIPOPMouseClickTextSize : 8,
LOLLIPOPMouseClickTextPostionX : 1.0,
LOLLIPOPMouseClickTextPostionY : 10.0,
LOLLIPOPMouseClickTextDrag : true,
LOLLIPOPMouseDownDisplay : false,
LOLLIPOPMouseDownColor : "green",
LOLLIPOPMouseDownCircleSize : 4,
LOLLIPOPMouseDownCircleOpacity : 1.0,
LOLLIPOPMouseDownCircleStrokeColor : "#F26223",
LOLLIPOPMouseDownCircleStrokeWidth : 0,
LOLLIPOPMouseEnterDisplay : false,
LOLLIPOPMouseEnterColor : "yellow",
LOLLIPOPMouseEnterCircleSize : 4,
LOLLIPOPMouseEnterCircleOpacity : 1.0,
LOLLIPOPMouseEnterCircleStrokeColor : "#F26223",
LOLLIPOPMouseEnterCircleStrokeWidth : 0,
LOLLIPOPMouseLeaveDisplay : false,
LOLLIPOPMouseLeaveColor : "pink",
LOLLIPOPMouseLeaveCircleSize : 4,
LOLLIPOPMouseLeaveCircleOpacity : 1.0,
LOLLIPOPMouseLeaveCircleStrokeColor : "#F26223",
LOLLIPOPMouseLeaveCircleStrokeWidth : 0,
LOLLIPOPMouseMoveDisplay : false,
LOLLIPOPMouseMoveColor : "red",
LOLLIPOPMouseMoveCircleSize : 2,
LOLLIPOPMouseMoveCircleOpacity : 1.0,
LOLLIPOPMouseMoveCircleStrokeColor : "#F26223",
LOLLIPOPMouseMoveCircleStrokeWidth : 0,
LOLLIPOPMouseOutDisplay : false,
LOLLIPOPMouseOutAnimationTime : 500,
LOLLIPOPMouseOutColor : "red",
LOLLIPOPMouseOutCircleSize : 2,
LOLLIPOPMouseOutCircleOpacity : 1.0,
LOLLIPOPMouseOutCircleStrokeColor : "red",
LOLLIPOPMouseOutCircleStrokeWidth : 0,
LOLLIPOPMouseUpDisplay : false,
LOLLIPOPMouseUpColor : "grey",
LOLLIPOPMouseUpCircleSize : 4,
LOLLIPOPMouseUpCircleOpacity : 1.0,
LOLLIPOPMouseUpCircleStrokeColor : "#F26223",
LOLLIPOPMouseUpCircleStrokeWidth : 0,
LOLLIPOPMouseOverDisplay : false,
LOLLIPOPMouseOverColor : "red",
LOLLIPOPMouseOverCircleSize : 2,
LOLLIPOPMouseOverCircleOpacity : 1.0,
LOLLIPOPMouseOverCircleStrokeColor : "#F26223",
LOLLIPOPMouseOverCircleStrokeWidth : 3,
 });

(2)Configuration and examples

  • LOLLIPOPMouseEvent

    default true, [true/false], open/not open mouse event of LOLLIPOP module

Mouse click

  • LOLLIPOPMouseClickDisplay

    default true, [true/false], open/not open mouse click event of LOLLIPOP module

  • LOLLIPOPMouseClickColor

    default “red”, “none” means no change, element change color after click the element

  • LOLLIPOPMouseClickCircleSize

    default 4, “none” means no change, element change circle size after click the element.

  • LOLLIPOPMouseClickCircleOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • LOLLIPOPMouseClickCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after click the element.

  • LOLLIPOPMouseClickCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after click the element.

  • LOLLIPOPMouseClickTextFromData

    default “fourth”, first,second,third,fourth column data click to show

  • LOLLIPOPMouseClickTextOpacity

    default 1.0, text opacity after click the element

  • LOLLIPOPMouseClickTextColor

    default “red”, text color after click the element

  • LOLLIPOPMouseClickTextSize

    default 8, text size after click the element

  • LOLLIPOPMouseClickTextPostionX

    default 1.0, text x position after click the element

  • LOLLIPOPMouseClickTextPostionY

    default 10.0, text y position after click the element

  • LOLLIPOPMouseClickTextDrag

    default true, [true/false], open/not open text drag function

Mouse down

  • LOLLIPOPMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of LOLLIPOP module

  • LOLLIPOPMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • LOLLIPOPMouseDownCircleSize

    default 4, “none” means no change, element change circle size after mouse down the element.

  • LOLLIPOPMouseDownCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • LOLLIPOPMouseDownCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse down the element.

  • LOLLIPOPMouseDownCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • LOLLIPOPMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of LOLLIPOP module

  • LOLLIPOPMouseEnterColor

    default “yellow”, “none” means no change, element change color after mouse enter the element

  • LOLLIPOPMouseEnterCircleSize

    default 4, “none” means no change, element change circle size after mouse enter the element.

  • LOLLIPOPMouseEnterCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • LOLLIPOPMouseEnterCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse enter the element.

  • LOLLIPOPMouseEnterCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • LOLLIPOPMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of LOLLIPOP module

  • LOLLIPOPMouseLeaveColor

    default “pink”, “none” means no change, element change color after mouse leave the element

  • LOLLIPOPMouseLeaveCircleSize

    default 4, “none” means no change, element change circle size after mouse leave the element.

  • LOLLIPOPMouseLeaveCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • LOLLIPOPMouseLeaveCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse leave the element.

  • LOLLIPOPMouseLeaveCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • LOLLIPOPMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of LOLLIPOP module

  • LOLLIPOPMouseMoveColor

    default “red”, “none” means no change, element change color after mouse move the element

  • LOLLIPOPMouseMoveCircleSize

    default 2, “none” means no change, element change circle size after mouse move the element.

  • LOLLIPOPMouseMoveCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • LOLLIPOPMouseMoveCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse move the element.

  • LOLLIPOPMouseMoveCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • LOLLIPOPMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of LOLLIPOP module

  • LOLLIPOPMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • LOLLIPOPMouseOutColor

    default “red”, “none” means no change, element change color after mouse out the element

  • LOLLIPOPMouseOutCircleSize

    default 2, “none” means no change, element change circle size after mouse out the element.

  • LOLLIPOPMouseOutCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • LOLLIPOPMouseOutCircleStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • LOLLIPOPMouseOutCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • LOLLIPOPMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of LOLLIPOP module

  • LOLLIPOPMouseUpColor

    default “grey”, “none” means no change, element change color after mouse up the element

  • LOLLIPOPMouseUpCircleSize

    default 4, “none” means no change, element change circle size after mouse up the element.

  • LOLLIPOPMouseUpCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • LOLLIPOPMouseUpCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse up the element.

  • LOLLIPOPMouseUpCircleStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • LOLLIPOPMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of LOLLIPOP module

  • LOLLIPOPMouseOverColor

    default “red”, “none” means no change, element change color after mouse Over the element

  • LOLLIPOPMouseOverCircleSize

    default 2, “none” means no change, element change circle size after mouse Over the element.

  • LOLLIPOPMouseOverCircleOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • LOLLIPOPMouseOverCircleStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse Over the element.

  • LOLLIPOPMouseOverCircleStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse Over the element.

GENE module

(1)All configuration parameters

Here we show all the configuration parameters in GENE module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - GENE module
GENEMouseEvent : true,
GENEMouseClickDisplay : false,
GENEMouseClickColor : "red",
GENEMouseClickArcOpacity : 1.0,
GENEMouseClickArcStrokeColor : "#F26223",
GENEMouseClickArcStrokeWidth : 1,
GENEMouseClickTextFromData : "fourth",
GENEMouseClickTextOpacity : 1,
GENEMouseClickTextColor : "red",
GENEMouseClickTextSize : 8,
GENEMouseClickTextPostionX : 0,
GENEMouseClickTextPostionY : 0,
GENEMouseClickTextDrag : true,
GENEMouseDownDisplay : false,
GENEMouseDownColor : "green",
GENEMouseDownArcOpacity : 1.0,
GENEMouseDownArcStrokeColor : "#F26223",
GENEMouseDownArcStrokeWidth : 0,
GENEMouseEnterDisplay : false,
GENEMouseEnterColor : "yellow",
GENEMouseEnterArcOpacity : 1.0,
GENEMouseEnterArcStrokeColor : "#F26223",
GENEMouseEnterArcStrokeWidth : 0,
GENEMouseLeaveDisplay : false,
GENEMouseLeaveColor : "pink",
GENEMouseLeaveArcOpacity : 1.0,
GENEMouseLeaveArcStrokeColor : "#F26223",
GENEMouseLeaveArcStrokeWidth : 0,
GENEMouseMoveDisplay : false,
GENEMouseMoveColor : "red",
GENEMouseMoveArcOpacity : 1.0,
GENEMouseMoveArcStrokeColor : "#F26223",
GENEMouseMoveArcStrokeWidth : 0,
GENEMouseOutDisplay : false,
GENEMouseOutAnimationTime : 500,
GENEMouseOutColor : "red",
GENEMouseOutArcOpacity : 1.0,
GENEMouseOutArcStrokeColor : "red",
GENEMouseOutArcStrokeWidth : 0,
GENEMouseUpDisplay : false,
GENEMouseUpColor : "grey",
GENEMouseUpArcOpacity : 1.0,
GENEMouseUpArcStrokeColor : "#F26223",
GENEMouseUpArcStrokeWidth : 0,
GENEMouseOverDisplay : false,
GENEMouseOverColor : "red",
GENEMouseOverArcOpacity : 1.0,
GENEMouseOverArcStrokeColor : "#F26223",
GENEMouseOverArcStrokeWidth : 3,
 });

(2)Configuration and examples

  • GENEMouseEvent

    default false, [true/false], open/not open mouse event of GENE module

Mouse click

  • GENEMouseClickDisplay

    default true, [true/false], open/not open mouse click event of GENE module

  • GENEMouseClickColor

    default “red”, “none” means no change, element change color after click the element

  • GENEMouseClickArcOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • GENEMouseClickArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after click the element.

  • GENEMouseClickArcStrokeWidth

    default 1, “none” means no change, element change stroke width after click the element.

  • GENEMouseClickTextFromData

    default “fourth”, first,second,third,fourth column data click to show

  • GENEMouseClickTextOpacity

    default 1.0, text opacity after click the element

  • GENEMouseClickTextColor

    default “red”, text color after click the element

  • GENEMouseClickTextSize

    default 8, text size after click the element

  • GENEMouseClickTextPostionX

    default 0, text x position after click the element

  • GENEMouseClickTextPostionY

    default 0, text y position after click the element

  • GENEMouseClickTextDrag

    default true, [true/false], open/not open text drag function

Mouse down

  • GENEMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of GENE module

  • GENEMouseDownColor

    default “green”, “none” means no change, element change color after mouse down the element

  • GENEMouseDownArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • GENEMouseDownArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse down the element.

  • GENEMouseDownArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • GENEMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of GENE module

  • GENEMouseEnterColor

    default “yellow”, “none” means no change, element change color after mouse enter the element

  • GENEMouseEnterArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • GENEMouseEnterArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse enter the element.

  • GENEMouseEnterArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • GENEMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of GENE module

  • GENEMouseLeaveColor

    default “pink”, “none” means no change, element change color after mouse leave the element

  • GENEMouseLeaveArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • GENEMouseLeaveArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse leave the element.

  • GENEMouseLeaveArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • GENEMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of GENE module

  • GENEMouseMoveColor

    default “red”, “none” means no change, element change color after mouse move the element

  • GENEMouseMoveArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • GENEMouseMoveArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse move the element.

  • GENEMouseMoveArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • GENEMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of GENE module

  • GENEMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • GENEMouseOutColor

    default “red”, “none” means no change, element change color after mouse out the element

  • GENEMouseOutArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • GENEMouseOutArcStrokeColor

    default “red”, “none” means no change, element change stroke color after mouse out the element.

  • GENEMouseOutArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • GENEMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of GENE module

  • GENEMouseUpColor

    default “grey”, “none” means no change, element change color after mouse up the element

  • GENEMouseUpArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • GENEMouseUpArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse up the element.

  • GENEMouseUpArcStrokeWidth

    default 0, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • GENEMouseOverDisplay

    default false, [true/false], open/not open mouse mouse Over event of GENE module

  • GENEMouseOverColor

    default “red”, “none” means no change, element change color after mouse Over the element

  • GENEMouseOverArcOpacity

    default 1.0, “none” means no change, element change opacity after mouse Over the element

  • GENEMouseOverArcStrokeColor

    default “#F26223”, “none” means no change, element change stroke color after mouse Over the element.

  • GENEMouseOverArcStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse Over the element.

CHORD module

(1)All configuration parameters

Here we show all the configuration parameters in CHORD module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - CHORD module
CHORDMouseEvent : true,
CHORDMouseFillColorExcluded:"#FFFFFF",
CHORDMouseClickDisplay : false,
CHORDMouseClickOpacity : 1.0,
CHORDMouseClickStrokeColor : "green",
CHORDMouseClickStrokeWidth : 4,
CHORDMouseDownDisplay : false,
CHORDMouseDownOpacity : 1.0,
CHORDMouseDownStrokeColor : "#F26223",
CHORDMouseDownStrokeWidth : 4,
CHORDMouseEnterDisplay : false,
CHORDMouseEnterOpacity : 1.0,
CHORDMouseEnterStrokeColor : "#F26223",
CHORDMouseEnterStrokeWidth : 4,
CHORDMouseLeaveDisplay : false,
CHORDMouseLeaveOpacity : 1.0,
CHORDMouseLeaveStrokeColor : "#F26223",
CHORDMouseLeaveStrokeWidth : 4,
CHORDMouseMoveDisplay : false,
CHORDMouseMoveOpacity : 1.0,
CHORDMouseMoveStrokeColor : "#F26223",
CHORDMouseMoveStrokeWidth : 4,
CHORDMouseOutDisplay : false,
CHORDMouseOutAnimationTime : 500,
CHORDMouseOutOpacity : 1.0,
CHORDMouseOutStrokeColor : "red",
CHORDMouseOutStrokeWidth : 4,
CHORDMouseUpDisplay : false,
CHORDMouseUpOpacity : 1.0,
CHORDMouseUpStrokeColor : "#F26223",
CHORDMouseOverDisplay : false,
CHORDMouseOverOpacity : 1.0,
CHORDMouseOverStrokeColor : "#F26223",
CHORDMouseOverStrokeWidth : 3,
CHORDMouseUpStrokeWidth : 4,
 });

(2)Configuration and examples

  • CHORDMouseEvent

    default true, [true/false], open/not open mouse event of CHORD module

  • CHORDMouseFillColorExcluded

    default “#FFFFFF”, if the fill color of this chord match this parameter, this chord will be excluded from the mouse event.

Mouse click

  • CHORDMouseClickDisplay

    default true, [true/false], open/not open mouse click event of CHORD module

  • CHORDMouseClickOpacity

    default 1.0, “none” means no change, element change opacity after click the element

  • CHORDMouseClickStrokeColor

    default “green”, “none” means no change, element change color after click the element

  • CHORDMouseClickStrokeWidth

    default 4, “none” means no change, element change stroke width after click the element.

Mouse down

  • CHORDMouseDownDisplay

    default false, [true/false], open/not open mouse mouse down event of CHORD module

  • CHORDMouseDownOpacity

    default 1.0, “none” means no change, element change opacity after mouse down the element

  • CHORDMouseDownStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse down the element

  • CHORDMouseDownStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse down the element.

Mouse enter

  • CHORDMouseEnterDisplay

    default false, [true/false], open/not open mouse mouse enter event of CHORD module

  • CHORDMouseEnterOpacity

    default 1.0, “none” means no change, element change opacity after mouse enter the element

  • CHORDMouseEnterStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse enter the element

  • CHORDMouseEnterStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse enter the element.

Mouse leave

  • CHORDMouseLeaveDisplay

    default false, [true/false], open/not open mouse mouse leave event of CHORD module

  • CHORDMouseLeaveOpacity

    default 1.0, “none” means no change, element change opacity after mouse leave the element

  • CHORDMouseLeaveStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse leave the element

  • CHORDMouseLeaveStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse leave the element.

Mouse move

  • CHORDMouseMoveDisplay

    default false, [true/false], open/not open mouse mouse move event of CHORD module

  • CHORDMouseMoveOpacity

    default 1.0, “none” means no change, element change opacity after mouse move the element

  • CHORDMouseMoveStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse move the element

  • CHORDMouseMoveStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse move the element.

Mouse out

  • CHORDMouseOutDisplay

    default false, [true/false], open/not open mouse mouse out event of CHORD module

  • CHORDMouseOutAnimationTime

    default 500, animation time after mouse out the element

  • CHORDMouseOutOpacity

    default 1.0, “none” means no change, element change opacity after mouse out the element

  • CHORDMouseOutStrokeColor

    default “red”, “none” means no change, element change color after mouse out the element

  • CHORDMouseOutStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse out the element.

Mouse up

  • CHORDMouseUpDisplay

    default false, [true/false], open/not open mouse mouse up event of CHORD module

  • CHORDMouseUpOpacity

    default 1.0, “none” means no change, element change opacity after mouse up the element

  • CHORDMouseUpStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse up the element

  • CHORDMouseUpStrokeWidth

    default 4, “none” means no change, element change stroke width after mouse up the element.

Mouse over

  • CHORDMouseOverDisplay

    default true, [true/false], open/not open mouse mouse over event of CHORD module

  • CHORDMouseOverOpacity

    default 1.0, “none” means no change, element change opacity after mouse over the element

  • CHORDMouseOverStrokeColor

    default “#F26223”, “none” means no change, element change color after mouse over the element

  • CHORDMouseOverStrokeWidth

    default 3, “none” means no change, element change stroke width after mouse over the element.

REDIRECT module

(1)All configuration parameters

Here we show all the configuration parameters in REDIRECT module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - REDIRECT module
SNPxlink: false,
GENExlink: false,
LOLLIPOPxlink: false,
HISTOGRAMxlink: false,
ARCxlink: false,
CNVxlink: false,
SCATTERxlink: false,
BUBBLExlink:false,
 });

(2)Configuration and examples

  • SNPxlink

    default false, [true/false], add/not xlink for SNP module

  • GENExlink

    default false, [true/false], add/not xlink for GENE module

  • LOLLIPOPxlink

    default false, [true/false], add/not xlink for LOLLIPOP module

  • HISTOGRAMxlink

    default false, [true/false], add/not xlink for HISTOGRAM module

  • ARCxlink

    default false, [true/false], add/not xlink for ARC module

  • CNVxlink

    default false, [true/false], add/not xlink for CNV module

  • SCATTERxlink

    default false, [true/false], add/not xlink for SCATTER module

  • BUBBLExlink

    default false, [true/false], add/not xlink for BUBBLE module

COMPARE module

(1)All configuration parameters

Here we show all the configuration parameters in COMPARE module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - COMPARE module
compareEvent:false,
compareEventGroupGapRate:0.1,
compareEventGroupDistance:0,
 });

(2)Configuration and examples

  • compareEvent

    default false, [true/false], open/not COMPARE module

  • compareEventGroupGapRate

    default 0.1, control the two-side gap rate on each group of genome

  • compareEventGroupDistance

    default 0, distance between two groups of genome

COMBINATION module

(1)All configuration parameters

Here we show all the configuration parameters in COMBINATION module of Customize Events class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize events - COMBINATION module
SNPMouseCombinationEvent :false,
SNPMouseCombinationImageDisplay :false,
SNPMouseCombinationImageTitle :"This is image",
SNPMouseCombinationImageTitleSize :5,
SNPMouseCombinationImageTitleWeight :"bold",
SNPMouseCombinationImageTitleColor :"black",
SNPMouseCombinationImagePositionX :0,
SNPMouseCombinationImagePositionY :0,
SNPMouseCombinationImageHeight :200,
SNPMouseCombinationImageWidth :300,
SNPMouseCombinationGraphDisplay :false,
SNPMouseCombinationGraphTitle :"This is graph",
SNPMouseCombinationGraphTitleSize :5,
SNPMouseCombinationGraphTitleWeight :"bold",
SNPMouseCombinationGraphTitleColor :"black",
SNPMouseCombinationGraphType :"histogram",   //histogram, pie, line
SNPMouseCombinationGraphPositionX :0,
SNPMouseCombinationGraphPositionY :0,
SNPMouseCombinationGraphHeight :200,
SNPMouseCombinationGraphWidth :300,
SNPMouseCombinationGraphHistogramBarColor :"blue",
SNPMouseCombinationGraphHistogramPadding :30,
SNPMouseCombinationGraphHistogramPositionCorrectX :0,
SNPMouseCombinationGraphPieAutoColor :true,
SNPMouseCombinationGraphPieColor :["black","blue","orange","red","green"],
SNPMouseCombinationGraphPieSize :50,
SNPMouseCombinationGraphPieStroke :true,
SNPMouseCombinationGraphPieStrokeColor :"black",
SNPMouseCombinationGraphPieStrokeWidth :1,
SNPMouseCombinationGraphPieOpacity :1.0,
SNPMouseCombinationGraphLineType :"linear",
SNPMouseCombinationGraphLineColor :"black",
SNPMouseCombinationGraphLineWidth :1,
SNPMouseCombinationGraphLinePoint :false,
SNPMouseCombinationGraphLinePointSize :5,
SNPMouseCombinationGraphLinePointAutoColor :true,
SNPMouseCombinationGraphLinePointColor :["black","blue","orange","red","green"],
SNPMouseCombinationGraphLinePointStroke :true,
SNPMouseCombinationGraphLinePointStrokeColor :"black",
SNPMouseCombinationGraphLinePointStrokeWidth :1,
SNPMouseCombinationGraphLinePointOpacity :1,
SNPMouseCombinationGraphLinePositionCorrectX :0,
SNPMouseCombinationTextDisplay :false,
SNPMouseCombinationTextColor :"red",
SNPMouseCombinationTextSize :3,
SNPMouseCombinationTextWeight :"bold",
SNPMouseCombinationTextPositionCorrectX :0,
SNPMouseCombinationTextPositionCorrectY :0,
 });

(2)Configuration and examples

  • SNPMouseCombinationEvent

    default false, [true/false], open/not COMBINATION module for SNP module

Image

  • SNPMouseCombinationImageDisplay

    default false, [true/false], open/not image display in COMBINATION module for SNP module

  • SNPMouseCombinationImageTitle

    default “This is image”, title of the image

  • SNPMouseCombinationImageTitleSize

    default 5, size of the title

  • SNPMouseCombinationImageTitleWeight

    default “bold”, weight of title

  • SNPMouseCombinationImageTitleColor

    default “black”, color of title

  • SNPMouseCombinationImagePositionX

    default 0, the X axis position of image

  • SNPMouseCombinationImagePositionY

    default 0, the Y axis position of image

  • SNPMouseCombinationImageHeight

    default 200, the height of image

  • SNPMouseCombinationImageWidth

    default 300, the Width of image

Image

  • SNPMouseCombinationGraphDisplay

    default false, [true/false], open/not graph display in COMBINATION module for SNP module

  • SNPMouseCombinationGraphTitle

    default “This is graph”, title of the graph

  • SNPMouseCombinationGraphTitleSize

    default 5, size of the title

  • SNPMouseCombinationGraphTitleWeight

    default “bold”, weight of title

  • SNPMouseCombinationGraphTitleColor

    default “black”, color of title

  • SNPMouseCombinationGraphType

    default “histogram”, [histogram/pie/line], type of graph

  • SNPMouseCombinationGraphPositionX

    default 0, the X axis position of graph

  • SNPMouseCombinationGraphPositionY

    default 0, the Y axis position of graph

  • SNPMouseCombinationGraphHeight

    default 200, the height of graph

  • SNPMouseCombinationGraphWidth

    default 300, the Width of graph

  • SNPMouseCombinationGraphHistogramBarColor

    default “blue”, the bar color of histogram graph

  • SNPMouseCombinationGraphHistogramPadding

    default 30, the padding between bar of histogram graph

  • SNPMouseCombinationGraphHistogramPositionCorrectX

    default 0, the correction distance of X axis in histogram

  • SNPMouseCombinationGraphPieAutoColor

    default true, [true/false], whether use auto color for pie graph or not

  • SNPMouseCombinationGraphPieColor

    default [“black”,”blue”,”orange”,”red”,”green”], the color for pie graph if auto color is false

  • SNPMouseCombinationGraphPieSize

    default 50, the size of pie graph

  • SNPMouseCombinationGraphPieStroke

    default true, [true/false], whether each pie has a stroke or not

  • SNPMouseCombinationGraphPieStrokeColor

    default “black”, the color of stroke in pie

  • SNPMouseCombinationGraphPieStrokeWidth

    default 1, the width of stroke in pie

  • SNPMouseCombinationGraphPieOpacity

    default 1.0, the opacity of pie

  • SNPMouseCombinationGraphLineType

    default “linear”, the line type for line graph

  • SNPMouseCombinationGraphLineColor

    default “black”, the color of line in line graph

  • SNPMouseCombinationGraphLineWidth

    default 1, the width of line in line graph

  • SNPMouseCombinationGraphLinePoint

    default false, [true/false], whether display the broken point in line graph

  • SNPMouseCombinationGraphLinePointSize

    default 5, the size of broken point

  • SNPMouseCombinationGraphLinePointAutoColor

    default true, [true/false], whether display the broken point in auto color

  • SNPMouseCombinationGraphLinePointColor

    default [“black”,”blue”,”orange”,”red”,”green”], the color for broken point if auto color is false

  • SNPMouseCombinationGraphLinePointStroke

    default true, [true/false], whether display the broken point stroke

  • SNPMouseCombinationGraphLinePointStrokeColor

    default “black”, the stroke color for broken point

  • SNPMouseCombinationGraphLinePointStrokeWidth

    default 1, the stroke width for broken point

  • SNPMouseCombinationGraphLinePointOpacity

    default 1, the opacity for broken point

  • SNPMouseCombinationGraphLinePositionCorrectX

    default 0, the correction distance of X axis for line

  • SNPMouseCombinationTextDisplay

    default false, [true/false], whether display the text

  • SNPMouseCombinationTextColor

    default “red”, the color for text

  • SNPMouseCombinationTextSize

    default 3, the size of text

  • SNPMouseCombinationTextWeight

    default “bold”, the weight of text

  • SNPMouseCombinationGraphLinePositionCorrectX

    default 0, the correction distance of X axis for text

  • SNPMouseCombinationGraphLinePositionCorrectY

    default 0, the correction distance of Y axis for text

5.4 Customize Tooltips

Note that for the modules containing tooltips function, MouseoverTooltipsHtml and a parameter in data row called html are available when the MouseOverTooltipsSetting is set to “custom”.

SNP module

(1)All configuration parameters

Here we show all the configuration parameters in SNP module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - SNP module
   SNPMouseOverTooltipsSetting :"style1",
   SNPMouseOverTooltipsHtml : " ",
   SNPMouseOverTooltipsPosition : "absolute",
   SNPMouseOverTooltipsBackgroundColor : "white",
   SNPMouseOverTooltipsBorderStyle : "solid",
   SNPMouseOverTooltipsBorderWidth : 0,
   SNPMouseOverTooltipsPadding : "3px",
   SNPMouseOverTooltipsBorderRadius : "3px",
   SNPMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • SNPMouseOverTooltipsSetting

    default “style1”

  • SNPMouseOverTooltipsHtml

    default ” “

Example: change the tooltips content of SNP module

Example

Before

After

Code change

SNPMouseOverTooltipsSetting :"style1",
SNPMouseOverTooltipsSetting :"custom",
{chr: "EGFR", pos: "813" , value: "21", des: "G,T,L/R",html:"Gene : EGFR <br>Position(AA) : 813 <br>Sample number : 21 <br>Mutation information : G,T,L/R"},
{chr: "EGFR", pos: "805" , value: "21", des: "G,T,L/R",html:"Gene : EGFR <br>Position(AA) : 805 <br>Sample number : 21 <br>Mutation information : G,T,L/R"},
{chr: "EGFR", pos: "858" , value: "21", des: "G,T,L/R",html:"Gene : EGFR <br>Position(AA) : 858 <br>Sample number : 21 <br>Mutation information : G,T,L/R"},
{chr: "EGFR", pos: "598" , value: "17", des: "T,G,G/V",html:"Gene : EGFR <br>Position(AA) : 598 <br>Sample number : 17 <br>Mutation information : T,G,G/V"},
{chr: "EGFR", pos: "553" , value: "17", des: "T,G,G/V",html:"Gene : EGFR <br>Position(AA) : 553 <br>Sample number : 17 <br>Mutation information : T,G,G/V"},
{chr: "EGFR", pos: "545" , value: "17", des: "T,G,G/V",html:"Gene : EGFR <br>Position(AA) : 545 <br>Sample number : 17 <br>Mutation information : T,G,G/V"},
{chr: "EGFR", pos: "598" , value: "17", des: "T,G,G/V",html:"Gene : EGFR <br>Position(AA) : 598 <br>Sample number : 17 <br>Mutation information : T,G,G/V"},
{chr: "EGFR", pos: "289" , value: "16", des: "T,C,A/V",html:"Gene : EGFR <br>Position(AA) : 289 <br>Sample number : 16 <br>Mutation information : T,C,A/V"},
{chr: "EGFR", pos: "236" , value: "16", des: "T,C,A/V",html:"Gene : EGFR <br>Position(AA) : 236 <br>Sample number : 16 <br>Mutation information : T,C,A/V"},
{chr: "EGFR", pos: "289" , value: "16", des: "T,C,A/V",html:"Gene : EGFR <br>Position(AA) : 289 <br>Sample number : 16 <br>Mutation information : T,C,A/V"},
{chr: "EGFR", pos: "244" , value: "16", des: "T,C,A/V",html:"Gene : EGFR <br>Position(AA) : 244 <br>Sample number : 16 <br>Mutation information : T,C,A/V"},
{chr: "EGFR", pos: "692" , value: "7", des: "-,GGAATTAAGAGAAGC,KELREA/K",html:"Gene : EGFR <br>Position(AA) : 692 <br>Sample number : 7 <br>Mutation information : -,GGAATTAAGAGAAGC,KELREA/K"},
{chr: "EGFR", pos: "745" , value: "7", des: "-,GGAATTAAGAGAAGC,KELREA/K",html:"Gene : EGFR <br>Position(AA) : 745 <br>Sample number : 7 <br>Mutation information : -,GGAATTAAGAGAAGC,KELREA/K"},
{chr: "EGFR", pos: "700" , value: "7", des: "-,GGAATTAAGAGAAGC,KELREA/K",html:"Gene : EGFR <br>Position(AA) : 700 <br>Sample number : 7 <br>Mutation information : -,GGAATTAAGAGAAGC,KELREA/K"},
{chr: "EGFR", pos: "244" , value: "6", des: "A,G,A/T",html:"Gene : EGFR <br>Position(AA) : 244 <br>Sample number : 6 <br>Mutation information : A,G,A/T"},
{chr: "EGFR", pos: "289" , value: "6", des: "A,G,A/T",html:"Gene : EGFR <br>Position(AA) : 289 <br>Sample number : 6 <br>Mutation information : A,G,A/T"},

Image change

alternate text alternate text

Tooltips style

  • SNPMouseOverTooltipsPosition

    default “absolute”

  • SNPMouseOverTooltipsBackgroundColor

    default “white”

  • SNPMouseOverTooltipsBorderStyle

    default “solid”

  • SNPMouseOverTooltipsBorderWidth

    default 0

  • SNPMouseOverTooltipsPadding

    default “3px”

  • SNPMouseOverTooltipsBorderRadius

    default “3px”

  • SNPMouseOverTooltipsOpacity

    default 0.8

Example: change the tooltips style of SNP module

Example

Before

After

Code change

SNPMouseOverTooltipsBorderWidth : 0,
SNPMouseOverTooltipsPadding : "3px",
SNPMouseOverTooltipsBorderRadius : "3px",
SNPMouseOverTooltipsOpacity : 1,
SNPMouseOverTooltipsBorderWidth : 1,
SNPMouseOverTooltipsPadding : "5px",
SNPMouseOverTooltipsBorderRadius : "10px",
SNPMouseOverTooltipsOpacity : 0.8,

Image change

alternate text alternate text

SCATTER module

(1)All configuration parameters

Here we show all the configuration parameters in SCATTER module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - SCATTER module
   SCATTERMouseOverTooltipsSetting :"style1",
   SCATTERMouseOverTooltipsHtml : " ",
   SCATTERMouseOverTooltipsPosition : "absolute",
   SCATTERMouseOverTooltipsBackgroundColor : "white",
   SCATTERMouseOverTooltipsBorderStyle : "solid",
   SCATTERMouseOverTooltipsBorderWidth : 0,
   SCATTERMouseOverTooltipsPadding : "3px",
   SCATTERMouseOverTooltipsBorderRadius : "3px",
   SCATTERMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • SCATTERMouseOverTooltipsSetting

    default “style1”

  • SCATTERMouseOverTooltipsHtml

    default ” “

Example: change the tooltips content of SCATTER module

Example

Before

After

Code change

SCATTERMouseOverTooltipsSetting :"style1",
SCATTERMouseOverTooltipsHtml : " ",
SCATTERMouseOverTooltipsSetting :"custom",
{chr: "1", start: "1102484", end: "1102578", name: "hsa-mir-200b", des: "breast cancer",html:"chr : 1 <br>start : 1102484 <br>end : 1102578 <br>name : hsa-mir-200b <br>cancer type : breast cancer"},
{chr: "11", start: "122017230", end: "122017301", name: "hsa-let-7a-2", des: "ovarian cancer",html:"chr : 11 <br>start : 122017230 <br>end : 122017301 <br>name : hsa-let-7a-2 <br>cancer type : ovarian cancer"},
{chr: "22", start: "46508629", end: "46508702", name: "hsa-let-7a-3", des: "leukemia cancer",html:"chr : 22 <br>start : 46508629 <br>end : 46508702 <br>name : hsa-let-7a-3 <br>cancer type : leukemia cancer"},
{chr: "14", start: "101349316", end: "101349412", name: "hsa-mir-127", des: "breast cancer",html:"chr : 14 <br>start : 101349316 <br>end : 101349412 <br>name : hsa-mir-127 <br>cancer type : breast cancer"},

Image change

alternate text alternate text

Tooltips style

  • SCATTERMouseOverTooltipsPosition

    default “absolute”

  • SCATTERMouseOverTooltipsBackgroundColor

    default “white”

  • SCATTERMouseOverTooltipsBorderStyle

    default “solid”

  • SCATTERMouseOverTooltipsBorderWidth

    default 0

  • SCATTERMouseOverTooltipsPadding

    default “3px”

  • SCATTERMouseOverTooltipsBorderRadius

    default “3px”

  • SCATTERMouseOverTooltipsOpacity

    default 0.8

Example: change the tooltips style of SCATTER module

Example

Before

After

Code change

SCATTERMouseOverTooltipsBackgroundColor : "white",
SCATTERMouseOverTooltipsBorderWidth : 0,
SCATTERMouseOverTooltipsBorderRadius : "3px",
SCATTERMouseOverTooltipsOpacity : 0.8,
SCATTERMouseOverTooltipsBackgroundColor : "#DCDCDC",
SCATTERMouseOverTooltipsBorderWidth : 1,
SCATTERMouseOverTooltipsBorderRadius : "5px",
SCATTERMouseOverTooltipsOpacity : 0.7,

Image change

alternate text alternate text

LINK module

(1)All configuration parameters

Here we show all the configuration parameters in LINK module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - LINK module
   LINKMouseOverTooltipsSetting : "style1",  //custom, style1
   LINKMouseOverTooltipsHtml : " ",
   LINKMouseOverTooltipsPosition : "absolute",
   LINKMouseOverTooltipsBackgroundColor : "white",
   LINKMouseOverTooltipsBorderStyle : "solid",
   LINKMouseOverTooltipsBorderWidth : 0,
   LINKMouseOverTooltipsPadding : "3px",
   LINKMouseOverTooltipsBorderRadius : "3px",
   LINKMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • LINKMouseOverTooltipsSetting

    default “style1”

  • LINKMouseOverTooltipsHtml

    default ” “

Tooltips style

  • LINKMouseOverTooltipsPosition

    default “absolute”

  • LINKMouseOverTooltipsBackgroundColor

    default “white”

  • LINKMouseOverTooltipsBorderStyle

    default “solid”

  • LINKMouseOverTooltipsBorderWidth

    default 0

  • LINKMouseOverTooltipsPadding

    default “3px”

  • LINKMouseOverTooltipsBorderRadius

    default “3px”

  • LINKMouseOverTooltipsOpacity

    default 0.8

CNV module

(1)All configuration parameters

Here we show all the configuration parameters in CNV module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - CNV module
   CNVMouseOverTooltipsSetting :"style1",
   CNVMouseOverTooltipsHtml : " ",
   CNVMouseOverTooltipsPosition : "absolute",
   CNVMouseOverTooltipsBackgroundColor : "white",
   CNVMouseOverTooltipsBorderStyle : "solid",
   CNVMouseOverTooltipsBorderWidth : 0,
   CNVMouseOverTooltipsPadding : "3px",
   CNVMouseOverTooltipsBorderRadius : "3px",
   CNVMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • CNVMouseOverTooltipsSetting

    default “style1”

  • CNVMouseOverTooltipsHtml

    default ” “

Tooltips style

  • CNVMouseOverTooltipsPosition

    default “absolute”

  • CNVMouseOverTooltipsBackgroundColor

    default “white”

  • CNVMouseOverTooltipsBorderStyle

    default “solid”

  • CNVMouseOverTooltipsBorderWidth

    default 0

  • CNVMouseOverTooltipsPadding

    default “3px”

  • CNVMouseOverTooltipsBorderRadius

    default “3px”

  • CNVMouseOverTooltipsOpacity

    default 0.8

ARC module

(1)All configuration parameters

Here we show all the configuration parameters in ARC module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - ARC module
   ARCMouseOverTooltipsSetting :"style1",
   ARCMouseOverTooltipsHtml : " ",
   ARCMouseOverTooltipsPosition : "absolute",
   ARCMouseOverTooltipsBackgroundColor : "white",
   ARCMouseOverTooltipsBorderStyle : "solid",
   ARCMouseOverTooltipsBorderWidth : 0,
   ARCMouseOverTooltipsPadding : "3px",
   ARCMouseOverTooltipsBorderRadius : "3px",
   ARCMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • ARCMouseOverTooltipsSetting

    default “style1 “

  • ARCMouseOverTooltipsHtml

    default ” “

Tooltips style

  • ARCMouseOverTooltipsPosition

    default “absolute”

  • ARCMouseOverTooltipsBackgroundColor

    default “white”

  • ARCMouseOverTooltipsBorderStyle

    default “solid”

  • ARCMouseOverTooltipsBorderWidth

    default 0

  • ARCMouseOverTooltipsPadding

    default “3px”

  • ARCMouseOverTooltipsBorderRadius

    default “3px”

  • ARCMouseOverTooltipsOpacity

    default 0.8

HEATMAP module

(1)All configuration parameters

Here we show all the configuration parameters in HEATMAP module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - HEATMAP module
   HEATMAPMouseOverTooltipsSetting :"style1",
   HEATMAPMouseOverTooltipsHtml : " ",
   HEATMAPMouseOverTooltipsPosition : "absolute",
   HEATMAPMouseOverTooltipsBackgroundColor : "white",
   HEATMAPMouseOverTooltipsBorderStyle : "solid",
   HEATMAPMouseOverTooltipsBorderWidth : 0,
   HEATMAPMouseOverTooltipsPadding : "3px",
   HEATMAPMouseOverTooltipsBorderRadius : "3px",
   HEATMAPMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • HEATMAPMouseOverTooltipsSetting

    default “style1”

  • HEATMAPMouseOverTooltipsHtml

    default ” “

Tooltips style

  • HEATMAPMouseOverTooltipsPosition

    default “absolute”

  • HEATMAPMouseOverTooltipsBackgroundColor

    default “white”

  • HEATMAPMouseOverTooltipsBorderStyle

    default “solid”

  • HEATMAPMouseOverTooltipsBorderWidth

    default 0

  • HEATMAPMouseOverTooltipsPadding

    default “3px”

  • HEATMAPMouseOverTooltipsBorderRadius

    default “3px”

  • HEATMAPMouseOverTooltipsOpacity

    default 0.8

BUBBLE module

(1)All configuration parameters

Here we show all the configuration parameters in BUBBLE module of Customize Tooltips class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize Tooltips - BUBBLE module
BUBBLEMouseOverTooltipsSetting : "style1",
BUBBLEMouseOverTooltipsHtml : " ",
BUBBLEMouseOverTooltipsPosition : "absolute",
BUBBLEMouseOverTooltipsBackgroundColor : "white",
BUBBLEMouseOverTooltipsBorderStyle : "solid",
BUBBLEMouseOverTooltipsBorderWidth : 0,
BUBBLEMouseOverTooltipsPadding : "3px",
BUBBLEMouseOverTooltipsBorderRadius : "3px",
BUBBLEMouseOverTooltipsOpacity : 0.8,
 });

(2)Configuration and examples

Tooltips content

  • BUBBLEMouseOverTooltipsSetting

    default “style1”

  • BUBBLEMouseOverTooltipsHtml

    default ” “

Tooltips style

  • BUBBLEMouseOverTooltipsPosition

    default “absolute”

  • BUBBLEMouseOverTooltipsBackgroundColor

    default “white”

  • BUBBLEMouseOverTooltipsBorderStyle

    default “solid”

  • BUBBLEMouseOverTooltipsBorderWidth

    default 0

  • BUBBLEMouseOverTooltipsPadding

    default “3px”

  • BUBBLEMouseOverTooltipsBorderRadius

    default “3px”

  • BUBBLEMouseOverTooltipsOpacity

    default 0.8

HISTOGRAM module

(1)All configuration parameters

Here we show all the configuration parameters in HISTOGRAM module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - HISTOGRAM module
   HISTOGRAMMouseOverTooltipsSetting : "style1",
   HISTOGRAMMouseOverTooltipsHtml : " ",
   HISTOGRAMMouseOverTooltipsPosition : "absolute",
   HISTOGRAMMouseOverTooltipsBackgroundColor : "white",
   HISTOGRAMMouseOverTooltipsBorderStyle : "solid",
   HISTOGRAMMouseOverTooltipsBorderWidth : 0,
   HISTOGRAMMouseOverTooltipsPadding : "3px",
   HISTOGRAMMouseOverTooltipsBorderRadius : "3px",
   HISTOGRAMMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • HISTOGRAMMouseOverTooltipsSetting

    default “style1”

  • HISTOGRAMMouseOverTooltipsHtml

    default ” “

Tooltips style

  • HISTOGRAMMouseOverTooltipsPosition

    default “absolute”

  • HISTOGRAMMouseOverTooltipsBackgroundColor

    default “white”

  • HISTOGRAMMouseOverTooltipsBorderStyle

    default “solid”

  • HISTOGRAMMouseOverTooltipsBorderWidth

    default 0

  • HISTOGRAMMouseOverTooltipsPadding

    default “3px”

  • HISTOGRAMMouseOverTooltipsBorderRadius

    default “3px”

  • HISTOGRAMMouseOverTooltipsOpacity

    default 0.8

LINE module

(1)All configuration parameters

Here we show all the configuration parameters in LINE module of Customize Tooltips class.

NGCircos01 = new NGCircos(NGCircosGenome,{
   // Main configuration - Customize Tooltips - LINE module
   LINEMouseOverTooltipsHtml : " ",
   LINEMouseOverTooltipsPosition : "absolute",
   LINEMouseOverTooltipsBackgroundColor : "white",
   LINEMouseOverTooltipsBorderStyle : "solid",
   LINEMouseOverTooltipsBorderWidth : 0,
   LINEMouseOverTooltipsPadding : "3px",
   LINEMouseOverTooltipsBorderRadius : "3px",
   LINEMouseOverTooltipsOpacity : 0.8,
});

(2)Configuration and examples

Tooltips content

  • LINEMouseOverTooltipsHtml

    default ” “

Tooltips style

  • LINEMouseOverTooltipsPosition

    default “absolute”

  • LINEMouseOverTooltipsBackgroundColor

    default “white”

  • LINEMouseOverTooltipsBorderStyle

    default “solid”

  • LINEMouseOverTooltipsBorderWidth

    default 0

  • LINEMouseOverTooltipsPadding

    default “3px”

  • LINEMouseOverTooltipsBorderRadius

    default “3px”

  • LINEMouseOverTooltipsOpacity

    default 0.8

WIG module

(1)All configuration parameters

Here we show all the configuration parameters in WIG module of Customize Tooltips class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize Tooltips - WIG module
WIGMouseOverTooltipsHtml : " ",
WIGMouseOverTooltipsPosition : "absolute",
WIGMouseOverTooltipsBackgroundColor : "white",
WIGMouseOverTooltipsBorderStyle : "solid",
WIGMouseOverTooltipsBorderWidth : 0,
WIGMouseOverTooltipsPadding : "3px",
WIGMouseOverTooltipsBorderRadius : "3px",
WIGMouseOverTooltipsOpacity : 0.8,
 });

(2)Configuration and examples

Tooltips content

  • WIGMouseOverTooltipsHtml

    default ” “

Tooltips style

  • WIGMouseOverTooltipsPosition

    default “absolute”

  • WIGMouseOverTooltipsBackgroundColor

    default “white”

  • WIGMouseOverTooltipsBorderStyle

    default “solid”

  • WIGMouseOverTooltipsBorderWidth

    default 0

  • WIGMouseOverTooltipsPadding

    default “3px”

  • WIGMouseOverTooltipsBorderRadius

    default “3px”

  • WIGMouseOverTooltipsOpacity

    default 0.8

LOLLIPOP module

(1)All configuration parameters

Here we show all the configuration parameters in LOLLIPOP module of Customize Tooltips class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize Tooltips - LOLLIPOP module
LOLLIPOPMouseOverTooltipsSetting : "style1",
LOLLIPOPMouseOverTooltipsHtml : " ",
LOLLIPOPMouseOverTooltipsPosition : "absolute",
LOLLIPOPMouseOverTooltipsBackgroundColor : "white",
LOLLIPOPMouseOverTooltipsBorderStyle : "solid",
LOLLIPOPMouseOverTooltipsBorderWidth : 0,
LOLLIPOPMouseOverTooltipsPadding : "3px",
LOLLIPOPMouseOverTooltipsBorderRadius : "3px",
LOLLIPOPMouseOverTooltipsOpacity : 0.8,
 });

(2)Configuration and examples

Tooltips content

  • LOLLIPOPMouseOverTooltipsSetting

    default “style1”

  • LOLLIPOPMouseOverTooltipsHtml

    default ” “

Tooltips style

  • LOLLIPOPMouseOverTooltipsPosition

    default “absolute”

  • LOLLIPOPMouseOverTooltipsBackgroundColor

    default “white”

  • LOLLIPOPMouseOverTooltipsBorderStyle

    default “solid”

  • LOLLIPOPMouseOverTooltipsBorderWidth

    default 0

  • LOLLIPOPMouseOverTooltipsPadding

    default “3px”

  • LOLLIPOPMouseOverTooltipsBorderRadius

    default “3px”

  • LOLLIPOPMouseOverTooltipsOpacity

    default 0.8

GENE module

(1)All configuration parameters

Here we show all the configuration parameters in GENE module of Customize Tooltips class.

 NGCircos01 = new NGCircos(NGCircosGenome,{
    // Main configuration - Customize Tooltips - GENE module
GENEMouseOverTooltipsSetting : "style1",
GENEMouseOverTooltipsHtml : " ",
GENEMouseOverTooltipsPosition : "absolute",
GENEMouseOverTooltipsBackgroundColor : "white",
GENEMouseOverTooltipsBorderStyle : "solid",
GENEMouseOverTooltipsBorderWidth : 0,
GENEMouseOverTooltipsPadding : "3px",
GENEMouseOverTooltipsBorderRadius : "3px",
GENEMouseOverTooltipsOpacity : 0.8,
 });

(2)Configuration and examples

Tooltips content

  • GENEMouseOverTooltipsSetting

    default “style1”

  • GENEMouseOverTooltipsHtml

    default ” “

Tooltips style

  • GENEMouseOverTooltipsPosition

    default “absolute”

  • GENEMouseOverTooltipsBackgroundColor

    default “white”

  • GENEMouseOverTooltipsBorderStyle

    default “solid”

  • GENEMouseOverTooltipsBorderWidth

    default 0

  • GENEMouseOverTooltipsPadding

    default “3px”

  • GENEMouseOverTooltipsBorderRadius

    default “3px”

  • GENEMouseOverTooltipsOpacity

    default 0.8

Advanced tooltips

Tooltips is a html element : <div class="NGCircos(Module)Tooltip">. So web developers can use CSS to configure tooltips.

(1)CSS API for advanced users

<style>
   .NGCircosMODULETooltip {   //eg: NGCircosSNPTooltip
    background-color: #000;
    color: white;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial;
  ......
   }
</style>

(2)Example: CSS API for SNP module

Example

Before

After

Code change

<style>
.NGCircosSNPTooltip {
    border-color: #000;
    color: white;
    font-size: 18px;
    font-weight: 100;
    font-family: Arial;
}
</style>
<style>
.NGCircosSNPTooltip {
    border-color: #000;
    color: red;
    font-size: 18px;
    font-weight: bold;
    font-family: Arial;
}
</style>

Image change

alternate text alternate text

6. API: Data configuration

6.1 SNP module

   var SNP01 = [ "SNP01" , {
     maxRadius: 205,
     minRadius: 153,
SNPFillColorType:"specific"
     SNPFillColor: "#9400D3",
SNPFillr2Color:["#ff0031","#ff0031","#ff0031","#ff0031","#ff0031"],
ValueAxisManualScale:false,
ValueAxisMaxScale:10,
ValueAxisMinScale:0,
     PointType: "circle",
     circleSize: 2,
     rectWidth: 2,
     rectHeight: 2,
SNPAnimationDisplay: false,
SNPAnimationInitialPositionX:0,
SNPAnimationInitialPositionY:0,
SNPAnimationTime: 2000,
SNPAnimationDelay: 20,
SNPAnimationType: "bounce",  //linear,circle,elastic,bounce
   } , [
     {chr: "10", pos: "100315722", value: "20.2218", des: "rs603424", color: "rgb(153,102,0)",r2value:"0",html:" "},
     {chr: "10", pos: "101219450", value: "19", des: "rs11190870", color: "rgb(153,102,0)",r2value:"0"},
     {chr: "10", pos: "103086421", value: "25.1549", des: "rs11191548", color: "rgb(153,102,0)",r2value:"0"},
     {chr: "10", pos: "112998590", value: "74.0969", des: "rs7903146", color: "rgb(153,102,0)",r2value:"0"},
     {chr: "10", pos: "121577821", value: "169.699", des: "rs2981579", color: "rgb(153,102,0)",r2value:"0"},
      ......
     {chr: "X", pos: "5266661", value: "24.699", des: "rs6638512", color: "rgb(153,153,153)",r2value:"0"},
     {chr: "X", pos: "67343176", value: "90.699", des: "rs2497938", color: "rgb(153,153,153)",r2value:"0"},
     {chr: "X", pos: "69578860", value: "18.1549", des: "rs11796357", color: "rgb(153,153,153)",r2value:"0"},
     {chr: "X", pos: "79241621", value: "32.699", des: "rs5912838", color: "rgb(153,153,153)",r2value:"0"},
   ]];

Part 1 : Configuration

  • maxRadius

    default 205, max radius to show SNPs with max vlaue

  • minRadius

    default 173, min radius to show SNPs with min vlaue

  • SNPFillColorType

    default “specific”, [specific/r2], whether specify a color to SNP or assign a color based on r2 value and r2 color list.

  • SNPFillColor

    default “#9400D3”, SNP color

  • SNPFille2Color

    default [“#ff0031”,”#ff0031”,”#ff0031”,”#ff0031”,”#ff0031”], r2 color list from high to low, r2 value between 1 to 0 are assigned to relative color, 1-0.8 to first, 0.8-0.6 to second, and so on.

  • ValueAxisManualScale

    default “false”, [false/true], whether manually control the scale of value

  • ValueAxisMaxScale

    default “10”, the maxmium value manually set for value

  • ValueAxisMaxScale

    default “0”, the minimum value manually set for value

  • PointType

    default “circle”, [circle/rect], circle/rect point

  • circleSize

    default 2, size of circle

  • rectWidth

    default 2, width of rect

  • rectHeight

    default 2, height of rect

Example: change data configuration of SNP module

Example

Before

After

Code change

minRadius: 153,
circleSize: 2,
minRadius: 103,
circleSize: 3,

Image change

alternate text alternate text
  • SNPAnimationDisplay

    default “false”, [true/false], open/not open animation event of SNP module

  • SNPAnimationInitialPositionX

    default 0, initial X axis position for SNP.

  • SNPAnimationInitialPositionY

    default 0, initial Y axis position for SNP.

  • SNPAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • SNPAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • SNPAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

Example: SNP Animation

Example

Before

After

Code change

SNPFillColor: "#9400D3",
SNPAnimationDisplay: true,
SNPAnimationTime: 1000,
SNPAnimationDelay: 0,
SNPAnimationType: "circle",
SNPFillColor: "red",
SNPAnimationDisplay: true,
SNPAnimationTime: 2000,
SNPAnimationDelay: 20,
SNPAnimationType: "bounce",

Image change

alternate text alternate text

Part 2 : Data

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(pos) is the position of the SNP.

  • The 3 column(value) is the value(density, P-value, etc.) of the SNP.

  • The 4 column(des) is the description of the SNP.

  • The 5 column(color) is the color of this SNP point.

  • The 6 column(r2value) is the r2 value for this SNP point especially prepared for locuszoom plot.

  • The 7 column(html) is the html for tooltips.

6.2 SCATTER module

  var SCATTER01 = [ "SCATTER01" , {
    SCATTERRadius: 220,
    innerCircleSize: 1,
    outerCircleSize: 7,
    innerCircleColor: "red",
    outerCircleColor: "#CC3399",
    innerPointType: "circle", //circle,rect
    outerPointType: "circle", //circle,rect
    innerrectWidth: 2,
    innerrectHeight: 2,
    outerrectWidth: 10,
    outerrectHeight: 10,
    outerCircleOpacity: 1,
    random_data: 0,
SCATTERAnimationDisplay: false,
SCATTERAnimationTime: 2000,
SCATTERAnimationDelay: 20,
SCATTERAnimationType: "bounce",  //linear,circle,elastic,bounce
  } , [
    {chr: "1", start: "1102484", end: "1102578", name: "hsa-mir-200b", des: "breast cancer",html:" "},
    {chr: "11", start: "122017230", end: "122017301", name: "hsa-let-7a-2", des: "ovarian cancer"},
    {chr: "22", start: "46508629", end: "46508702", name: "hsa-let-7a-3", des: "leukemia cancer"},
    {chr: "14", start: "101349316", end: "101349412", name: "hsa-mir-127", des: "breast cancer"},
  ]];

Part 1 : Configuration

  • SCATTERRadius

    default 220, radius of scatter circle

  • innerCircleSize

    default 1, inner circle size

  • outerCircleSize

    default 7, outer circle size

  • innerCircleColor

    default “red”, inner circle color

  • outerCircleColor

    default “#CC3399”, outer circle color

  • innerPointType

    default “circle”, [circle/rect], circle/rect point

  • outerPointType

    default “circle”, [circle/rect], circle/rect point

  • innerrectWidth

    default 2, width of inner rect

  • innerrectHeight

    default 2, height of inner rect

  • outerrectWidth

    default 2, width of outer rect

  • outerrectHeight

    default 2, height of outer rect

  • outerCircleOpacity

    default 1, opacity of outer circle

  • random_data

    default 0, scatter position fluctuation

Example: change data configuration of SCATTER module

  • SCATTERAnimationDisplay

    default “false”, [true/false], open/not open animation event of SCATTER module

  • SCATTERAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • SCATTERAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • SCATTERAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

Example: SCATTER Animation

Example

Before

After

Code change

outerCircleColor: "#CC3399",
SCATTERAnimationDisplay: true,
SCATTERAnimationTime: 2000,
SCATTERAnimationDelay: 20,
SCATTERAnimationType: "bounce",
outerCircleColor: "green",
SCATTERAnimationDisplay: true,
SCATTERAnimationTime: 1000,
SCATTERAnimationDelay: 400,
SCATTERAnimationType: "circle",

Image change

alternate text alternate text

Part 2 : Data

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(start) is the start position of the scatter.

  • The 3 column(end) is the end position of the scatter.

  • The 4 column(name) is the name of the scatter.

  • The 5 column(des) is the description of the scatter.

  • The 6 column(html) is the html for tooltips.

6.3 LINK module

   var LINK01 = [ "LINK01" , {
     LinkRadius: 140,
     LinkFillColor: "#F26223",
     LinkWidth: 3,
LinkType:"Q",
     displayLinkAxis: true,
     LinkAxisColor: "#B8B8B8",
     LinkAxisWidth: 0.5,
     LinkAxisPad: 3,
     displayLinkLabel: true,
     LinkLabelColor: "red",
     LinkLabelSize: 13,
     LinkLabelPad: 8,
LINKAnimationDisplay: false,
LINKAnimationDirection:"1to2", //1to2,2to1  [side1 to side2/side2 to side1]
LINKAnimationTime: 2000,
LINKAnimationDelay: 20,
LINKAnimationType: "bounce",
   } , [
     {fusion: "FGFR3--TACC3", g1chr: "4", g1start: "1795662", g1end: "1808986", g1name: "FGFR3", g2chr: "4", g2start: "1723217", g2end: "1746905", g2name: "TACC3",html:" "},
     {fusion: "CCDC6--RET", g1chr: "10", g1start: "43595894", g1end: "43623714", g1name: "RET", g2chr: "10", g2start: "61552678", g2end: "61666182", g2name: "TACC3"},
     {fusion: "ETV6--NTRK3", g1chr: "12", g1start: "11905384", g1end: "12043977", g1name: "ETV6", g2chr: "15", g2start: "88420169", g2end: "88799384", g2name: "NTRK3"},
     {fusion: "EGFR--SEPT14", g1chr: "7", g1start: "55086971", g1end: "55273307", g1name: "EGFR", g2chr: "7", g2start: "55861237", g2end: "55930482", g2name: "SEPT14"},
     {fusion: "EML4--ALK", g1chr: "2", g1start: "42472644", g1end: "42557344", g1name: "EML4", g2chr: "2", g2start: "29416093", g2end: "30143525", g2name: "ALK"},
     {fusion: "ABL1--BCR", g1chr: "9", g1start: "133589707", g1end: "133761067", g1name: "ABL1", g2chr: "22", g2start: "23523148", g2end: "23657706", g2name: "BCR"},
   ]];

Part 1 : Configuration

  • LinkRadius

    default 140, radius of link circle

  • LinkFillColor

    default “#F26223”, color of link

  • LinkWidth

    default 3, width of link

  • LinkType

    default Q, [Q/S/T], type of link

  • displayLinkAxis

    default true, [true/false], on/off link axis

  • LinkAxisColor

    default “#B8B8B8”, color of link axis

  • LinkAxisWidth

    default 0.5, width of link axis

  • LinkAxisPad

    default 3, pad of link axis

  • displayLinkLabel

    default true, [true/false], on/off link label

  • LinkLabelColor

    default “red”, color of link color

  • LinkLabelSize

    default 13, size of link label

  • LinkLabelPad

    default 8, pad of link label

Example: change data configuration of LINK module

Example

Before

After

Code change

LinkRadius: 140,
LinkFillColor: "#F26223",
LinkAxisWidth: 0.5,
displayLinkLabel: true,
LinkLabelColor: "red",
LinkLabelSize: 13,
LinkLabelPad: 8,
LinkRadius: 170,
LinkFillColor: "red",
LinkAxisWidth: 3,
displayLinkLabel: false,
LinkLabelColor: "red",
LinkLabelSize: 13,
LinkLabelPad: 8,

Image change

alternate text alternate text
  • LINKAnimationDisplay

    default “false”, [true/false], open/not open animation event of LINK module

  • LINKAnimationDirection

    default “1to2”, [1to2/2to1], Animation from start chromosome to end chromosome or reverse.

  • LINKAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • LINKAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • LINKAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

Example: LINK Animation

Part 2 : Data

  • The 1 column(name) is the name of the link.

  • The 2 column(g1chr) is the chromosome of gene 1.

  • The 3 column(g1start) is the start of gene 1.

  • The 4 column(g1end) is the end of gene 1.

  • The 5 column(g1name) is the name of gene 1.

  • The 6 column(g2chr) is the chromosome of gene 2.

  • The 7 column(g2start) is the start of gene 2.

  • The 8 column(g2end) is the end of gene 2.

  • The 9 column(g2name) is the name of gene 2.

  • The 10 column(html) is the html for tooltips.

6.4 CNV module

   var CNV01 = [ "CNV01" , {
     maxRadius: 175,
     minRadius: 116,
     CNVwidth: 2,
     CNVColor: "#4876FF",
ValueAxisManualScale:false,
ValueAxisMaxScale:10,
ValueAxisMinScale:0,
strokeColor:"black",
strokeWidth:1,
opacity:1,
CNVAnimationDisplay: false,
CNVAnimationTime: 2000,
CNVAnimationDelay: 20,
CNVAnimationType: "bounce",
   } , [
     {chr: "1", start: "764788", end: "87109267", value: "2.5",color:"red",html:" "},
     {chr: "1", start: "87109268", end: "120217058", value: "2",color:"red"},
     {chr: "1", start: "144101324", end: "222713034", value: "4",color:"red"},
     {chr: "1", start: "222713035", end: "222867750", value: "6",color:"red"},
     ......
     {chr: "9", start: "30330084", end: "140139368", value: "3.5",color:"red"},
     {chr: "X", start: "105073", end: "114046817", value: "1",color:"red"},
     {chr: "X", start: "114112404", end: "114299959", value: "2",color:"red"},
     {chr: "X", start: "114376344", end: "154884814", value: "1",color:"red"},
   ]];

Part 1 : Configuration

  • maxRadius

    default 155, max radius to show CNVs with max vlaue

  • minRadius

    default 116, min radius to show CNVs with min vlaue

  • CNVwidth

    default 2, CNV width

  • CNVColor

    default “#4876FF”, CNV color

  • ValueAxisManualScale

    default “false”, [false/true], whether manually control the scale of value

  • ValueAxisMaxScale

    default “10”, the maxmium value manually set for value

  • ValueAxisMaxScale

    default “0”, the minimum value manually set for value

  • strokeColor

    default “black”, stroke color for CNV

  • strokeWidth

    default 1, stroke width for CNV

  • opacity

    default 1, opacity rate for CNV

Example: change data configuration of CNV module

Example

Before

After

Code change

CNVwidth: 2,
CNVColor: "#4876FF",
CNVwidth: 4,
CNVColor: "red",

Image change

alternate text alternate text
  • CNVAnimationDisplay

    default “false”, [true/false], open/not open animation event of CNV module

  • CNVAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • CNVAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • CNVAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

Example: CNV Animation

Part 2 : Data

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(start) is the start of the CNV region.

  • The 3 column(end) is the end of the CNV region.

  • The 4 column(value) is the copy number of CNV region.

  • The 5 column(color) is the specific color of CNV region.

  • The 6 column(html) is the html for tooltips.

6.5 ARC module

   var ARC01 = [ "ARC01" , {
     innerRadius: -55,
     outerRadius: -45,
ARCAnimationDisplay: false,
ARCAnimationTime: 2000,
ARCAnimationDelay: 20,
ARCAnimationType: "bounce",
ARCOpacity:1,
   } , [
     {chr: "EGFR", start: "57", end: "167", color: "#CD8500", des: "Recep_L domain",html:" "},
     {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"},
   ]];

Part 1 : Configuration

  • innerRadius

    default -55, inner radius of arc

  • outerRadius

    default -45, outer radius of arc

  • ARCOpacity

    default 1, opacity of arc

Example: change data configuration of ARC module

Example

Before

After

Code change

innerRadius: -55,
outerRadius: -45,
innerRadius: 8,
outerRadius: -8,

Image change

alternate text alternate text
  • ARCAnimationDisplay

    default “false”, [true/false], open/not open animation event of ARC module

  • ARCAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • ARCAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • ARCAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

Example: ARC Animation

Part 2 : Data

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

  • The 6 column(html) is the html for tooltips.

6.6 HEATMAP module

   var HEATMAP01 = [ "HEATMAP01" , {
     innerRadius: -25,
     outerRadius: -65,
     maxColor: "red",
     minColor: "yellow",
totalLayer:1,
ValueAxisManualScale:false,
ValueAxisMaxScale:10,
ValueAxisMinScale:0,
HEATMAPAnimationDisplay: false,
HEATMAPAnimationDirection:"O2I",
HEATMAPAnimationColorDirection:"L2C",
HEATMAPAnimationTime: 2000,
HEATMAPAnimationDelay: 20,
HEATMAPAnimationType: "bounce",
   } , [
     {chr: "2L", start: "1", end: "1011544", name: "test heatmap", value: "0.8",layer:"1",html:" "},
     {chr: "2L", start: "1011548", end: "2011544", name: "test heatmap", value: "0.3",layer:"1"},
     {chr: "2L", start: "2011548", end: "3011544", name: "test heatmap", value: "0.1",layer:"1"},
     {chr: "2L", start: "2011545", end: "2011546", name: "test heatmap", value: "0.01",layer:"1"},
   ......
     {chr: "X", start: "18011548", end: "19011544", name: "test heatmap", value: "0.83",layer:"1"},
     {chr: "X", start: "19011548", end: "20011544", name: "test heatmap", value: "0.39",layer:"1"},
     {chr: "X", start: "20011548", end: "21146708", name: "test heatmap", value: "0.49",layer:"1"},
     {chr: "X", start: "21011548", end: "22422827", name: "test heatmap", value: "0.83",layer:"1"},
   ]];

Part 1 : Configuration

  • innerRadius

    default -25, inner radius of heatmap

  • outerRadius

    default -65, outer radius of heatmap

  • maxColor

    default “red”, color to show max value in heatmap

  • minColor

    default “yellow”, color to show min value in heatmap

  • totalLayer

    default “1”, total layers of all values in heatmap

  • ValueAxisManualScale

    default “false”, [false/true], whether manually control the scale of value

  • ValueAxisMaxScale

    default “10”, the maxmium value manually set for value

  • ValueAxisMaxScale

    default “0”, the minimum value manually set for value

Example: change data configuration of HEATMAP module

Example

Before

After

Code change

innerRadius: -25,
outerRadius: -65,
maxColor: "red",
minColor: "yellow"
innerRadius: -65,
outerRadius: -115,
maxColor: "red",
minColor: "green"

Image change

alternate text alternate text
  • HEATMAPAnimationDisplay

    default “false”, [true/false], open/not open animation event of HEATMAP module

  • HEATMAPAnimationDirection

    default “O2I”, [O2I/I2O], animation from outside to inside or from inside to outside

  • HEATMAPAnimationColorDirection

    default “L2C”, [L2C/H2C], color animation from highest(max) color to customized color or from lowest(min) color to customized color.

  • HEATMAPAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • HEATMAPAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • HEATMAPAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

Example: HEATMAP Animation

Part 2 : Data

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

  • The 6 column(layer) is the specific layer of the region.

  • The 7 column(html) is the html for tooltips.

6.7 HISTOGRAM module

   var HISTOGRAM01 = [ "HISTOGRAM01" , {
     maxRadius: 220,
     minRadius: 185,
     histogramFillColor: "#FF6666",
ValueAxisManualScale:false,
ValueAxisMaxScale:10,
ValueAxisMinScale:0,
HISTOGRAMAnimationDisplay: false,
HISTOGRAMAnimationDirection:"O2I", //O2I,I2O  [out to in/in to out]
HISTOGRAMAnimationTime: 2000,
HISTOGRAMAnimationDelay: 20,
   } , [
     {chr: "2L", start: "1", end: "1011544", name: "test histogram", value: "0.8",html:" "},
     {chr: "2L", start: "1011548", end: "2011544", name: "test histogram", value: "0.3"},
     {chr: "2L", start: "2011548", end: "3011544", name: "test histogram", value: "0.1"},
     {chr: "2L", start: "2011545", end: "2011546", name: "test histogram", value: "0.01"},
     ......
     {chr: "X", start: "18011548", end: "19011544", name: "test histogram", value: "0.83"},
     {chr: "X", start: "19011548", end: "20011544", name: "test histogram", value: "0.39"},
     {chr: "X", start: "20011548", end: "21146708", name: "test histogram", value: "0.49"},
     {chr: "X", start: "21011548", end: "22422827", name: "test histogram", value: "0.83"},
   ]];

Part 1 : Configuration

  • maxRadius

    default 240, max radius to show HISTOGRAM with max vlaue

  • minRadius

    default 205, min radius to show HISTOGRAM with min vlaue

  • histogramFillColor

    default “#FF6666”, color of histogram

  • ValueAxisManualScale

    default “false”, [false/true], whether manually control the scale of value

  • ValueAxisMaxScale

    default “10”, the maxmium value manually set for value

  • ValueAxisMaxScale

    default “0”, the minimum value manually set for value

Example: change data configuration of HISTOGRAM module

Example

Before

After

Code change

maxRadius: 220,
minRadius: 185,
histogramFillColor: "#FF6666",
maxRadius: 170,
minRadius: 135,
histogramFillColor: "green",

Image change

alternate text alternate text
  • HISTOGRAMAnimationDisplay

    default “false”, [true/false], open/not open animation event of HISTOGRAM module

  • HISTOGRAMAnimationDirection

    default “O2I”, [O2I/I2O], animation from outside to inside or from inside to outside

  • HISTOGRAMAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • HISTOGRAMAnimationDelay

    default 20, specifies the animation delay in milliseconds.

Example: HISTOGRAM Animation

Part 2 : Data

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

  • The 6 column(html) is the html for tooltips.

6.8 LINE module

   var LINE01 = [ "LINE01" , {
     maxRadius: 220,
     minRadius: 170,
     LineColor: "#EEAD0E",
     LineWidth: 2,
ValueAxisManualScale:false,
ValueAxisMaxScale:10,
ValueAxisMinScale:0,
LineType:"cardinal", //linear,cardinal,basis,monotone
LINEAnimationDisplay: false,
LINEAnimationDirection:"S2E", //S2E,E2S  [start to end/end to start]
LINEAnimationTime: 2000,
LINEAnimationDelay: 20,
LINEAnimationType: "bounce",  //linear,circle,elastic,bounce

   } , [
     {chr: "1", pos: "813468", value: "0.5",html:" "},
     {chr: "1", pos: "3383745", value: "0.22385"},
     {chr: "1", pos: "6157646", value: "0.238643"},
     {chr: "1", pos: "24793116", value: "0.876947"},
     ......
     {chr: "X", pos: "136860114", value: "0.267261"},
     {chr: "X", pos: "138413104", value: "0.847613"},
     {chr: "X", pos: "149344414", value: "0.830811"},
     {chr: "X", pos: "154203563", value: "0.43466"},
   ]];

Part 1 : Configuration

  • maxRadius

    default 220, max radius to show LINE with max vlaue

  • minRadius

    default 170, min radius to show LINE with min vlaue

  • LineFillColor

    default “#EEAD0E”, color of line

  • LineWidth

    default 2, width of line

  • LineType

    default “cardinal”, [cardinal/linear/basis/monotone] ,line type

  • ValueAxisManualScale

    default “false”, [false/true], whether manually control the scale of value

  • ValueAxisMaxScale

    default “10”, the maxmium value manually set for value

  • ValueAxisMaxScale

    default “0”, the minimum value manually set for value

Example: change data configuration of LINE module

Example

Before

After

Code change

LineColor: "#EEAD0E",
LineWidth: 2,
LineColor: "green",
LineWidth: 1,

Image change

alternate text alternate text
  • LINEAnimationDisplay

    default “false”, [true/false], open/not open animation event of LINE module

  • LINEAnimationDirection

    default “S2E”, [S2E/E2S], animation from start to end or from end to start

  • LINEAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • LINEAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • LINEAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

Example: LINE Animation

Part 2 : Data

  • The 1 column(chr) is the name of the chromosome.

  • The 2 column(pos) is the position of the point.

  • The 3 column(value) is the value of the point.

  • The 4 column(html) is the html for tooltips.

6.9 BACKGROUND module

    <script>
    var BACKGROUND01 = [ "BACKGROUND01" , {
      BginnerRadius: 230,
      BgouterRadius: 200,
      BgFillColor: "#F2F2F2",
      BgborderColor : "#000",
      BgborderSize : 0.3,
      axisShow: "true",
      axisWidth: 0.1,
      axisColor: "#000",
 axisOpacity: 0.5,
      axisNum: 8,
BACKGROUNDAnimationDisplay: false,
BACKGROUNDAnimationTime: 2000,
BACKGROUNDAnimationDelay: 20,
BACKGROUNDAnimationType: "bounce",
    }];
    </script>

Part 1 : Configuration

  • BginnerRadius

    default 230, inner radius of background

  • BgouterRadius

    default 200, outer radius of background

  • BgFillColor

    default “#F2F2F2”, color of background

  • BgborderColor

    default “#000”, color of background border

  • BgborderSize

    default 0.3, size of background border

  • axisShow

    default false, [true/false], on/off background axis

  • axisWidth

    default 0.1, width of axis

  • axisColor

    default “#000”, color of background axis

  • axisOpacity

    default 0.5, opacity of axis

  • axisNum

    default 8, number of axis

Example: change data configuration of BACKGROUND module

Example

Before

After

Code change

BginnerRadius: 200,
BgouterRadius: 150,
BgborderSize : 0.3,
axisShow: "false",
axisWidth: 0.1,
axisColor: "#000",
axisNum: 8
BginnerRadius: 190,
BgouterRadius: 100,
BgborderSize : 0.4,
axisShow: "true",
axisWidth: 0.2,
axisColor: "red",
axisNum: 5

Image change

alternate text alternate text
  • BACKGROUNDAnimationDisplay

    default “false”, [true/false], open/not open animation event of BACKGROUND module.

  • BACKGROUNDAnimationTime

    default 2000, specifies the animation time in milliseconds.

  • BACKGROUNDAnimationDelay

    default 20, specifies the animation delay in milliseconds.

  • BACKGROUNDAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

6.10 TEXT module

 <script>
   var TEXT01 = [ "TEXT01" , {
      x: -20,
      y: 0,
      textSize: 20,
      textWeight: "bold",
      textColor: "red",
      textOpacity: 1.0,
 rotateRate:0,
      text: "EGFR",
TEXTAnimationDisplay:false,
TEXTAnimationInitialSize:20,
TEXTAnimationInitialWeight:"bold",
TEXTAnimationInitialColor:"black",
TEXTAnimationInitialOpacity:1,
TEXTAnimationInitialPositionX:0,
TEXTAnimationInitialPositionY:0,
TEXTAnimationInitialRotate:0,
TEXTAnimationDelay:50,
TEXTAnimationTime:1000,
TEXTAnimationType:"linear",
   }];
 </script>

Part 1 : Configuration

  • x

    default -20, x of text

  • y

    default 0, y of text

  • textSize

    default 20, font-size of text

  • textWeight

    default “bold”, normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900

  • textColor

    default “red”, color of text

  • textOpacity

    default 1.0, opacity of text

  • rotateRate

    default 0, [-1,1] rotate rate for text

  • textSize

    default “TEXT”, text content

Example: change data configuration of TEXT module

Example

Before

After

Code change

x: -20,
y: 0,
textSize: 20,
textWeight: "bold",
textColor: "red",
textOpacity: 1.0,
text: "EGFR"
x: -60,
y: 1,
textSize: 18,
textWeight: "300",
textColor: "green",
textOpacity: 0.9,
text: "EGFR - Mutations"

Image change

alternate text alternate text
  • TEXTAnimationDisplay

    default “false”, [true/false], open/not open animation event of TEXT module.

  • TEXTAnimationInitialSize

    default 20, initial size of text.

  • TEXTAnimationInitialWeight

    default “bold”, [normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900], initial weight of text.

  • TEXTAnimationInitialOpacity

    default 1, initial opacity of text.

  • TEXTAnimationInitialPositionX

    default 0, initial X axis position of text.

  • TEXTAnimationInitialPositionY

    default 0, initial Y axis position of text.

  • TEXTAnimationInitialRotate

    default 0, initial rotate rate of text.

  • TEXTAnimationTime

    default 1000, specifies the animation time in milliseconds.

  • TEXTAnimationDelay

    default 50, specifies the animation delay in milliseconds.

  • TEXTAnimationType

    default “bounce”, [linear/circle/elastic/bounce], “linear” means ordinary linear change; “circle” means change to the final state of the animation; “elastic” means change to the final state with a bounce; “bounce” means bounce a few times in the final state.

6.11 WIG module

     var WIG01 = [ "WIG01" , {
   maxRadius: 200,
   minRadius: 150,
   direction:"out",
   WIGStrokeColor: "#3D6390",
   WIGColor: "#3D6390",
   WIGStrokeWidth:1,
   WIGOpacity:1,
   WIGStrokeType:"cardinal", //linear,cardinal,basis,monotone
   ValueAxisManualScale:false,
   ValueAxisMaxScale:10,
   ValueAxisMinScale:0,
   WIGAnimationDisplay: false,
   WIGAnimationTime: 2000,
   WIGAnimationDelay: 20,
   WIGAnimationType: "bounce",
   } , [
   {chr:"chr8",pos:"0.09827044025157233",value:"0.0199",html:" "},
   {chr:"chr8",pos:"1.3266509433962264",value:"0.0199"},
   {chr:"chr8",pos:"2.5550314465408803",value:"0.0199"},
   {chr:"chr8",pos:"3.7834119496855347",value:"0.0498"},
   ......
   {chr:"chr8",pos:"996.314858490566",value:"0.0299"},
   {chr:"chr8",pos:"997.5432389937107",value:"0.0398"},
   {chr:"chr8",pos:"998.7716194968554",value:"0.0896"},
   {chr:"chr8",pos:"1000.0",value:"0.1195"},
]];

Part 1 : Configuration

  • maxRadius

    default 220, max radius to show WIG with max vlaue

  • minRadius

    default 170, min radius to show WIG with min vlaue

  • direction

    default “out”, [out/in], the direction of this WIG module

  • WIGStrokeColor

    default “black”, color of the stroke

  • WIGColor

    default “red”, color of fill area

  • WIGStrokeWidth

    default 1, width of the stroke

  • WIGOpacity

    default 1, opacity rate of area

  • WIGStrokeType

    default “cardinal”, [cardinal/linear/basis/monotone] ,stroke type

  • ValueAxisManualScale

    default “false”, [false/true], whether manually control the scale of value

  • ValueAxisMaxScale

    default “10”, the maxmium value manually set for value

  • ValueAxisMaxScale

    default “0”, the minimum value manually set for value

Example: change data configuration of WIG module

Example

Before

After

Code change

WIGColor: "#EEAD0E",
WIGStrokeType: "cardinal",
WIGColor: "green",
WIGStrokeType: "basis",

Image change