=============== 1. Introduction =============== --------------- 1.1 About --------------- `BioCircos.js `_ is an open source interactive ``Javascript`` library which provides an easy way to interactive display biological data on the web. It implements a raster-based ``SVG`` visualization using the open source Javascript framework jquery.js. BioCircos.js 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**. BioCircos.js provides **SNP**, **CNV**, **HEATMAP**, **LINK**, **LINE**, **SCATTER**, **ARC**, **TEXT**, and **HISTGRAM** modules to display genome-wide genetic variations (SNPs, CNVs and chromosome rearrangement), gene expression and biomolecule interactions. BioCircos.js also provides **BACKGROUND** module to display background and axis circles. Tooltips showing detailed information of SVG elements are also provided. .. note:: **BioCircos.js itself is not a web application**, but a **JavaScript library** that provides the functionality for bioinformatians to build Circos-like figure on bioinformatians' own web applications. The BioCircos.js users are supposed to be familiar with HTML, CSS and JavaScript. ----------------------- 1.2 BioCircos.js & Circos ----------------------- Though BioCircos.js shares its name with Circos, BioCircos.js is not exactly the same as Circos desktop. **BioCircos.js is a JavaScript library for programmers. It is not an app for end-users, and developers need to write code around BioCircos.js to build graphcentric apps**. The comparison between BioCircos.js and Circos is as follow: .. list-table:: :widths: 30 30 30 :header-rows: 1 * - Comparison - BioCircos.js - 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 --------------- 1.3 Funding --------------- BioCircos.js was supported by grants from the National High Technology Research and Development Program (**“863” Program**) of China (**2015AA020108** and **2014AA021502**) and the National Natural Science Foundation of China (**31520103905**). ================ 2. Demos ================ .. image:: paper01.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/paper01.html .. image:: gallery01.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery01.html .. image:: gallery02.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery02.html .. image:: gallery03.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery03.html .. image:: gallery04.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery04.html .. image:: gallery05.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery05.html .. image:: gallery06.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery06.html .. image:: gallery07.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery07.html .. image:: gallery08.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery08.html .. image:: gallery09.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery09.html .. image:: gallery10.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery10.html .. image:: gallery11.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/gallery11.html .. image:: SNPAnimation01_before.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/SNPAnimation01_before.html .. image:: SNPAnimation01_after.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/SNPAnimation01_after.html .. image:: SCATTERAnimation01_after.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/SCATTERAnimation01_after.html Tips: Click the demos above! ================ 3. Getting started ================ ----------------------- Overview of "Getting started" ----------------------- .. image:: view_demos_in_locale.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/index.html .. image:: demo_get_started_gwas01.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/demo_get_started_gwas01.html .. image:: demo_get_started_gwas02.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/demo_get_started_gwas02.html .. image:: demo_get_started_gwas03.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/demo_get_started_gwas03.html .. image:: demo_get_started_gwas04.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/demo_get_started_gwas04.html .. image:: demo_get_started_gwas05.png :scale: 50% :alt: alternate text :height: 200px :width: 400px :align: left :target: demo/pages/demo_get_started_gwas05.html ----------------------- Step0. View demos in locale ----------------------- There is a very easy and quick way to experience the power of BioCircos.js. **Do it step by step according to the following:** 1. Download and extract demos file `biocircos_demos `_. 2. Open **index.html** file in biocircos_demos folder with your locale browser. Yes, everything is done! You will see the following. **Click on the links**, and you can see all of our demos locally. .. image:: view_demos_in_locale.png :scale: 100% :alt: alternate text :align: left :target: demo/index.html **"biocircos_demos"** contains three folders(**"lib"**, **"pages"**, **"data"**) and **"index.html"**. **"lib"** contains three JavaScript library files. **"pages"** contains configurations for demos. **"data"** contains the input data from users. The file structure of **"biocircos_demos"**: .. code-block:: html ---biocircos_demos ---lib ---biocircos-1.1.0.js ---d3.js ---jquery.js ---pages ---gallery01.html ---gallery02.html ...... ---data ---Figure_ARC_DELETION.js ---Figure_SNP01.js ---index.html ----------------------- Step1. Including BioCircos.js ----------------------- This section will familiarise you with the basic steps necessary to start using BioCircos.js. Here we will visualize the **GWAS data** in `GWAS Catalog `_ with BioCircos.js step by step. After Step0, you will have a **"pages"** folder in **"biocircos_demos"** folder. Now create a new file **"gwas.html"** in **"pages"** folder, then include BioCircos.js in a .. note:: **BioCircos.js** is based on **Jquery.js** and **D3.js**, so they should be included before **BioCircos.js**. **Jquery.js**, **D3.js** and **BioCircos.js** can be found in the **lib folder** of `biocircos_demos.tar.gz `_. ----------------------- Step2.
tag to set picture position in html ----------------------- After Step1, prepare a
tag with **"biocircos"** id to set the picture position you will draw in html. Now, **"gwas.html"** is as follows: .. code-block:: html BioCircos.js
--------------- 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 **
.. note:: Here we configure hg19 human genome with **data tag** as **BioCircosGenome**. --------------- Step4. Initialisation and Main configuration --------------- **"Main configuration"** is the main configuration file of BioCircos.js and mainly divided into four classes: **"Customize SVG"**, **"Customize genome"**, **"Customize Events"** and **"Customize Tooltips"**. After Step3, We will initialize BioCircos.js and configure **"Main configuration"**. Here are three changes: 1. Initialize BioCircos.js All of the **data tags** that is defined in **"Genome configuration"** and **"Data configuration"** must be initialized here. We initialize **data tag** - **BioCircosGenome** as below: .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ .. DANGER:: All of the **data tags** that is defined in **"Genome configuration"** and **"Data configuration"** must be initialized here. 2. Main configuration Here we configure 6 attributes in “Main configuration”, other attributes are used their default values. More attributes can be found in **"Main configuration"** part of this document. .. list-table:: :widths: 30 30 30 30 :header-rows: 1 * - Main configuration - Default value - Class - Description * - ``target`` - "biocircos" - Customize SVG - SVG position in html, where
id is "biocircos" * - ``svgWidth`` - 900 - Customize SVG - SVG width * - ``svgHeight`` - 600 - Customize SVG - SVG height * - ``chrPad`` - 0.04 - Customize genome - distance between chromosomes * - ``innerRadius`` - 246 - Customize genome - inner radius of chromosome * - ``outerRadius`` - 270 - Customize genome - outer radius of chromosome 3. BioCircos.js callback **Callback** is necessary, but it is usually the same, so don't need to be too concerned about it. Now, **"gwas.html"** is as follows: .. code-block:: html BioCircos.js
Great! You have drawn a simple genome! Is it so easy? Open **"gwas.html"** file with your locale browser and view it as below: .. image:: demo_get_started_gwas01.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_get_started_gwas01.html --------------- Step5. Add Data configuration --------------- **"Data configuration"** is designed for **"Function Modules"** in BioCircos.js. According to **"Function Modules"** division, **"Data configuration"** includes ten parts: .. list-table:: :widths: 30 30 30 :header-rows: 1 * - 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 * - HISTOGRAM module - Gene expression... - Yes * - LINE module - Gene expression... - Yes * - BACKGROUND module - Display background and axis circles - No * - TEXT module - Assigning annotation text - No We have provided **"Data Preparation Tools"** to prepare the data for almost all **"Function Modules"** except **"BACKGROUND"** and **"TEXT"** module. `````````````````````` 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 <./demo/data/get_started_gwas/SNP04_gwascatalog.txt>`_, as below: .. code-block:: html 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 2. Use **"Data Preparation Tools"** to prepare data .. note:: You need to install the **python 2**, before running **Biocircos_PrepareData.py**. You can skip this step, just download `SNP04_gwascatalog.js <./demo/data/get_started_gwas/SNP04_gwascatalog.js>`_ for the next step. We provide a python program `Biocircos_PrepareData.py `_ to help users prepare the input data for each module of BioCircos.js .. code-block:: shell python Biocircos_PrepareData.py SNP SNP04_gwascatalog.txt > SNP04_gwascatalog.js Move `SNP04_gwascatalog.js <./demo/data/get_started_gwas/SNP04_gwascatalog.js>`_ to ./biocircos_demos/data/get_started_gwas/ in your locale. 3. Output GWAS data used in BioCircos.js .. code-block:: javascript 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)"}, ]]; 4. Including GWAS data SNP04_gwascatalog.js Use 5. Initialize GWAS data in BioCircos.js with **data tag** : **SNP04_gwascatalog** Here GWAS data's **data tag** is defined as **SNP04_gwascatalog**. So add the following code to **gwas.html**. .. code-block:: javascript BioCircos01 = new BioCircos(SNP04_gwascatalog,BioCircosGenome,{ Now, **"gwas.html"** is as follows: .. code-block:: html BioCircos.js
Open **"gwas.html"** file with your locale browser and view it as below: .. image:: demo_get_started_gwas02.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_get_started_gwas02.html `````````````````````` 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. .. code-block:: html 2. Initialize BACKGROUND module with **data tag** : **BACKGROUND01** Here the **data tag** is defined as **BACKGROUND01**. So add the following code to **gwas.html**. .. code-block:: javascript BioCircos01 = new BioCircos(BACKGROUND01,SNP04_gwascatalog,BioCircosGenome,{ Now, **"gwas.html"** is as follows: .. code-block:: html BioCircos.js
Open **"gwas.html"** file with your locale browser and view it as below: .. image:: demo_get_started_gwas03.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_get_started_gwas03.html `````````````````````` 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: .. list-table:: :widths: 30 30 30 30 :header-rows: 1 * - 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 * - ``SNPMouseOverTooltipsHtml01`` - "chr : " - Customize Tooltips - default "chr : " * - ``SNPMouseOverTooltipsHtml02`` - "
position : " - Customize Tooltips - default "
position : " * - ``SNPMouseOverTooltipsHtml03`` - "
-log10(Pvalue) : " - Customize Tooltips - default "
value : " * - ``SNPMouseOverTooltipsHtml04`` - "
rsid : " - Customize Tooltips - default "
des : " * - ``SNPMouseOverTooltipsHtml05`` - default "" - 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 .. code-block:: javascript BioCircos01 = new BioCircos(BACKGROUND01,SNP04_gwascatalog,BioCircosGenome,{ //Main configuration target : "biocircos", svgWidth : 900, svgHeight : 600, chrPad : 0.04, innerRadius: 246, outerRadius: 270, SNPMouseOverDisplay : true, SNPMouseOverColor : "red", SNPMouseOverCircleSize : 5, SNPMouseOverCircleOpacity : 1.0, SNPMouseOverCircleStrokeColor : "#F26223", SNPMouseOverCircleStrokeWidth : 3, SNPMouseOverTooltipsHtml01 : "chr : ", SNPMouseOverTooltipsHtml02 : "
position : ", SNPMouseOverTooltipsHtml03 : "
-log10(Pvalue) : ", SNPMouseOverTooltipsHtml04 : "
rsid : ", SNPMouseOverTooltipsHtml05 : "", SNPMouseOverTooltipsBorderWidth : 1, SNPMouseOutDisplay : true, SNPMouseOutAnimationTime : 700, SNPMouseOutColor : "none", SNPMouseOutCircleSize : "none", SNPMouseOutCircleOpacity : 1.0, SNPMouseOutCircleStrokeWidth : 0, }); Now, **"gwas.html"** is as follows: .. code-block:: html BioCircos.js
Open **"gwas.html"** file with your locale browser and view it as below: .. image:: demo_get_started_gwas04.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_get_started_gwas04.html `````````````````````` 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. .. list-table:: :widths: 15 15 15 10 20 :header-rows: 1 * - Species - Genome version - Data name - Genome - cytoBand in UCSC * - Human - grch38 - ARC_grch38 - `genome <./genome_resource/karyotype.human.grch38_genome.js>`_ - `karyotype.human.grch38.js <./genome_resource/karyotype.human.grch38.js>`_ * - Human - hg19 - ARC_hg19 - `genome <./genome_resource/karyotype.human.hg19_genome.js>`_ - `karyotype.human.hg19.js <./genome_resource/karyotype.human.hg19.js>`_ * - human - hg18 - ARC_hg18 - `genome <./genome_resource/karyotype.human.hg18_genome.js>`_ - `karyotype.human.hg18.js <./genome_resource/karyotype.human.hg18.js>`_ * - Mouse - mm10 - ARC_mm10 - `genome <./genome_resource/karyotype.mouse.mm10_genome.js>`_ - `karyotype.mouse.mm10.js <./genome_resource/karyotype.mouse.mm10.js>`_ * - Mouse - mm9 - ARC_mm9 - `genome <./genome_resource/karyotype.mouse.mm9_genome.js>`_ - `karyotype.mouse.mm9.js <./genome_resource/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 <./demo/data/karyotype.human.hg19.txt>`_, as below: .. code-block:: html 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) 2. Use **"Data Preparation Tools"** to prepare data .. note:: You need to install the **python 2**, before running **Biocircos_PrepareData.py**. You can skip this step, just download `karyotype.human.hg19.js <./demo/data/karyotype.human.hg19.js>`_ for the next step. We provide a python program `Biocircos_PrepareData.py `_ to help users prepare the input data for each module of BioCircos.js .. code-block:: shell python Biocircos_PrepareData.py ARC karyotype.human.hg19.txt > karyotype.human.hg19.js Move `karyotype.human.hg19.js <./demo/data/karyotype.human.hg19.js>`_ to ./biocircos_demos/data/ in your locale. 3. Output chromosome band data used in BioCircos.js .. code-block:: javascript 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)"}, ]]; 4. Including chromosome band data karyotype.human.hg19.js Use 5. Initialize chromosome band data in BioCircos.js 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**. .. code-block:: javascript BioCircos01 = new BioCircos(ARC_hg19,SNP04_gwascatalog,BioCircosGenome,{ Now, **"gwas.html"** is as follows: .. code-block:: html BioCircos.js
Open **"gwas.html"** file with your locale browser and view it as below: .. image:: demo_get_started_gwas05.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_get_started_gwas05.html ======================== 4. Function Modules and Data Preparation Tools ======================== **"Function Modules"** are designed for specific biological data and graphic elements, which currently contains 10 modules, and later will be expanded according to the needs. **"Data configuration"** is designed for **"Function Modules"** in BioCircos.js. According to **"Function Modules"** division, **"Data configuration"** includes ten parts. .. list-table:: :widths: 30 30 30 :header-rows: 1 * - 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 * - HISTOGRAM module - Gene expression... - Yes * - LINE module - Gene expression... - Yes * - BACKGROUND module - Display background and axis circles - No * - TEXT module - Assigning annotation text - No We also have provided a python program `Biocircos_PrepareData.py `_ as **"Data Preparation Tools"** to prepare the input data for almost all **"Function Modules"** except **"BACKGROUND"** and **"TEXT"** module. Below will use this tool to introduce how to prepare the data for each module. ------------------- 4.1 Biocircos_PrepareData.py ------------------- We provide a python program `Biocircos_PrepareData.py `_ to help users prepare the input data for each module of BioCircos.js. .. 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 Biocircos_PrepareData.py. The usage of Biocircos_PrepareData.py is as below: .. code-block:: html Python Version: Python 2.7.3 Usage: python Biocircos_PrepareData.py > Arguments: module: Specify the module name of BioCircos.js, including SNP,SCATTER,LINK,CNV,ARC,HEATMAP,HISTOGRAM,LINE,BACKGROUND and TEXT input : input data input.txt output: output data output.js Example: python Biocircos_PrepareData.py SNP SNP01.txt > SNP01.js ------------------- 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. - Input data: `SNP01.txt <./demo/data/data_prepare/SNP01.txt>`_ - Input data used in BioCircos.js: `SNP01.js <./demo/data/data_prepare/SNP01.js>`_ `````````````````````` (1) SNP data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #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 **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py SNP SNP01.txt > SNP01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, such as ``minRadius``, and finally SNP01.js is in the following: .. code-block:: javascript 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 `````````````````````` (3) Initialize SNP data with **data tag** : **SNP01** `````````````````````` Here the data's **data tag** is defined as **SNP01**. .. code-block:: javascript BioCircos01 = new BioCircos(SNP01,BioCircosGenome,{ // Initialize with "SNP01" data tag `````````````````````` (4) Visualization of SNP module using BioCircos.js `````````````````````` .. image:: DataPreparationTools_SNP_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_SNP_Module.html ------------------- 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. - Input data: `SCATTER01.txt <./demo/data/data_prepare/SCATTER01.txt>`_ - Input data used in BioCircos.js: `SCATTER01.js <./demo/data/data_prepare/SCATTER01.js>`_ `````````````````````` (1) SCATTER data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #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 **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py SCATTER SCATTER01.txt > SCATTER01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, and finally SCATTER01.js is in the following: .. code-block:: javascript 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 `````````````````````` (3) Initialize SCATTER data with **data tag** : **SCATTER01** `````````````````````` Here the data's **data tag** is defined as **SCATTER01**. .. code-block:: javascript BioCircos01 = new BioCircos(SCATTER01,BioCircosGenome,{ // Initialize with "SCATTER01" data tag `````````````````````` (4) Visualization of SCATTER data using BioCircos.js `````````````````````` .. image:: DataPreparationTools_SCATTER_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_SCATTER_Module.html ------------------- 4.4 LINK module ------------------- **"LINK module"** is used to display the **Gene fusions data**, **Interaction data**, **"SV data"** etc. Of course, other data have similar structure can also be displayed by LINK module. .. note:: We will use four steps to illustrate the input data preparation and how to use LINK module, below is an example. - Input data: `LINK01.txt <./demo/data/data_prepare/LINK01.txt>`_ - Input data used in BioCircos.js: `LINK01.js <./demo/data/data_prepare/LINK01.js>`_ `````````````````````` (1) LINK data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #name g1chr g1start g1end g1name g2chr g2start g2end g2name FGFR3--TACC3 4 1795662 1808986 FGFR3 4 1723217 1746905 TACC3 CCDC6--RET 10 43595894 43623714 RET 10 61552678 61666182 TACC3 ETV6--NTRK3 12 11905384 12043977 ETV6 15 88420169 88799384 NTRK3 EGFR--SEPT14 7 55086971 55273307 EGFR 7 55861237 55930482 SEPT14 EML4--ALK 2 42472644 42557344 EML4 2 29416093 30143525 ALK ABL1--BCR 9 133589707 133761067 ABL1 22 23523148 23657706 BCR Nine fields are required: - 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. ::::::::::::::::::::::::::::::::::::::::::::::::: Save the input data to **"LINK01.txt"**, Use **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py LINK LINK01.txt > LINK01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, and finally LINK01.js is in the following: .. code-block:: javascript var LINK01 = [ "LINK01" , { LinkRadius: 140, LinkFillColor: "#F26223", LinkWidth: 3, displayLinkAxis: true, LinkAxisColor: "#B8B8B8", LinkAxisWidth: 0.5, LinkAxisPad: 3, displayLinkLabel: true, LinkLabelColor: "red", LinkLabelSize: 13, LinkLabelPad: 8, } , [ {fusion: "FGFR3--TACC3", g1chr: "4", g1start: "1795662", g1end: "1808986", g1name: "FGFR3", g2chr: "4", g2start: "1723217", g2end: "1746905", g2name: "TACC3"}, {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"}, ]]; `````````````````````` (2) Including LINK data `````````````````````` Use `````````````````````` (3) Initialize BioCircos.js with LINK data `````````````````````` Prepare a
tag with **"example"** id to set the picture position your will draw in html, e.g.: .. code-block:: javascript BioCircos01 = new BioCircos(LINK01,BioCircosGenome,{ // Initialize with "LINK01" data tag `````````````````````` (4) Visualization of LINK data using BioCircos.js `````````````````````` .. image:: DataPreparationTools_LINK_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_LINK_Module.html ------------------- 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. - Input data: `CNV01.txt <./demo/data/data_prepare/CNV01.txt>`_ - Input data used in BioCircos.js: `CNV01.js <./demo/data/data_prepare/CNV01.js>`_ `````````````````````` (1) CNV data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #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 **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py CNV CNV01.txt > CNV01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, and finally CNV01.js is in the following: .. code-block:: javascript 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 `````````````````````` (3) Initialize CNV data with **data tag** : **CNV01** `````````````````````` Here the data's **data tag** is defined as **CNV01**. .. code-block:: javascript BioCircos01 = new BioCircos(BACKGROUND01,CNV01,BioCircosGenome,{ // Initialize with "CNV01" data tag `````````````````````` (4) Visualization of CNV data using BioCircos.js `````````````````````` .. image:: DataPreparationTools_CNV_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_CNV_Module.html ------------------- 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. - Input data: `ARC01.txt <./demo/data/data_prepare/ARC01.txt>`_ - Input data used in BioCircos.js: `ARC01.js <./demo/data/data_prepare/ARC01.js>`_ `````````````````````` (1) ARC data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #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 **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py ARC ARC01.txt > ARC01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, and finally ARC01.js is in the following: .. code-block:: javascript 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 `````````````````````` (3) Initialize ARC data with **data tag** : **ARC01** `````````````````````` Here the data's **data tag** is defined as **ARC01**. .. code-block:: javascript BioCircos01 = new BioCircos(TEXT01,ARC01,BioCircosGenome,{ // Initialize with "ARC01" data tag `````````````````````` (4) Visualization of ARC module using BioCircos.js `````````````````````` .. image:: DataPreparationTools_ARC_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_ARC_Module.html ------------------- 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. - Input data: `HEATMAP01.txt <./demo/data/data_prepare/HEATMAP01.txt>`_ - Input data used in BioCircos.js: `HEATMAP01.js <./demo/data/data_prepare/HEATMAP01.js>`_ `````````````````````` (1) HEATMAP data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #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 **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py HEATMAP HEATMAP01.txt > HEATMAP01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, and finally HEATMAP01.js is in the following: .. code-block:: javascript 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 `````````````````````` (3) Initialize HEATMAP data with **data tag** : **HEATMAP01** `````````````````````` Here the data's **data tag** is defined as **HEATMAP01**. .. code-block:: javascript BioCircos01 = new BioCircos(HEATMAP01,BioCircosGenome,{ // Initialize with "HEATMAP01" data tag `````````````````````` (4) Visualization of HEATMAP data using BioCircos.js `````````````````````` .. image:: DataPreparationTools_HEATMAP_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_HEATMAP_Module.html ------------------- 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. - Input data: `HISTOGRAM01.txt <./demo/data/data_prepare/HISTOGRAM01.txt>`_ - Input data used in BioCircos.js: `HISTOGRAM01.js <./demo/data/data_prepare/HISTOGRAM01.js>`_ `````````````````````` (1) HISTOGRAM data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #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 **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py HISTOGRAM HISTOGRAM01.txt > HISTOGRAM01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, and finally HISTOGRAM01.js is in the following: .. code-block:: javascript 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 `````````````````````` (3) Initialize HISTOGRAM data with **data tag** : **HISTOGRAM01** `````````````````````` Here the data's **data tag** is defined as **HISTOGRAM01**. .. code-block:: javascript BioCircos01 = new BioCircos(HISTOGRAM01,BioCircosGenome,{ // Initialize with "HISTOGRAM01" data tag `````````````````````` (4) Visualization of HISTOGRAM data using BioCircos.js `````````````````````` .. image:: DataPreparationTools_HISTOGRAM_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_HISTOGRAM_Module.html ------------------- 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. - Input data: `LINE01.txt <./demo/data/data_prepare/LINE01.txt>`_ - Input data used in BioCircos.js: `LINE01.js <./demo/data/data_prepare/LINE01.js>`_ `````````````````````` (1) LINE data preparation `````````````````````` :::::::::::::::::::: Input data :::::::::::::::::::: Users should prepare the input data in the following format (separated by tabs). .. code-block:: html #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 **"Biocircos_PrepareData.py"** to prepare data ::::::::::::::::::::::::::::::::::::::::::::::::: .. code-block:: shell python Biocircos_PrepareData.py LINE LINE01.txt > LINE01.js :::::::::::::::::::::::::::::::::: Output data used in BioCircos.js :::::::::::::::::::::::::::::::::: Change the default configuration, and finally LINE01.js is in the following: .. code-block:: javascript 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 `````````````````````` (3) Initialize LINE data with **data tag** : **LINE01** `````````````````````` Here the data's **data tag** is defined as **LINE01**. .. code-block:: javascript BioCircos01 = new BioCircos(BACKGROUND01,LINE01,BioCircosGenome,{ // Initialize with "LINE01" data tag `````````````````````` (4) Visualization of LINE data using BioCircos.js `````````````````````` .. image:: DataPreparationTools_LINE_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_LINE_Module.html ------------------- 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 `````````````````````` (2) Initialize BACKGROUND configuration with **data tag** : **BACKGROUND01**, **BACKGROUND02**, **BACKGROUND03** `````````````````````` Here the data's **data tag** is defined as **BACKGROUND01**, **BACKGROUND02** and **BACKGROUND03**. .. code-block:: javascript BioCircos01 = new BioCircos(BACKGROUND01,BACKGROUND02,BACKGROUND03,BioCircosGenome,{ // Initialize with data tag `````````````````````` (3) Visualization of BACKGROUND module using BioCircos.js `````````````````````` .. image:: DataPreparationTools_BACKGROUND_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_BACKGROUND_Module.html ------------------- 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 `````````````````````` (2) Initialize TEXT configuration with **data tag** : **TEXT01** `````````````````````` Here the data's **data tag** is defined as **TEXT01**. .. code-block:: javascript BioCircos01 = new BioCircos(TEXT01,BioCircosGenome,{ // Initialize with "TEXT01" data tag `````````````````````` (3) Visualization of TEXT module using BioCircos.js `````````````````````` .. image:: DataPreparationTools_TEXT_Module.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/DataPreparationTools_TEXT_Module.html ======================== 5. API: Main configuration ======================== **"Main configuration"** is the main configuration part of BioCircos.js and mainly divided into four classes: **"Customize SVG"**, **"Customize genome"**, **"Customize Events"** and **"Customize Tooltips"**. .. list-table:: :widths: 30 90 :header-rows: 1 * - 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize SVG target : "biocircos", svgWidth : 900, svgHeight : 600, }); ``````````````````````` (2)Configuration and examples ``````````````````````` - ``target`` default "biocircos", SVG position in html, where
id is "biocircos" - ``svgWidth`` default 900, SVG width - ``svgHeight`` default 600, SVG height **Example**: change the size of SVG .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript svgWidth : 900, svgHeight : 600, - .. code-block:: javascript svgWidth : 600, svgHeight : 400, * - Image change - .. image:: API_main_customize_svg01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_svg01_before.html - .. image:: API_main_customize_svg01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_svg01_after.html ------------------- 5.2 Customize genome ------------------- **Customize genome** class is used to customize the wtidth 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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. .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript chrPad:0.01, innerRadius:246, outerRadius:270, genomeFillColor:["green", "grey"], - .. code-block:: javascript chrPad:0.05, innerRadius:266, outerRadius:270, genomeFillColor:["red", "black"], * - Image change - .. image:: API_main_customize_genome01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome01_before.html - .. image:: API_main_customize_genome01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome01_after.html ::::::::::::: genomeBorder ::::::::::::: .. code-block:: javascript 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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript genomeBorder : { "display" : true, "borderColor" : "#000", "borderSize" : 0.5 }, - .. code-block:: javascript genomeBorder : { "display" : true, "borderColor" : "yellow", "borderSize" : 2 }, * - Image change - .. image:: API_main_customize_genome02_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome02_before.html - .. image:: API_main_customize_genome02_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome02_after.html ::::::::::::: ticks ::::::::::::: .. code-block:: javascript ticks : { "display" : true, "len" : 5, "color" : "#000", "textSize" : 10, "textColor" : "#000", "scale" : 30000000 }, - ``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 **Example**: change the length and color of ticks; change the size and color of tick texts .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript ticks : { "display" : true, "len" : 5, "color" : "#000", "textSize" : 10, "textColor" : "#000", "scale" : 30000000 }, - .. code-block:: javascript ticks : { "display" : true, "len" : 7, "color" : "red", "textSize" : 15, "textColor" : "red", "scale" : 50000000 }, * - Image change - .. image:: API_main_customize_genome03_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome03_before.html - .. image:: API_main_customize_genome03_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome03_after.html ::::::::::::: genomeLabel ::::::::::::: .. code-block:: javascript 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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript genomeLabel : { "display" : true, "textSize" : 15, "textColor" : "#000", "dx" : 0.028, "dy" : "-0.55em" }, - .. code-block:: javascript genomeLabel : { "display" : true, "textSize" : 17, "textColor" : "red", "dx" : 0.028, "dy" : "-0.55em" }, * - Image change - .. image:: API_main_customize_genome04_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome04_before.html - .. image:: API_main_customize_genome04_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_genome04_after.html ------------------- 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ 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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript zoom : false, - .. code-block:: javascript zoom : true, * - Image change - .. image:: API_main_customize_events_zoom01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_zoom01_before.html - .. image:: API_main_customize_events_zoom01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_zoom01_after.html ``````````````````` TEXT module ``````````````````` Here we show how to customize the TEXTModuleDragEvent event. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ TEXTModuleDragEvent : true, }); - ``TEXTModuleDragEvent`` default true, [true/false], open/not open TEXT module label drag event **Example**: open TEXT module label drag event .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript TEXTModuleDragEvent : false, - .. code-block:: javascript TEXTModuleDragEvent : true, * - Image change - .. image:: API_main_customize_events_TEXT01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_TEXT01_before.html - .. image:: API_main_customize_events_TEXT01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_TEXT01_after.html ``````````````````` SNP module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in SNP module of **Customize Events** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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; .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseClickColor : "red", SNPMouseClickCircleSize : 4, SNPMouseClickTextFromData : "second", - .. code-block:: javascript SNPMouseClickColor : "blue", SNPMouseClickCircleSize : 8, SNPMouseClickTextFromData : "fourth", * - Image change - .. image:: API_main_customize_events_SNP01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP01_before.html - .. image:: API_main_customize_events_SNP01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP01_after.html :::::::::::::::::::: 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. .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseDownColor : "green", SNPMouseDownCircleSize : 4, SNPMouseDownCircleOpacity : 1.0, SNPMouseDownCircleStrokeColor : "#F26223", - .. code-block:: javascript SNPMouseDownColor : "blue", SNPMouseDownCircleSize : 8, SNPMouseDownCircleOpacity : 0.5, SNPMouseDownCircleStrokeColor : "red", * - Image change - .. image:: API_main_customize_events_SNP02_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP02_before.html - .. image:: API_main_customize_events_SNP02_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP02_after.html :::::::::::::::::::: 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; .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseEnterColor : "yellow", SNPMouseEnterCircleOpacity : 1.0, SNPMouseEnterCircleStrokeColor : "#F26223", - .. code-block:: javascript SNPMouseEnterColor : "red", SNPMouseEnterCircleOpacity : 0.7, SNPMouseEnterCircleStrokeColor : "green", * - Image change - .. image:: API_main_customize_events_SNP03_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP03_before.html - .. image:: API_main_customize_events_SNP03_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP03_after.html :::::::::::::::::::: 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; .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseLeaveColor : "blue", SNPMouseLeaveCircleSize : 4, SNPMouseLeaveCircleStrokeColor : "#F26223", SNPMouseLeaveCircleStrokeWidth : 1, - .. code-block:: javascript SNPMouseLeaveColor : "red", SNPMouseLeaveCircleSize : 6, SNPMouseLeaveCircleStrokeColor : "green", SNPMouseLeaveCircleStrokeWidth : 2, * - Image change - .. image:: API_main_customize_events_SNP04_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP04_before.html - .. image:: API_main_customize_events_SNP04_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP04_after.html :::::::::::::::::::: 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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseMoveColor : "green", SNPMouseMoveCircleStrokeColor : "blue", SNPMouseMoveCircleStrokeWidth : 3, - .. code-block:: javascript SNPMouseMoveColor : "red", SNPMouseMoveCircleStrokeColor : "#F26223", SNPMouseMoveCircleStrokeWidth : 0, SNPMouseOutDisplay : true, SNPMouseOutAnimationTime : 500, SNPMouseOutColor : "none", SNPMouseOutCircleSize : "none", SNPMouseOutCircleOpacity : 1.0, SNPMouseOutCircleStrokeColor : "red", SNPMouseOutCircleStrokeWidth : 0, * - Image change - .. image:: API_main_customize_events_SNP05_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP05_before.html - .. image:: API_main_customize_events_SNP05_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP05_after.html :::::::::::::::::::: 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; .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseOutAnimationTime : 400, SNPMouseOutCircleSize : 5, SNPMouseOutCircleStrokeColor : "red", SNPMouseOutCircleStrokeWidth : 1, - .. code-block:: javascript SNPMouseOutAnimationTime : 1000, SNPMouseOutCircleSize : 5, SNPMouseOutCircleStrokeColor : "green", SNPMouseOutCircleStrokeWidth : 2, * - Image change - .. image:: API_main_customize_events_SNP06_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP06_before.html - .. image:: API_main_customize_events_SNP06_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP06_after.html :::::::::::::::::::: 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; .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseUpColor : "grey", SNPMouseUpCircleSize : 4, - .. code-block:: javascript SNPMouseUpColor : "red", SNPMouseUpCircleSize : 6, * - Image change - .. image:: API_main_customize_events_SNP07_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP07_before.html - .. image:: API_main_customize_events_SNP07_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP07_after.html :::::::::::::::::::: 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; .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseOverColor : "red", SNPMouseOverCircleSize : 4, - .. code-block:: javascript SNPMouseOverColor : "none", SNPMouseOverCircleSize : "none", * - Image change - .. image:: API_main_customize_events_SNP08_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP08_before.html - .. image:: API_main_customize_events_SNP08_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_events_SNP08_after.html ``````````````````` SCATTER module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in SCATTER module of **Customize Events** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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, 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. :::::::::::::::::::: LINK Label Drag Event :::::::::::::::::::: - ``LINKLabelDragEvent`` default false, [true/false], open/not open lINK label drag event ``````````````````` CNV module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in CNV module of **Customize Events** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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, CNVMouseOverTooltipsHtml01 : "chr : ", CNVMouseOverTooltipsHtml02 : "
start : ", CNVMouseOverTooltipsHtml03 : "
end : ", CNVMouseOverTooltipsHtml04 : "
value : ", CNVMouseOverTooltipsHtml05 : "", 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize events - HEATMAP module HEATMAPMouseEvent : true, HEATMAPMouseClickDisplay : false, HEATMAPMouseClickColor : "green", //"none","red" HEATMAPMouseClickOpacity : 1.0, //"none",1.0 HEATMAPMouseClickStrokeColor : "none", //"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. ``````````````````` HISTOGRAM module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in HISTOGRAM module of **Customize Events** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // 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. ------------------- 5.4 Customize Tooltips ------------------- ``````````````````` SNP module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in SNP module of **Customize Tooltips** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - SNP module SNPMouseOverTooltipsHtml01 : "chr : ", SNPMouseOverTooltipsHtml02 : "
position : ", SNPMouseOverTooltipsHtml03 : "
value : ", SNPMouseOverTooltipsHtml04 : "
des : ", SNPMouseOverTooltipsHtml05 : "", SNPMouseOverTooltipsPosition : "absolute", SNPMouseOverTooltipsBackgroundColor : "white", SNPMouseOverTooltipsBorderStyle : "solid", SNPMouseOverTooltipsBorderWidth : 0, SNPMouseOverTooltipsPadding : "3px", SNPMouseOverTooltipsBorderRadius : "3px", SNPMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``SNPMouseOverTooltipsHtml01`` default "chr : " - ``SNPMouseOverTooltipsHtml02`` default "
position : " - ``SNPMouseOverTooltipsHtml03`` default "
value : " - ``SNPMouseOverTooltipsHtml04`` default "
des : " - ``SNPMouseOverTooltipsHtml05`` default "" **Example**: change the tooltips content of SNP module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseOverTooltipsHtml01 : "chr : ", SNPMouseOverTooltipsHtml02 : "
position : ", SNPMouseOverTooltipsHtml03 : "
value : ", SNPMouseOverTooltipsHtml04 : "
des : ", - .. code-block:: javascript SNPMouseOverTooltipsHtml01 : "Gene : ", SNPMouseOverTooltipsHtml02 : "
Position(AA) : ", SNPMouseOverTooltipsHtml03 : "
Sample number : ", SNPMouseOverTooltipsHtml04 : "
Mutation information : ", * - Image change - .. image:: API_main_customize_tooltips_SNP01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SNP01_before.html - .. image:: API_main_customize_tooltips_SNP01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SNP01_after.html ::::::::::::::::::: 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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPMouseOverTooltipsBorderWidth : 0, SNPMouseOverTooltipsPadding : "3px", SNPMouseOverTooltipsBorderRadius : "3px", SNPMouseOverTooltipsOpacity : 1, - .. code-block:: javascript SNPMouseOverTooltipsBorderWidth : 1, SNPMouseOverTooltipsPadding : "5px", SNPMouseOverTooltipsBorderRadius : "10px", SNPMouseOverTooltipsOpacity : 0.8, * - Image change - .. image:: API_main_customize_tooltips_SNP02_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SNP02_before.html - .. image:: API_main_customize_tooltips_SNP02_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SNP02_after.html ``````````````````` SCATTER module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in SCATTER module of **Customize Tooltips** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - SCATTER module SCATTERMouseOverTooltipsHtml01 : "item : ", SCATTERMouseOverTooltipsHtml02 : "
start : ", SCATTERMouseOverTooltipsHtml03 : "
end : ", SCATTERMouseOverTooltipsHtml04 : "
name : ", SCATTERMouseOverTooltipsHtml05 : "
des : ", SCATTERMouseOverTooltipsHtml06 : "", SCATTERMouseOverTooltipsPosition : "absolute", SCATTERMouseOverTooltipsBackgroundColor : "white", SCATTERMouseOverTooltipsBorderStyle : "solid", SCATTERMouseOverTooltipsBorderWidth : 0, SCATTERMouseOverTooltipsPadding : "3px", SCATTERMouseOverTooltipsBorderRadius : "3px", SCATTERMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``SCATTERMouseOverTooltipsHtml01`` default "item : " - ``SCATTERMouseOverTooltipsHtml02`` default "
start : " - ``SCATTERMouseOverTooltipsHtml03`` default "
end : " - ``SCATTERMouseOverTooltipsHtml04`` default "
name : " - ``SCATTERMouseOverTooltipsHtml05`` default "
des : " - ``SCATTERMouseOverTooltipsHtml06`` default "" **Example**: change the tooltips content of SCATTER module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SCATTERMouseOverTooltipsHtml01 : "item : ", SCATTERMouseOverTooltipsHtml02 : "
start : ", SCATTERMouseOverTooltipsHtml03 : "
end : ", SCATTERMouseOverTooltipsHtml04 : "
name : ", SCATTERMouseOverTooltipsHtml05 : "
des : ", - .. code-block:: javascript SCATTERMouseOverTooltipsHtml01 : "chr : ", SCATTERMouseOverTooltipsHtml02 : "
start : ", SCATTERMouseOverTooltipsHtml03 : "
end : ", SCATTERMouseOverTooltipsHtml04 : "
name : ", SCATTERMouseOverTooltipsHtml05 : "
cancer type : ", * - Image change - .. image:: API_main_customize_tooltips_SCATTER01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SCATTER01_before.html - .. image:: API_main_customize_tooltips_SCATTER01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SCATTER01_after.html ::::::::::::::::::: 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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SCATTERMouseOverTooltipsBackgroundColor : "white", SCATTERMouseOverTooltipsBorderWidth : 0, SCATTERMouseOverTooltipsBorderRadius : "3px", SCATTERMouseOverTooltipsOpacity : 0.8, - .. code-block:: javascript SCATTERMouseOverTooltipsBackgroundColor : "#DCDCDC", SCATTERMouseOverTooltipsBorderWidth : 1, SCATTERMouseOverTooltipsBorderRadius : "5px", SCATTERMouseOverTooltipsOpacity : 0.7, * - Image change - .. image:: API_main_customize_tooltips_SCATTER02_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SCATTER02_before.html - .. image:: API_main_customize_tooltips_SCATTER02_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_main_customize_tooltips_SCATTER02_after.html ``````````````````` LINK module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in LINK module of **Customize Tooltips** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - LINK module LINKMouseOverTooltipsHtml01 : "Link : ", LINKMouseOverTooltipsHtml02 : "", LINKMouseOverTooltipsPosition : "absolute", LINKMouseOverTooltipsBackgroundColor : "white", LINKMouseOverTooltipsBorderStyle : "solid", LINKMouseOverTooltipsBorderWidth : 0, LINKMouseOverTooltipsPadding : "3px", LINKMouseOverTooltipsBorderRadius : "3px", LINKMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``LINKMouseOverTooltipsHtml01`` default "Link : " - ``LINKMouseOverTooltipsHtml02`` 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - CNV module CNVMouseOverTooltipsHtml01 : "chr : ", CNVMouseOverTooltipsHtml02 : "
start : ", CNVMouseOverTooltipsHtml03 : "
end : ", CNVMouseOverTooltipsHtml04 : "
value : ", CNVMouseOverTooltipsHtml05 : "", CNVMouseOverTooltipsPosition : "absolute", CNVMouseOverTooltipsBackgroundColor : "white", CNVMouseOverTooltipsBorderStyle : "solid", CNVMouseOverTooltipsBorderWidth : 0, CNVMouseOverTooltipsPadding : "3px", CNVMouseOverTooltipsBorderRadius : "3px", CNVMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``CNVMouseOverTooltipsHtml01`` default "chr : " - ``CNVMouseOverTooltipsHtml02`` default "
start : " - ``CNVMouseOverTooltipsHtml03`` default "
end : " - ``CNVMouseOverTooltipsHtml04`` default "
value : " - ``CNVMouseOverTooltipsHtml05`` 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - ARC module ARCMouseOverTooltipsHtml01 : "item : ", ARCMouseOverTooltipsHtml02 : "
start : ", ARCMouseOverTooltipsHtml03 : "
end : ", ARCMouseOverTooltipsHtml04 : "
des : ", ARCMouseOverTooltipsHtml05 : "", ARCMouseOverTooltipsPosition : "absolute", ARCMouseOverTooltipsBackgroundColor : "white", ARCMouseOverTooltipsBorderStyle : "solid", ARCMouseOverTooltipsBorderWidth : 0, ARCMouseOverTooltipsPadding : "3px", ARCMouseOverTooltipsBorderRadius : "3px", ARCMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``ARCMouseOverTooltipsHtml01`` default "item : " - ``ARCMouseOverTooltipsHtml02`` default "
start : " - ``ARCMouseOverTooltipsHtml03`` default "
end : " - ``ARCMouseOverTooltipsHtml04`` default "
des : " - ``ARCMouseOverTooltipsHtml05`` 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - HEATMAP module HEATMAPMouseOverTooltipsHtml01 : "chr : ", HEATMAPMouseOverTooltipsHtml02 : "
position: ", HEATMAPMouseOverTooltipsHtml03 : "-", HEATMAPMouseOverTooltipsHtml04 : "
name : ", HEATMAPMouseOverTooltipsHtml05 : "
value : ", HEATMAPMouseOverTooltipsHtml06 : "", HEATMAPMouseOverTooltipsPosition : "absolute", HEATMAPMouseOverTooltipsBackgroundColor : "white", HEATMAPMouseOverTooltipsBorderStyle : "solid", HEATMAPMouseOverTooltipsBorderWidth : 0, HEATMAPMouseOverTooltipsPadding : "3px", HEATMAPMouseOverTooltipsBorderRadius : "3px", HEATMAPMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``HEATMAPMouseOverTooltipsHtml01`` default "chr : " - ``HEATMAPMouseOverTooltipsHtml02`` default "
position: " - ``HEATMAPMouseOverTooltipsHtml03`` default "-" - ``HEATMAPMouseOverTooltipsHtml04`` default "
name : " - ``HEATMAPMouseOverTooltipsHtml05`` default "
value : " - ``HEATMAPMouseOverTooltipsHtml06`` 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 ``````````````````` HISTOGRAM module ``````````````````` :::::::::::::::::::::::::::::: (1)All configuration parameters :::::::::::::::::::::::::::::: Here we show all the configuration parameters in HISTOGRAM module of **Customize Tooltips** class. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - HISTOGRAM module HISTOGRAMMouseOverTooltipsHtml01 : "chr :", HISTOGRAMMouseOverTooltipsHtml02 : "
position: ", HISTOGRAMMouseOverTooltipsHtml03 : "-", HISTOGRAMMouseOverTooltipsHtml04 : "
name : ", HISTOGRAMMouseOverTooltipsHtml05 : "
value : ", HISTOGRAMMouseOverTooltipsHtml06 : "", HISTOGRAMMouseOverTooltipsPosition : "absolute", HISTOGRAMMouseOverTooltipsBackgroundColor : "white", HISTOGRAMMouseOverTooltipsBorderStyle : "solid", HISTOGRAMMouseOverTooltipsBorderWidth : 0, HISTOGRAMMouseOverTooltipsPadding : "3px", HISTOGRAMMouseOverTooltipsBorderRadius : "3px", HISTOGRAMMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``HISTOGRAMMouseOverTooltipsHtml01`` default "chr :" - ``HISTOGRAMMouseOverTooltipsHtml02`` default "
position: " - ``HISTOGRAMMouseOverTooltipsHtml03`` default "-" - ``HISTOGRAMMouseOverTooltipsHtml04`` default "
name : " - ``HISTOGRAMMouseOverTooltipsHtml05`` default "
value : " - ``HISTOGRAMMouseOverTooltipsHtml06`` 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. .. code-block:: javascript BioCircos01 = new BioCircos(BioCircosGenome,{ // Main configuration - Customize Tooltips - LINE module LINEMouseOverTooltipsHtml01 : "Line", LINEMouseOverTooltipsPosition : "absolute", LINEMouseOverTooltipsBackgroundColor : "white", LINEMouseOverTooltipsBorderStyle : "solid", LINEMouseOverTooltipsBorderWidth : 0, LINEMouseOverTooltipsPadding : "3px", LINEMouseOverTooltipsBorderRadius : "3px", LINEMouseOverTooltipsOpacity : 0.8, }); :::::::::::::::::::::::::::::: (2)Configuration and examples :::::::::::::::::::::::::::::: ::::::::::::::::::: Tooltips content ::::::::::::::::::: - ``LINEMouseOverTooltipsHtml01`` default "Line" LINEMouseOverTooltipsHtml01 ::::::::::::::::::: Tooltips style ::::::::::::::::::: - ``LINEMouseOverTooltipsPosition`` default "absolute" - ``LINEMouseOverTooltipsBackgroundColor`` default "white" - ``LINEMouseOverTooltipsBorderStyle`` default "solid" - ``LINEMouseOverTooltipsBorderWidth`` default 0 - ``LINEMouseOverTooltipsPadding`` default "3px" - ``LINEMouseOverTooltipsBorderRadius`` default "3px" - ``LINEMouseOverTooltipsOpacity`` default 0.8 ``````````````````` Advanced tooltips ``````````````````` Tooltips is a html element : ``
``. So web developers can use CSS to configure tooltips. :::::::::::::::::::::::::::::: (1)CSS API for advanced users :::::::::::::::::::::::::::::: .. code-block:: html :::::::::::::::::::::::::::::: (2)Example: CSS API for SNP module :::::::::::::::::::::::::::::: .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: html - .. code-block:: html * - Image change - .. image:: API_CSS_tooltips_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_CSS_tooltips_before.html - .. image:: API_CSS_tooltips_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_CSS_tooltips_after.html ======================== 6. API: Data configuration ======================== ------------------- 6.1 SNP module ------------------- .. code-block:: javascript var SNP01 = [ "SNP01" , { maxRadius: 205, minRadius: 153, SNPFillColor: "#9400D3", PointType: "circle", circleSize: 2, rectWidth: 2, rectHeight: 2, SNPAnimationDisplay: false, SNPAnimationTime: 2000, SNPAnimationDelay: 20, SNPAnimationType: "bounce", //linear,circle,elastic,bounce } , [ {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)"}, ]]; ``````````````````````` 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 - ``SNPFillColor`` default "#9400D3", SNP color - ``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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript minRadius: 153, circleSize: 2, - .. code-block:: javascript minRadius: 103, circleSize: 3, * - Image change - .. image:: API_data_configuration_SNP01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_SNP01_before.html - .. image:: API_data_configuration_SNP01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_SNP01_after.html - ``SNPAnimationDisplay`` default "false", [true/false], open/not open animation event of SNP module - ``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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SNPFillColor: "#9400D3", SNPAnimationDisplay: true, SNPAnimationTime: 1000, SNPAnimationDelay: 0, SNPAnimationType: "circle", - .. code-block:: javascript SNPFillColor: "red", SNPAnimationDisplay: true, SNPAnimationTime: 2000, SNPAnimationDelay: 20, SNPAnimationType: "bounce", * - Image change - .. image:: SNPAnimation01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/SNPAnimation01_before.html - .. image:: SNPAnimation01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/SNPAnimation01_after.html `````````````` 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. ------------------- 6.2 SCATTER module ------------------- .. code-block:: javascript 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"}, {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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript SCATTERRadius: 220, innerCircleSize: 1, outerCircleSize: 7, outerCircleColor: "#CC3399", outerCircleOpacity: 1, - .. code-block:: javascript SCATTERRadius: 190, innerCircleSize: 2, outerCircleSize: 9, outerCircleColor: "green", outerCircleOpacity: 0.5, * - Image change - .. image:: API_data_configuration_SCATTER01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_SCATTER01_before.html - .. image:: API_data_configuration_SCATTER01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_SCATTER01_after.html - ``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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript outerCircleColor: "#CC3399", SCATTERAnimationDisplay: true, SCATTERAnimationTime: 2000, SCATTERAnimationDelay: 20, SCATTERAnimationType: "bounce", - .. code-block:: javascript outerCircleColor: "green", SCATTERAnimationDisplay: true, SCATTERAnimationTime: 1000, SCATTERAnimationDelay: 400, SCATTERAnimationType: "circle", * - Image change - .. image:: SCATTERAnimation01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/SCATTERAnimation01_before.html - .. image:: SCATTERAnimation01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/SCATTERAnimation01_after.html `````````````` 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. ------------------- 6.3 LINK module ------------------- .. code-block:: javascript var LINK01 = [ "LINK01" , { LinkRadius: 140, LinkFillColor: "#F26223", LinkWidth: 3, displayLinkAxis: true, LinkAxisColor: "#B8B8B8", LinkAxisWidth: 0.5, LinkAxisPad: 3, displayLinkLabel: true, LinkLabelColor: "red", LinkLabelSize: 13, LinkLabelPad: 8, } , [ {fusion: "FGFR3--TACC3", g1chr: "4", g1start: "1795662", g1end: "1808986", g1name: "FGFR3", g2chr: "4", g2start: "1723217", g2end: "1746905", g2name: "TACC3"}, {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 - ``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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript LinkRadius: 140, LinkFillColor: "#F26223", LinkAxisWidth: 0.5, displayLinkLabel: true, LinkLabelColor: "red", LinkLabelSize: 13, LinkLabelPad: 8, - .. code-block:: javascript LinkRadius: 170, LinkFillColor: "red", LinkAxisWidth: 3, displayLinkLabel: false, LinkLabelColor: "red", LinkLabelSize: 13, LinkLabelPad: 8, * - Image change - .. image:: API_data_configuration_LINK01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_LINK01_before.html - .. image:: API_data_configuration_LINK01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_LINK01_after.html `````````````` 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. ------------------- 6.4 CNV module ------------------- .. code-block:: javascript 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"}, ]]; ``````````````````````` 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 **Example**: change data configuration of CNV module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript CNVwidth: 2, CNVColor: "#4876FF", - .. code-block:: javascript CNVwidth: 4, CNVColor: "red", * - Image change - .. image:: API_data_configuration_CNV01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_CNV01_before.html - .. image:: API_data_configuration_CNV01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_CNV01_after.html `````````````` 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. ------------------- 6.5 ARC module ------------------- .. code-block:: javascript 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"}, ]]; ``````````````````````` Part 1 : Configuration ``````````````````````` - ``innerRadius`` default -55, inner radius of arc - ``outerRadius`` default -45, outer radius of arc **Example**: change data configuration of ARC module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript innerRadius: -55, outerRadius: -45, - .. code-block:: javascript innerRadius: 8, outerRadius: -8, * - Image change - .. image:: API_data_configuration_ARC01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_ARC01_before.html - .. image:: API_data_configuration_ARC01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_ARC01_after.html `````````````` 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. ------------------- 6.6 HEATMAP module ------------------- .. code-block:: javascript 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"}, ]]; ``````````````````````` 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 **Example**: change data configuration of HEATMAP module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript innerRadius: -25, outerRadius: -65, maxColor: "red", minColor: "yellow" - .. code-block:: javascript innerRadius: -65, outerRadius: -115, maxColor: "red", minColor: "green" * - Image change - .. image:: API_data_configuration_HEATMAP01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_HEATMAP01_before.html - .. image:: API_data_configuration_HEATMAP01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_HEATMAP01_after.html `````````````` 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. ------------------- 6.7 HISTOGRAM module ------------------- .. code-block:: javascript 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"}, ]]; ``````````````````````` 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 **Example**: change data configuration of HISTOGRAM module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript maxRadius: 220, minRadius: 185, histogramFillColor: "#FF6666", - .. code-block:: javascript maxRadius: 170, minRadius: 135, histogramFillColor: "green", * - Image change - .. image:: API_data_configuration_HISTOGRAM01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_HISTOGRAM01_before.html - .. image:: API_data_configuration_HISTOGRAM01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_HISTOGRAM01_after.html `````````````` 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. ------------------- 6.8 LINE module ------------------- .. code-block:: javascript 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"}, ]]; ``````````````````````` 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 **Example**: change data configuration of LINE module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript LineColor: "#EEAD0E", LineWidth: 2, - .. code-block:: javascript LineColor: "green", LineWidth: 1, * - Image change - .. image:: API_data_configuration_LINE01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_LINE01_before.html - .. image:: API_data_configuration_LINE01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_LINE01_after.html `````````````` 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. ------------------- 6.9 BACKGROUND module ------------------- .. code-block:: html ``````````````````````` 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 .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript BginnerRadius: 200, BgouterRadius: 150, BgborderSize : 0.3, axisShow: "false", axisWidth: 0.1, axisColor: "#000", axisNum: 8 - .. code-block:: javascript BginnerRadius: 190, BgouterRadius: 100, BgborderSize : 0.4, axisShow: "true", axisWidth: 0.2, axisColor: "red", axisNum: 5 * - Image change - .. image:: API_data_configuration_BACKGROUND01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_BACKGROUND01_before.html - .. image:: API_data_configuration_BACKGROUND01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_BACKGROUND01_after.html ------------------- 6.10 TEXT module ------------------- .. code-block:: html ``````````````````````` 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 - ``textSize`` default "TEXT", text content **Example**: change data configuration of TEXT module .. list-table:: :widths: 10 60 60 :header-rows: 1 * - Example - Before - After * - Code change - .. code-block:: javascript x: -20, y: 0, textSize: 20, textWeight: "bold", textColor: "red", textOpacity: 1.0, text: "EGFR" - .. code-block:: javascript x: -60, y: 1, textSize: 18, textWeight: "300", textColor: "green", textOpacity: 0.9, text: "EGFR - Mutations" * - Image change - .. image:: API_data_configuration_TEXT01_before.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_TEXT01_before.html - .. image:: API_data_configuration_TEXT01_after.png :scale: 50% :height: 300px :width: 600px :alt: alternate text :align: left :target: demo/pages/API_data_configuration_TEXT01_after.html ======================== 7. API: Genome configuration ======================== **"Genome configuration"** defines the number and size of chromosomes. .. note:: **"Genome configuration"** is especially simple compared to the other two modules. But it is very important for beginners, so here is a special emphasis on how to use it. ------------------- 7.1 Genome configuration ------------------- Genome configuration is set in a ** .. image:: demo_genome_configuration02.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_genome_configuration02.html ------------------- 7.3 Example: Human genome (hg19) ------------------- .. code-block:: html .. image:: demo_genome_configuration03.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_genome_configuration03.html ------------------- 7.4 Example: Add chromosome band on Human genome(hg19) ------------------- The chromosome band represents the approximate location of bands seen on Giemsa-stained chromosomes. Color of chromosome band is the as Circos. .. list-table:: :widths: 15 15 15 10 20 :header-rows: 1 * - Species - Genome version - Data name - Genome - cytoBand in UCSC * - Human - grch38 - ARC_grch38 - `genome <./genome_resource/karyotype.human.grch38_genome.js>`_ - `karyotype.human.grch38.js <./genome_resource/karyotype.human.grch38.js>`_ * - Human - hg19 - ARC_hg19 - `genome <./genome_resource/karyotype.human.hg19_genome.js>`_ - `karyotype.human.hg19.js <./genome_resource/karyotype.human.hg19.js>`_ * - human - hg18 - ARC_hg18 - `genome <./genome_resource/karyotype.human.hg18_genome.js>`_ - `karyotype.human.hg18.js <./genome_resource/karyotype.human.hg18.js>`_ * - Mouse - mm10 - ARC_mm10 - `genome <./genome_resource/karyotype.mouse.mm10_genome.js>`_ - `karyotype.mouse.mm10.js <./genome_resource/karyotype.mouse.mm10.js>`_ * - Mouse - mm9 - ARC_mm9 - `genome <./genome_resource/karyotype.mouse.mm9_genome.js>`_ - `karyotype.mouse.mm9.js <./genome_resource/karyotype.mouse.mm9.js>`_ .. code-block:: html .. image:: demo_genome_configuration04.png :scale: 100% :alt: alternate text :align: left :target: demo/pages/demo_genome_configuration04.html