WebGL-Powered
Open-Source Network Graph Visualization
Layout Engines
Commits
Stars
Awesome Product
Fully Customizable
Built on D3 with full control over visuals, interactions, and behavior.
2D & 3D Support
Supports 2D and 3D views with smooth Motion animations.
Large Data Handling
Handles high-volume datasets with fast rendering and simple setup.
Hyper Intelligent
Smart defaults make charts look great with zero configuration.
Complex Clustering
Built for advanced use cases with support for complex data patterns.
So much more
Free to use, easy to extend, and ready for any project size.
Getting started 🚀
Integrating Reagraph them in your application
To get started with Reagraph just need to install the package and import the component.
Learn more$ npm install reagraph -S
import { GraphCanvas } from 'reagraph';Let's build something amazing
Let's define some nodes and edges. Nodes are the blocks and edges are the relationships between the blocks.
The data shapes require one property of id but you can pass label or icon to them to show some sort of indication what it represents.
Learn more<GraphCanvas
nodes={[
{ id: '1', label: 'Node 1'},
{ id: '2', label: 'Node 2' }
]}
edges={[
{ id: '1-2', source: '1', target: '2', label: 'Edge 1-2' },
{ id: '2-1', source: '2', target: '1', label: 'Edge 2-1' }
]}
/>
Customizing the graph
By default, the graph supports 2 themes: light and dark modes. You can also define your own theme using the theme interface.
You can also customize the graph by passing props to the component.
Learn more<GraphCanvas
theme={{
...lightTheme,
node: { ...lightTheme.node, color: '#000' }
}}
renderNode={({ size, color }) => (
<group>
<mesh>
<torusKnotGeometry attach="geometry" args={[size, 1.25, 50, 8]} />
<meshBasicMaterial attach="material" color={color} />
</mesh>
</group>
)}
/>