<![CDATA[BOL: Circos with circosJS]]>

<![CDATA[BOL: Circos with circosJS]]> https://bioinformaticsonline.com/snippets/view/41326/circos-with-circosjs? https://bioinformaticsonline.com/snippets/view/41326/circos-with-circosjs Mon, 02 Mar 2020 23:29:38 -0600 https://bioinformaticsonline.com/snippets/view/41326/circos-with-circosjs <![CDATA[Circos with circosJS]]> <!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>]]> Rahul Nayak