<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
<script src='https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.js'></script>
</head>
<body>
<script>
let width = $(window).width() - 20,
height = $(window).height() - 20
let svg = d3.select("body")
.append("svg")
.attr('id', 'chart')
.attr("width", width)
.attr("height", height)
let instance = new Circos({
container: '#chart',
width: width,
height: height,
})
let 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"},
];
let layout_data2 = [
{ source: { id: 'january', start: 1, end: 12 }, target: { id: 'april', start: 18, end: 20 }},
{ source: { id: 'february', start: 20, end: 28}, target: { id: 'december', start: 1, end: 13}}
];
let 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
}
instance.layout(layout_data, configuration)
instance.render()
</script>
</body>
</html>
