Visualize Data In A Circular Layout – Circos.js

Preview:

Description:

Circos.js is a JavaScript graph library to visualizes data in a circular layout that is great for exploring relationships between objects or positions.

Based on the familiar d3.js library and SVG element.

Data Series supported:

• Chords
• Heatmap
• Highlight
• Histogram
• Line
• Scatter
• Stack
• Text

How to use it:

Install the Circos.js with NPM.

# NPM
$ npm install circos --save

Include the Circos.js from the dist folder.

<script src='/dist/circos.min.js'></script>

Create a placeholder element for the Circos graph.

<div class="myGraph"></div>

Create a new Circos graph instance with options.

var myCircos = new Circos({
    container: '#myGraph',
    width: 700,
    height: 700,
    defaultTrackWidth: 10
});

Insert data to the Circos graph.

myCircos.layout(data, configuration);
myCircos.chords(id, data, configuration);
myCircos.heatmap(id, data, configuration);
myCircos.highlight(id, data, configuration);
myCircos.histogram(id, data, configuration);
myCircos.line(id, data, configuration);
myCircos.scatter(id, data, configuration);
myCircos.stack(id, data, configuration);
myCircos.text(id, data, configuration);

Render the Circos graph.

myCircos.render();

All possible options for the data series.

myCircos.layout(data, {
  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,
    }
  },
  events: {}
});

More Previews:

Circos.js Heatmap

Circos.js Highlight

Circos.js Histogram

Circos.js Line

Circos.js Scatter

Circos.js Stack

Circos.js Text