WebGL2-Powered React Components for Graph Visualization

With react-graph-layers, developers are allowed to create graph visualization with minimum efforts while having the capability to override anything they want in the library.
TBD, we've just started a reboot to update dependencies and modernize the codebase to reflect current React best practices.
js
import GraphGL, {
JSONLoader,
NODE_TYPE,
D3ForceLayout
} from 'react-deck-graph-layers';const App = ({data}) => {
const graph = JSONLoader({
json: data,
nodeParser: node => ({id: node.id}),
edgeParser: edge => ({
id: edge.id,
sourceId: edge.sourceId,
targetId: edge.targetId,
directed: true,
}),
});
return (
graph={graph}
layout={new D3ForceLayout()}
nodeStyle={[
{
type: NODE_TYPE.CIRCLE,
radius: 10,
fill: 'blue',
opacity: 1,
},
]}
edgeStyle={{
stroke: 'black',
strokeWidth: 2,
}}
enableDragging
/>
);
}
``
Setup Dev Environment
#### Clone the repo:
`
git clone git@github.com:deck.gl-community/react-graph-layers.git
`#### Install yarn
`
brew update
brew install yarn
`#### Install dependencies
`
yarn install
`#### Local Development
You can write a story and open it in the docusaurus (using yarn 1.x):
`
cd website
yarn
yarn start
`#### Testing
`
yarn test
`To get coverage information, use:
`
yarn cover
`#### Documentation
You can add your documentation (markdown) in
docs/ folder and the new chapter in docs/table-of-contents.json.
Open the local website:
`
cd website
yarn
yarn start
``#### Contributing
PRs and bug reports are welcome. Note that you once your PR is
about to be merged, you will be asked to register as a contributor
by filling in a short form.