CircosJS

CircosJS is a javascript library to easily build an interactive circos graphs. It is based on d3 library.

Circos graphs have been created by Martin Krzywinski.

Get started

In an html page, insert the circosJS library

<script src='dist/circosJS.full.js'></script>
<link rel='stylesheet' href='dist/circosJS.full.css'></link>

Then you can create a layout has followed:

var karyotype = [
    {len: 249250621, color: 'rgb(153,102,0)', label: '1', id: 'chr1'},
    {len: 243199373, color: 'rgb(102,102,0)', label: '2', id: 'chr2'},
    {len: 198022430, color: 'rgb(153,153,30)', label: '3', id: 'chr3'},
    {len: 191154276, color: 'rgb(204,0,0)', label: '4', id: 'chr4'},
    {len: 180915260, color: 'rgb(255,0,0)', label: '5', id: 'chr5'},
    {len: 171115067, color: 'rgb(255,0,204)', label: '6', id: 'chr6'},
    {len: 159138663, color: 'rgb(255,204,204)', label: '7', id: 'chr7'},
    {len: 146364022, color: 'rgb(255,153,0)', label: '8', id: 'chr8'},
    {len: 141213431, color: 'rgb(255,204,0)', label: '9', id: 'chr9'},
    {len: 135534747, color: 'rgb(255,255,0)', label: '10', id: 'chr10'},
    {len: 135006516, color: 'rgb(204,255,0)', label: '11', id: 'chr11'},
    {len: 133851895, color: 'rgb(0,255,0)', label: '12', id: 'chr12'},
    {len: 115169878, color: 'rgb(53,128,0)', label: '13', id: 'chr13'},
    {len: 107349540, color: 'rgb(0,0,204)', label: '14', id: 'chr14'},
    {len: 102531392, color: 'rgb(102,153,255)', label: '5', id: 'chr15'},
    {len: 90354753, color: 'rgb(153,204,255)', label: '16', id: 'chr16'},
    {len: 81195210, color: 'rgb(0,255,255)', label: '17', id: 'chr17'},
    {len: 78077248, color: 'rgb(204,255,255)', label: '18', id: 'chr18'},
    {len: 59128983, color: 'rgb(153,0,204)', label: '19', id: 'chr19'},
    {len: 63025520, color: 'rgb(204,51,255)', label: '20', id: 'chr20'},
    {len: 48129895, color: 'rgb(204,153,255)', label: '21', id: 'chr21'},
    {len: 51304566, color: 'rgb(102,102,102)', label: '22', id: 'chr22'},
    {len: 155270560, color: 'rgb(153,153,153)', label: 'X', id: 'chrX'},
    {len: 59373566, color: 'rgb(204,204,204)', label: 'Y', id: 'chrY'},
];
var circos = new circosJS({
    width: 500,
    height: 500,
    container: '#chart'
});
circos.layout(
    {
        innerRadius: 200,
        outerRadius: 250
    },
    karyotype
).render();

API documentation

• Create a Circos Instance: var circos = new circosJS({ width: 500, //px height: 500, //px container: '#chart' //the selector of the empty svg tag in the document });

Methods:

- (circos) layout(conf, data)
    conf: an object with following properties
        + innerRadius //(default 250)
        + outerRadius //(default 300)
        + gap //(default 0.04) in radian
        + labelPosition //(default 'center'). Possible values: 'none', 'center'
        + labelRadialOffset //(default 0)
    data: an array of objects with properties:
        + len (*)
        + id (*)
        + color
        + label
        (*) = required
- (circos) heatmap(id, conf, data)
    id: a unique string to identify the heatmap
    conf:
        + innerRadius //(default 200)
        + outerRadius //(default 250)
        + min //(default 'smart'). Can be a number or the string 'smart' (it will compute the min value of data). Used for color mapping.
        + max //(default 'smart'). Can be a number or the string 'smart' (it will compute the max value of data). Used for color mapping.
        + colorPalette //(default 'YlGnBu'). See colorbrewer palettes
        + colorPaletteSize //(default 9)
    data: an array of objects with properties:
        + parent: corresponding to the id of a layout datum
        + data: an array of objects with the given properties:
            + start: integer between 1 and the value of the len property of corresponding layout datum
            + end: integer between 1 and the value of the len property of corresponding layout datum
            + value: the color mapping will be done according to this value

Author

Nicolas Girault [email protected]