/d3-force-diagram

D3 force diagram with highlight search, 2 node levels, and detail display

Primary LanguageTypeScriptMIT LicenseMIT

cd

D3 Force Diagram | Demo

Built in Typescript with d3 v7

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.