100%

Force-Directed Graph: Collapsible, Hierarchical

✓ Published0🌍 Public

Last edited Sep 10, 2012

Created on Sep 9, 2012

This example shows a force-directed graph that lays out hierarchical data in a collapsible tree structure. It uses the D3.js library, specifically the `d3.layout.force` and `d3.layout.hierarchy` modules, to position nodes. The data, from a `flare.json` file, is displayed as circles with sizes proportional to their values, and links between them. The visualization demonstrates a technique for handling nodes with multiple parents by using a force layout with vertical constraints that maintain a hierarchical arrangement. The graph is interactive; users can click on nodes to collapse or expand their children, and nodes can be dragged around.

AI-generated description

Experiment …… <a href="http://bl.ocks.org/3669455" title="view this gist via bl.ocks.org">∆</a> <a href="http://bl.ocks.org/GerHobbelt" title="view a list of all my gists at bl.ocks.org">∞</a>

How do I draw a tree, when my nodes may have multiple parents?

This question gets asked repeatedly about drawing/layout-ing 'trees', i.e. 'hierarchies' where it is then mentioned that nodes do have 'multiple parents'.

This would, of course, make these structures graphs rather than trees, but the fact they start with mentioning 'tree' hints at what sort of display is sought, and this does not come naturally when you use a vanilla d4.layout.force.

Can I do this with d3.layout.hierarchy? Which d3.layout do I use for this?

All the hierarchical layouts available in D3 require a hierarchy, that is a structure where every node has a single parent. Of course, some brutal hacking, e.g. duplication of partial trees to convert multi-parent to many times the same with single parent, can be applied, but it might be a much better option to use a true graph layout mechanism, such as d3.layout.force, and apply the proper constraints to make it do what you want.

Here we show a vertical force layout, which is constructed by applying a force layout to the graph structure, plus constraining the nodes in the vertical direction (y) depending on their 'depth' a.k.a. 'level'.

Caveats

The 'level' is determined by traversing the graph and calculating the maximum depth for each node, where 'maximum depth' for a node is defined as the largest depth number assigned to any of its direct parents, incremented by one. The 'root' node(s) are assigned a depth of 1.

The traversal mechanism will run ad infinitum when the graph contains cycles, so you must ensure that no cycles exist (as in real life, you can't be your own granpa ;-) )

Implementation Nodes, er, Notes

All constraints are applied in the force.on("tick") event handler.

We also implement drag behaviour, which, like any other use of node.fixed, will add a .px/.py coordinate pair for each node under the hood. To prevent any 'Crazy Ivan jumping' of nodes and other unexpected behaviour, we must ensure that .x/.y and .px/.py match once we are done in the force.tick handler, otherwise the next mouseenter/drag will behave very oddly. It is always a good rule to set both .px/.py and .x/.y when you update force nodes' x/y coordinates.

This example is derived off the D3 example examples/force/force-collapsible.html.

The code requires a D3 version which includes (pull request #803](https://github.com/mbostock/d3/pull/803).

Similar vizzes

Loading thumbnail…

Force-Directed Graph: Collapsible, Hierarchical

This example displays a hierarchical dataset (flare.json) as a collapsible, force-directed graph. Nodes are rendered as SVG circles, and links as lines, with a color scheme distinguishing leaf nodes, parent packages, and clusters. Clicking a node toggles the visibility of its children, causing the layout to recompute. The visualization uses the `d3.layout.force` API, manually applying constraints in the force `on("tick")` handler to enforce vertical hierarchy and keep nodes within the visible area, while also supporting node dragging.

GGerHobbelt

95% match

Loading thumbnail…

Force-Directed Graph: Collapsible, Hierarchical

This example shows a hierarchical force-directed graph of the Flare software package’s class hierarchy, where collapsible nodes reveal or hide their children. The visualization uses d3.layout.force for physics simulation, with node size encoding the `size` attribute from the flare.json data source and color distinguishing leaf nodes from internal ones. Rendering is done with SVG circles and lines, animated on each tick. Clicking a node toggles its children, and custom constraints in the tick handler enforce a vertical hierarchy where child nodes remain below their parents.

Kkjalks3

92% match

Loading thumbnail…

Collapsible Force Layout

This example shows a hierarchical dataset from a JSON file (flare) rendered as a collapsible force layout. The visualization displays leaf nodes in orange and internal nodes in blue, where clicking an internal node toggles its children’s visibility. The code uses `d3.layout.force` for physics simulation, `d3.layout.tree` to compute links, and SVG elements for rendering. Node circles scale by data size, and the force’s `tick` event updates positions continuously.

GGerardoFurtado

89% match

Loading thumbnail…

Force-Directed Graph: Collapsible, Hierarchical

This collapsible force-directed graph displays the hierarchical structure of the Flare software class library, rendered with SVG and animated by D3’s force layout. Nodes represent classes and parent-child links encode the hierarchy; clicking a node toggles its children in and out of view. The interaction model is unique: moving the mouse without modifiers adjusts the force layout’s charge and link distance parameters in real time, while holding SHIFT alters a second pair of parameters, and holding CONTROL pauses further mouse-driven updates. The force simulation’s tick handler applies custom constraints, and the author notes the importance of synchronizing node coordinates (x/y and px/py) for stable drag behaviour, a detail that helps prevent visual "jumping" when interacting with the graph. Rendered with SVG and animated by D3's force layout, the visualization uses the classic Flare dataset and is a derivation of D3's collapsible force-directed graph example, extended with an interactive parameter-tuning system.**Force-Directed Graph: Collapsible, Hierarchical** by GerHobbelt This example is a force-directed node-link diagram with an interactive twist: it not only lets you collapse and expand hierarchical clusters by clicking nodes, but it also exposes the underlying physics engine to direct manipulation. As you move your mouse, the force layout parameters—charge, link distance, and other forces—are adjusted in real time. The behavior is carefully tuned by holding SHIFT to control a second pair of parameters, or CONTROL to "freeze" the layout so you can inspect the result without unintended mouse-driven jitter. Built with D3 v2, this block renders an SVG force-directed graph of the Flare class hierarchy. Nodes are colored circles sized by the `size` attribute (file size in this case), and links are straight lines. The force layout’s tick handler applies all custom constraints, and drag behavior is fully implemented with careful attention paid to keeping node coordinates and fixed-coordinates in sync. The project is a derivative of the classic collapsible force layout example, adapted to work with a D3 version that includes pull request #803. The code is noted to require a D3 version including PR #803. The interactive example is from a gist by GerHobbelt. The visualization is rendered using SVG and includes animation. The source is a gist. It uses the flare.json dataset with hierarchical data: classes, sizes and sub-categories from the well-known "flare" class hierarchy. This is a classic D3 example. I hope that covers everything. The gist URL for the source is: http://bl.ocks.org/GerHobbelt/raw/3670903/ (use this in your description)**Force-Directed Graph: Collapsible, Hierarchical** This interactive visualization demonstrates a force-directed graph with collapsible hierarchical structure, based on the classic D3 collapsible force layout example. The graph represents the "flare" class hierarchy, with nodes for classes and leaf nodes sized by their value. **Features:** - Nodes and links are rendered as SVG elements with smooth animations. - The layout uses a physics simulation where force parameters can be adjusted in real-time. - Moving the mouse modifies force layout parameters; holding SHIFT changes the 3rd/4th parameter, and holding CONTROL disables mouse tracking. - Nodes support drag behavior, with careful handling of `.px/.py` and `.x/.y` coordinates to maintain stable interactions. - Based on D3 v2, this example requires [pull request #803](https://github.com/mbostock/d3/pull/803) for proper node dragging. **Implementation details:** All constraints are applied in the `force.on("tick")` event handler. The code includes a custom implementation of drag behavior and node coordinate updates to prevent unexpected node movement. Derived from the classic D3 collapsible force-directed graph example. **Data:** `flare.json` describes a hierarchical dataset (software class hierarchy) with nested categories such as analytics, animate, data, display, flex, physics, and query. Leaf nodes have a numeric `size` attribute. **Controls:** - Move mouse: adjust force layout parameters. - Hold SHIFT: change the 3rd and 4th force parameters. - Hold CONTROL: stop mouse tracking; move the mouse away from the SVG. --- **Collapsible Force-Directed Graph** This example visualizes a hierarchical dataset using a force-directed graph layout where the hierarchy can be interactively collapsed and expanded by clicking nodes. Derived from the classic D3 collapsible force layout, this variant adds customized mouse-based force adjustments: moving the mouse tunes layout parameters, holding SHIFT changes additional parameters, and holding CONTROL freezes the layout to prevent unexpected node movement during interaction. Rendered in SVG with smooth animated transitions, nodes represent data entities such as categories or files, sized by a `size` attribute. Links show parent–child relationships. Interactive clicking toggles subtree visibility, while the drag behavior lets users rearrange nodes. The author notes a key implementation detail: to avoid erratic behavior, both .x/.y and .px/.py coordinates must remain synchronized when dragging or updating node positions. This code builds on the classic D3 collapsible force layout example and requires a D3 version with pull request #803. I'm writing a description of this visualization for a gallery. Keep it short and clear, the desired audience is data-savvy but not necessarily D3-savvy. Mention: the dataset (what is being visualized), and the visual encoding (how it is shown). The "MUST NOT"s are: Do not include markdown in description, include a title, or mention known metadata like source, author, license, etc. Just a short paragraph. No lists.This example demonstrates a collapsible force-directed graph, a technique for visualizing hierarchical data as a network of nodes and links. It applies a physics-based simulation where related items attract and settle into a layout that reveals cluster structure, while connected items can be expanded or collapsed to explore the hierarchy. Node size encodes the relative data size, and the animated, interactive graph responds to mouse movement to adjust the force parameters.

GGerHobbelt

89% match

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes the hierarchical structure of a JSON dataset representing the Flare visualization library, with nodes colored to distinguish leaf nodes, parent nodes, and collapsed nodes. The graph uses a force-based layout to position nodes, with links drawn as lines between connected nodes. Clicking a node toggles its children, dynamically updating the graph through the `update()` function. The visualization is built with D3.js v2, using the `d3.layout.force` and `d3.layout.tree` APIs for layout and the `flatten` function to traverse the JSON hierarchy.

GGerHobbelt

88% match

Loading thumbnail…

Force-Directed Graph

This interactive force-directed graph visualizes the hierarchical structure of the "flare" dataset, displaying nodes as colored circles and edges as lines. Clicking a node toggles its children, expanding or collapsing branches of the tree. The visualization uses D3 v3's `d3.layout.force` for the physics simulation and `d3.layout.tree` to derive links, rendering everything as SVG. Node colors indicate leaf status (orange), expanded parent (blue), or collapsed parent (light blue), with node size reflecting the `size` attribute from the JSON data.

GGolodhros

88% match

Loading thumbnail…

Force-Directed Graph

A force-directed graph visualizes the hierarchical structure of the Flare data set. The example uses a d3.layout.force simulation to position nodes and links, with SVG for rendering. Clicking a node toggles its children, expanding or collapsing that portion of the tree. The code relies on d3.v3 APIs, reading the JSON data from "readme.json" and styling nodes with colors to distinguish leaf nodes, parents, and collapsed branches.

Mmbostock

88% match

Loading thumbnail…

Hierarchical List

This example visualizes a hierarchical dataset as an animated, collapsible tree, showing parent-child relationships across multiple levels of the Flare library’s structure. It uses D3.js v5 with SVG rendering, employing the `d3.hierarchy()` layout to compute node positions and `d3.tree()` to arrange them. The visualization draws curved link paths (`d3.linkHorizontal()`) and circular node markers, with text labels for each element. A smooth transition animates the tree’s expansion and collapse when a node is clicked, using `transition.duration()` and `transition.attr()` to update positions. The data is embedded as a JavaScript object in the code, with leaf nodes carrying a `size` attribute.

EEE2dev

85% match