react-sigmajs alternatives and similar libraries
Based on the "Chart" category.
Alternatively, view react-sigmajs alternatives based on common mentions on social networks and blogs.
-
victory
A collection of composable React components for building interactive data visualizations -
react-chartjs-2
React components for Chart.js, the most popular charting library -
react-chartjs
Common react charting components using chart.js. -
react-sparklines
Beautiful and expressive Sparklines React component -
react-google-charts
A thin, typed, React wrapper over Google Charts Visualization and Charts API. -
react-timeseries-charts
Declarative and modular timeseries charting components for React -
chartify
๐ ๐ ๐ React.js plugin for building charts using CSS -
rumble-charts
React components for building composable and flexible charts -
d3-react-squared
Lightweight event system for (d3) charts and other components for ReactJS. -
react-sparkline
React component for rendering simple sparklines -
react-micro-bar-chart
React component for micro bar-charts rendered with D3 -
Flowchart React
Lightweight flowchart & flowchart designer for React.js. -
JSCharting for React
Official JSCharting React Plugin & Examples -
essential js 2 charts
Beautiful and interactive charts & graphs for react.
Appwrite - The open-source backend cloud platform
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of react-sigmajs or a related project?
README
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
See storybook for working examples.
Please make sure to read CONTRIBUTION prerequisites section 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:
<script src="https://unpkg.com/[email protected]/dist/react-sigma.min.js"/>
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"}]};
...
<Sigma graph={myGraph} settings={{drawEdges: true, clone: false}}>
<RelativeSize initialSize={15}/>
<RandomizeNodePositions/>
</Sigma>
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. Sigma updates graph positions, therefore if to keep track of nodes in this example we use
<Sigma settings={{clone: false}}>
Simple use case with graph loaded from external file
import {Sigma, LoadJSON} from 'react-sigma'
...
<Sigma style={{width:"200px", height:"200px"}}>
<LoadJSON path="/public/data.json" />
</Sigma>
Advanced use case
...
<Sigma renderer="canvas">
<EdgeShapes default="tapered"/>
<NodeShapes default="star"/>
<LoadGEXF path={String(process.env.PUBLIC_URL) + "/arctic.gexf"}>
<Filter neighborsOf={ this.state.filterNeighbours } />
<ForceAtlas2 worker barnesHutOptimize barnesHutTheta={0.6} iterationsPerRender={10} linLogMode timeout={3000}/>
<RelativeSize initialSize={15}/>
</LoadGEXF>
</Sigma>
Components reference
Please see react-sigma reference 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.:
<Sigma renderer="webgl" style={{maxWidth:"inherit", height:"400px"}}
settings={{drawEdges:false}}
onOverNode={e => console.log("Mouse over node: " + e.data.node.label)}
graph={{nodes:["id0", "id1"], edges:[{id:"e0",source:"id0",target:"id1"}]}}>
<RelativeSize initialSize={8} />
</Sigma>
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'
...
<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'
...
<Sigma renderer="svg" />
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 <Sigma>
<MyCustomSigma label="Label">
</Sigma>
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.
<Sigma>
<LoadJSON url="/arctic.json">
<RelativeSize initialSize={8}/>
</LoadJSON>
</Sigma>
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 library built by @jacomyal and @Yomguithereal