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:

1npm i graph-data-structure-visualizer

Usage

Import the GraphVisualizer component and use it in your React application:

1import React from "react";
2import { GraphVisualizer } from "graph-data-structure-visualizer";
3
4const MyComponent = () => {
5  const data = {
6    A: ["B", "C"],
7    B: ["D", "E"],
8    C: ["F"],
9    D: [],
10    E: ["G"],
11    F: [],
12    G: [],
13  };
14
15  return (
16    <div>
17      <h1>Graph Visualization Example</h1>
18      <GraphVisualizer
19        data={data}
20        startingPoint="A"
21        mainHeight={600}
22        mainWidth={800}
23        isChange={false}
24      />
25    </div>
26  );
27};
28
29export default MyComponent;

Props

• canvasRef (Optional): A ref for the canvas element.
• data (Required): An object representing the graph data structure.
• isChange (Required): A boolean flag to trigger graph visualization updates.
• startingPoint (Required): The starting node for the graph traversal.
• textColor (Optional): The color of the node labels. (Default: "black")
• mainHeight (Optional): The height of the canvas. (Default: 400)
• mainWidth (Optional): The width of the canvas. (Default: 500)
• nodeShape (Optional): The shape of the nodes. Can be "circle" or "rectangle". (Default: "rectangle")
• gapBetweenNodes (Optional): The gap between nodes in the same layer. (Default: 1.5)

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.

---