Graph Visualizer
Graph Visualizer is a React component that allows you to visualize graph-based data structures with ease. It provides an interactive and customizable canvas for rendering network graphs, trees, and other complex data structures.
Installation
You can install Graph Visualizer from npm:
npm i graph-data-structure-visualizer
Usage
Import the GraphVisualizer
component and use it in your React application:
import React from "react";
import { GraphVisualizer } from "graph-visualizer";
const MyComponent = () => {
const data = {
A: ["B", "C"],
B: ["D", "E"],
C: ["F"],
D: [],
E: ["G"],
F: [],
G: [],
};
return (
<div>
<h1>Graph Visualization Example</h1>
<GraphVisualizer
data={data}
startingPoint="A"
mainHeight={600}
mainWidth={800}
isChange={false}
/>
</div>
);
};
export default MyComponent;
Props
canvasRef
: A ref for the canvas element. (Optional)data
: An object representing the graph data structure. (Required)isChange
: A boolean flag to trigger graph visualization updates. (Required)startingPoint
: The starting node for the graph traversal. (Required)textColor
: The color of the node labels. (Optional, default: "black")mainHeight
: The height of the canvas. (Optional, default: 400)mainWidth
: The width of the canvas. (Optional, default: 500)
License
This project is licensed under the MIT License - see the LICENSE file for details.
Contributing
Contributions are welcome! Please feel free to open issues or submit pull requests.
Credits
Graph Visualizer was developed by Rohan Bindal.