https://github.com/stevekirks/d3-force-diagram
D3 force diagram with highlight search, 2 node levels, and detail display
https://github.com/stevekirks/d3-force-diagram
d3 d3-force d3-force-diagram react typescript
Last synced: 3 months ago
JSON representation
D3 force diagram with highlight search, 2 node levels, and detail display
- Host: GitHub
- URL: https://github.com/stevekirks/d3-force-diagram
- Owner: stevekirks
- License: mit
- Created: 2017-07-22T01:51:55.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2025-02-01T02:41:19.000Z (4 months ago)
- Last Synced: 2025-02-01T03:25:08.882Z (4 months ago)
- Topics: d3, d3-force, d3-force-diagram, react, typescript
- Language: TypeScript
- Homepage: https://stevekirks.github.io/d3-force-diagram/
- Size: 1.7 MB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
D3 Force Diagram | Demo
Built in [Typescript](https://www.typescriptlang.org/) with [d3 v7](https://d3js.org/)
### Features
- node highlighting (type in search field or click one or more nodes)
- node dragging (click and drag a node)
- node selection and display of metadata (single-click a node)
- node hierarchy up to two levels in depth (double-click a node to explode or re-group)
### Usage
Requires npm. Clone this repository, then run
```
npm install
npm run start
```
### Data format
Sample data is stored in the `public/data` folder and set in the `.env` file.