🚀 react-graph-visualizer

A lightweight and responsive React + D3 component to visualize network (node-link) graphs with customizable data.

📊 Built using D3's force simulation layout and supports dynamic resizing via ResizeObserver.

Installation

Use the package manager npm to install react-graph-visualizer.

npm install react-graph-visualizer

Usage

import React from "react";
import NetworkGraph from "react-graph-visualizer";

const data = {
  nodes: [
    { id: "Node A", group: 1 },
    { id: "Node B", group: 1 },
    { id: "Node C", group: 2 }
  ],
  links: [
    { source: "Node A", target: "Node B", value: 10 },
    { source: "Node B", target: "Node C", value: 5 }
  ]
};

export default function App() {
  return (
    <div style={{ width: "100%", height: "500px" }}>
      <NetworkGraph data={data} />
    </div>
  );
}

Live Demo

Application

✨ Features

📐 Responsive layout with ResizeObserver

🖱️ Draggable nodes with D3 force simulation

🧠 Simple API using standard node-link structure

🏷️ Link values shown as labels between nodes

🎨 Color-coded groups using D3 color scale