Package Exports

react-graph-visualizer
react-graph-visualizer/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-graph-visualizer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🚀 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