Visualize Data In A Circular Layout – Circos.js

Category: Chart & Graph , Javascript | July 30, 2019
Author: nicgirault
Views Total: 96
Official Page: Go to website
Last Update: July 30, 2019
License: MIT

Preview:

Visualize Data In A Circular Layout – Circos.js

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 Heatmap

Circos.js Highlight

Circos.js Highlight

Circos.js Histogram

Circos.js Histogram

Circos.js Line

Circos.js Line

Circos.js Scatter

Circos.js Scatter

Circos.js Stack

Circos.js Stack

Circos.js Text

Circos.js Text

 

You Might Be Interested In:


Leave a Reply