D3 Force Layout Playground

Features

• Generate realtime force layout using the data
• Toggle higlighting a particular node
• Search for a node using autocomplete
• Change the breaklink throshold and see changes in the realtime
• Toggle label a particular node
• Automatic tooltip toogling on the basis of labels

See how it works with huge data

Replace

import GRAPH_DATA from "../../dataForMoviesAndActorsWithLessData";

with

import GRAPH_DATA from "../../dataForMoviesAndActors";

in Main.js (Main component file)

Credits

• http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/
• B - The threshold link breaking should be enabled (based on the strength of the link)
• H - enable the highlighting thing which shows only the relevant & connected neighbours
• L - You have to apply labels, but there should a toggle button to switch on and off the labels
• P - Enable pinning of the nodes
• S - Enable search of the node
• T - Enable tool tip (when the labels are off)

Dvelopment Guide

• Deployments for every commits using now.sh
• Uses eslint and prettier for linting and formatting with pre-commit hook
• CSS is written using using CSS modules
• Made some TODOs for the remaining functionalities

Like it?

⭐ this repo

Found a bug?

Raise an issue!

License

MIT © rajatvijay