To instantiate a new circos:
var instance = new circosJS({
container: '#chart',
width: 200,
height: 200
});
A circos graph is based on a circular axis layout. Data tracks appear inside and/or outside the circular layout.
In order to place data on the circos graph, you must first specify a layout.
instance.layout(configuration, layout_data);
The first argument of the layout
function is a configuration object that control the format of the layout.
Here are the default parameters for a layout:
var configuration = {
innerRadius: 250,
outerRadius: 300,
cornerRadius: 10,
gap: 0.04, // in radian
labels: {
display: true,
position: 'center',
size: '14px',
color: '#000000',
radialOffset: 20,
},
ticks: {
display: true,
color: 'grey',
spacing: 10000000,
labels: true,
labelSpacing: 10,
labelSuffix: 'Mb',
labelDenominator: 1000000,
labelDisplay0: true,
labelSize: '10px',
labelColor: '#000000',
labelFont: 'default',
majorSpacing: 5,
size: {
minor: 2,
major: 5,
}
},
clickCallback: null
}
The second argument of the layout
function is an array of data that describe the layout regions. Each layout region must have an id and a length. You can also specify a color and a label.
var layout_data = [
{ "len": 31, "color": "#8dd3c7", "label": "January", "id": "january" },
{ "len": 28, "color": "#ffffb3", "label": "February", "id": "february" },
{ "len": 31, "color": "#bebada", "label": "March", "id": "march" },
{ "len": 30, "color": "#fb8072", "label": "April", "id": "april" },
{ "len": 31, "color": "#80b1d3", "label": "May", "id": "may" },
{ "len": 30, "color": "#fdb462", "label": "June", "id": "june" },
{ "len": 31, "color": "#b3de69", "label": "July", "id": "july" },
{ "len": 31, "color": "#fccde5", "label": "August", "id": "august" },
{ "len": 30, "color": "#d9d9d9", "label": "September", "id": "september" },
{ "len": 31, "color": "#bc80bd", "label": "October", "id": "october" },
{ "len": 30, "color": "#ccebc5", "label": "November", "id": "november" },
{ "len": 31, "color": "#ffed6f", "label": "December", "id": "december" }
]
The id
parameter will be used to place data points on the layout.
To visualize the result:
instance.render();