React Circos API

react-circos.js

import Circos from 'react-circos';

var configuration = {
  height: 500,
  width: 500,
  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,
    }
  },
}

var 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" }
]

/* Calendar Heatmap Circos */

<Circos
    config = configuration // base layout
    data = data // base layout
    tracks = [ {type: 'heatmap', data: hmapData, config: hmapConfig} ]
    onChange = handleOnChange                                                   
/>

                                                         
                                                         
                                                         
                                                         
                                                         
                                                         
                                                         
/* ******************************************************* */                                                         
/* Human karyotype Circos with highlights and chords props */
/* ******************************************************* */ 
        
cytoData = cytobands.map(function (d) {
    return {
        block_id: d.chrom,
        start: parseInt(d.chromStart),
        end: parseInt(d.chromEnd),
        gieStain: d.gieStain,
        name: d.name
    }
})                                                        

var chordData = data.map(function (d) {
    return {
      source: {
        id: d.source_id,
        start: parseInt(d.source_breakpoint) - 2000000,
        end: parseInt(d.source_breakpoint) + 2000000
      },
      target: {
        id: d.target_id,
        start: parseInt(d.target_breakpoint) - 2000000,
        end: parseInt(d.target_breakpoint) + 2000000
      }
    }
  })             
              
var highlightsTrack = {
    type: 'highlights'
    data: cyctoData,
    config: {
        innerRadius: width/2 - 80,
        outerRadius: width/2 - 40,
        opacity: 0.3,
        gieStainColor: { gpos100: 'rgb(0,0,0)', ...}
        tooltip: `Cytoband: ${name}` /* Idea: Maybe use a tempate for tooltips? */
    }
}                                                        

var chordsTrack = {
    type: 'chords'
    data: chordData, 
    config: {
        logScale: false, opacity: 0.7, color: 'red', tooltip: `${source.id} ➤ ${target.id}`
    }
}

<Circos
    config = {width: '500', height: '500'} // base layout
    data = data
    tracks = [ highlightsTrack, chordsTrack ]
    onChange = handleOnChange                                                   
/>