# vasturiano/react-force-graph **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vasturiano-react-force-graph).** 2,983 stars · 340 forks · HTML · mit ## Links - GitHub: https://github.com/vasturiano/react-force-graph - Homepage: https://vasturiano.github.io/react-force-graph/example/large-graph/ - awesome-repositories: https://awesome-repositories.com/repository/vasturiano-react-force-graph.md ## Topics `3d` `augmented-reality` `canvas` `d3-force` `force-directed-graphs` `react` `vr` `webgl` ## Description react-force-graph is a React component for rendering interactive 2D and 3D network visualizations using a force-directed layout engine. It functions as an interactive data visualization library that employs D3-force simulations to manage node physics and relationship positioning. The library includes a 3D visualization tool that utilizes ThreeJS to render complex nodes and links within an immersive space. It provides programmatic control over zooming, panning, and viewport navigation, alongside a coordinate-to-object picking mechanism for handling user interactions like clicks, hovers, and drags. The system supports the visualization of structured networks, including knowledge graphs, social network analysis, and hierarchical data mappings. Visual customization is available for both nodes and links, allowing for custom shapes, colors, materials, and labels based on data attributes. The library provides tools to regulate simulation physics, such as node velocity and charge, to maintain layout stability. ## Tags ### Graphics & Multimedia - [Interactive Diagramming Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/interactive-diagramming-libraries.md) — Provides a comprehensive library for embedding interactive, browser-rendered network diagrams with custom styling. - [Graph Visualization Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/graph-visualization-libraries.md) — Offers a specialized graph visualization library for rendering hierarchical data as interactive 3D node-link diagrams. - [Node Appearance](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/axis-appearance-configurations/node-appearance.md) — Allows for the configuration of node properties such as shapes, colors, and sizes based on data attributes. ([source](https://cdn.jsdelivr.net/gh/vasturiano/react-force-graph@master/README.md)) - [Viewport Coordinate Mappings](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/visualization-frameworks/coordinate-systems/page-coordinate-mapping/screen-space-coordinate-mappings/viewport-coordinate-mappings.md) — Translates abstract simulation coordinates into viewport-specific pixels or 3D world units for accurate rendering. ([source](https://cdn.jsdelivr.net/gh/vasturiano/react-force-graph@master/README.md)) ### Part of an Awesome List - [Canvas and WebGL Graphics](https://awesome-repositories.com/f/awesome-lists/devtools/canvas-and-webgl-graphics.md) — Utilizes Three.js and WebGL to render complex 3D graph geometries and materials within a browser canvas. ### Scientific & Mathematical Computing - [Force-Directed Layout Physics](https://awesome-repositories.com/f/scientific-mathematical-computing/force-directed-layout-physics.md) — Regulates node velocity and charge through a configurable set of simulation constants to control layout stability. - [Network Graph Layouts](https://awesome-repositories.com/f/scientific-mathematical-computing/network-graph-layouts.md) — Implements algorithms for arranging nodes and edges in relationship graphs to maximize visual interpretability. ([source](https://cdn.jsdelivr.net/gh/vasturiano/react-force-graph@master/README.md)) ### User Interface & Experience - [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Ships as a reusable React component specifically designed for integration within the React ecosystem. - [Force-Directed Layouts](https://awesome-repositories.com/f/user-interface-experience/element-positioning/layout-engines/force-directed-layouts.md) — Employs a force-directed layout engine to automatically distribute nodes and links based on physical simulations. - [Relationship Visualizations](https://awesome-repositories.com/f/user-interface-experience/relationship-visualizations.md) — Renders complex data connections as interactive 2D or 3D force-directed graphs to uncover patterns and dependencies. - [Connection Styling](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/editor-appearance-customization/connection-styling.md) — Provides options to customize the visual properties of connection lines, including curves, materials, and labels. ([source](https://cdn.jsdelivr.net/gh/vasturiano/react-force-graph@master/README.md)) - [UI Event Bridge Callbacks](https://awesome-repositories.com/f/user-interface-experience/native-event-streams/ui-event-bridge-callbacks.md) — Implements a bridge that translates low-level canvas mouse events into high-level graph element interaction callbacks. - [User Interaction Handling](https://awesome-repositories.com/f/user-interface-experience/user-interaction-handling.md) — Captures and processes mouse input to trigger custom callbacks when users interact with nodes and links. ([source](https://cdn.jsdelivr.net/gh/vasturiano/react-force-graph@master/README.md)) - [Viewport Navigation Controls](https://awesome-repositories.com/f/user-interface-experience/viewport-navigation-controls.md) — Provides controls for interacting with the visualization canvas, including programmatic zooming and panning. ([source](https://cdn.jsdelivr.net/gh/vasturiano/react-force-graph@master/README.md)) ### Web Development - [D3.js Implementations](https://awesome-repositories.com/f/web-development/d3-js-implementations.md) — Builds upon D3-force simulations to manage node physics and the positioning of network relationships. ### Data & Databases - [Interactive Data Exploration Tools](https://awesome-repositories.com/f/data-databases/interactive-data-exploration-tools.md) — Provides an interactive interface for exploring large datasets through panning, zooming, and element selection in a graph. ### Game Development - [Physics Simulation Engines](https://awesome-repositories.com/f/game-development/physics-simulation-engines.md) — Includes a simulation engine to calculate physical interactions and dynamics for interactive network layouts. ([source](https://cdn.jsdelivr.net/gh/vasturiano/react-force-graph@master/README.md)) ### Programming Languages & Runtimes - [Knowledge Graph Visualizations](https://awesome-repositories.com/f/programming-languages-runtimes/programming-utilities/data-structure-type-helpers/data-structures/hierarchical-tree-structures/relationship-graph-visualizers/knowledge-graph-visualizations.md) — Enables the creation of visual interfaces for linked data and ontologies to navigate conceptual relationships.