Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dunnock/react-sigma

Lightweight React library for drawing network graphs built on top of SigmaJS
https://github.com/dunnock/react-sigma

hacktoberfest jsx react svg webgl webpack

Last synced: 9 days ago
JSON representation

Lightweight React library for drawing network graphs built on top of SigmaJS

Awesome Lists containing this project

README 

        
[![npm version][img-1]][1]

[![Build Status][img-2]][2]



[img-1]: https://img.shields.io/npm/v/react-sigma.svg

[img-2]: https://travis-ci.org/dunnock/react-sigma.svg?branch=master



[1]: https://www.npmjs.com/package/react-sigma "npm version"

[2]: https://travis-ci.org/dunnock/react-sigma



It makes easy to publish networks on Web pages and allows developers to integrate network exploration in rich Web applications. Use JSX for graph configuration, including asynchronous graph loading. Library is lightweight and modular, so you can bundle only what you use. Easy to extend with additional components.



## Table of Contents



- [Usage](#usage)

- [Components reference](#components-reference)

 - [Sigma](#sigma)

 - [SigmaEnableWebGL](#sigmaenablewebgl)

 - [Extending sigma components](#extending-sigma-components)

 - [Components composition](#components-composition)

- [Types](#types)



# Usage



See [storybook for working examples](https://dunnock.github.io/react-sigma/).



Please make sure to read [CONTRIBUTION prerequisites section](https://github.com/dunnock/react-sigma/blob/master/CONTRIBUTION.md#prerequisites) if you want to fork & change or contribute.



## Install



`npm install --save react-sigma`



or



`yarn add react-sigma`



or



`bower install https://unpkg.com/[email protected]/dist/react-sigma.min.js`



If you don't want to use webpack or browserify, you could always reference the

single file distribution, library will be available under global var ReactSigma:



``



## Simple use case with embedded graph



```

import {Sigma, RandomizeNodePositions, RelativeSize} from 'react-sigma';

...

let myGraph = {nodes:[{id:"n1", label:"Alice"}, {id:"n2", label:"Rabbit"}], edges:[{id:"e1",source:"n1",target:"n2",label:"SEES"}]};

...



  

  



```

Note that graph nodes require x, y and size defined in order to be displayed, [plugins like RelativeSize and RandomizeNodePositions might help to generate those](https://github.com/dunnock/react-sigma/blob/master/DOCS.md#nodes-distribution). Sigma updates graph positions, therefore if to keep track of nodes in this example we use 

``



## Simple use case with graph loaded from external file



```

import {Sigma, LoadJSON} from 'react-sigma'

...



  



```



## Advanced use case

```

...



	

	

	

		

		

		

	



```



# Components reference



Please see [react-sigma reference](https://github.com/dunnock/react-sigma/blob/master/DOCS.md) for details. Below is a brief concept.



## Sigma



Sigma is the main component which reserves 
 area with a given style (default is full width, 500px height),

initializes renderer and camera in the given area and starts rendering graph.

 be composed with sigma plugins using JSX syntax, e.g.:



```

 console.log("Mouse over node: " + e.data.node.label)}

		graph={{nodes:["id0", "id1"], edges:[{id:"e0",source:"id0",target:"id1"}]}}>

	



```



## SigmaEnableWebGL



By default sigma package includes only canvas rendering functions with webpack2, though it can be easily extended with WebGL or SVG (see next topic). Importing SigmaEnableWebGL enables WebGL renderer, setting it as default renderer if WebGL is supported by browser. 



```

import { Sigma, SigmaEnableWebGL } from 'react-sigma'

...

 // will use webgl renderer if supported by browser

```



## SigmaEnableSVG



Sigma can be easily extended with SVG renderer. Importing SigmaEnableSVG enables SVG renderer, though it does not set it as default so renderer should be explicitly specified in sigma options. 



```

import { Sigma, SigmaEnableSVG } from 'react-sigma'

...

 

```



## Extending sigma components



Sigma container will mount any child component with sigma instance under props.sigma. This way you can write custom sigma-aware components:



```

class MyCustomSigma extends React.Component {

	constructor(props) {

		super(props)

		props.sigma.graph.addNode({id:"n3", label:props.label})

	}

}

...

return  

	



```



## Components composition



Component which initialize or provide graph changes asynchronously are supposed to mount children

after initialized. For instance LoadJSON will render child subcomponents only after loading. This makes possible to build sequential composition in the pure JSX without any callbacks or handlers. In the following example RelativeSize will be instantiated only after loading from arctic.json file.



```



	

		

	



```



# Types



All defined Sigma types stored under /types/sigma.js, can be used as a reference for objects and parameters.

TODO: move to flow-typed



# Attributions



 - this project is a React wrapper around excellent [Sigma.JS](https://github.com/jacomyal/sigma.js) library built by @jacomyal and @Yomguithereal