Graph-data-structure-visualizer NPM

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-data-structure-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 (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)