Skip to content

plotly/react-circosJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-circos

A React wrapper for CircosJS

temperatures
Average temperatures in Paris from 2007 (inner) to 2014 (outer). The circular layout highlights seasonal effect.

Usage

yarn add react-circos
import React from 'react';
import Circos, { HEATMAP } from 'react-circos';
import layout from 'examples/fixtures/months.json';
import heatmap from 'examples/fixtures/heatmap.json';

const size = 800;

const HeatmapTest = () => (
  <Circos
    size={800}
    layout={layout}
    config={{
      innerRadius: size / 2 - 80,
      outerRadius: size / 2 - 30,
      ticks: {
        display: false,
      },
      labels: {
        position: 'center',
        display: true,
        size: 14,
        color: '#000',
        radialOffset: 15,
      },
    }}
    tracks={[{
      type: HEATMAP,
      data: heatmap,
      config: {
        innerRadius: 0.8,
        outerRadius: 0.98,
        logScale: false,
        color: 'YlOrRd',
      },
    }]}
  />
);

More examples here. The config and data of each track should follow the specification of circosJS

Contribute

Useful commands & tips:

yarn test --watch
yarn build --watch

Read about yarn link