Skip to main content
SimilarExport ZIP
100%

Force-Directed Graph: Collapsible, Hierarchical

✓ Published0🌍 Public
GGerHobbelt
Last edited Sep 11, 2012
Created on Sep 7, 2012

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.

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>

Constructing a tree view using the d3.layout.force

This is prelude to constructing tree-like graphs using the force layout.

Lessons learned

  • when coding constraints which are really strict, e.g. binding a certain node or set of nodes to a specific y coordinate (node.depth ~ y position in a vertical tree), it is opportune to 'insinuate' the constraint rather than enforce it, i.e. you should apply the constraint as if it was a force, i.e. verlet-integrate the delta, using the tick.alpha strength. Of course nothing stops you from strengthening the applicatiuon of the constraint when the alpha value is near zero (i.e. we're almost stable/at the end of the force iteration).

  • you can edit both .x/.y and .px/.py in the tick handler, but any 'force-like' constraints should best be applied to the .px/.py components as then they will mix with the repulse and verlet integration logic in the next round.

  • given the two items above, it is opportune to code a constraint like 'stay within visible area' as a dual constraint: one which clips the x/y node coordinates to ensure they stick within the visible area, and a second part which is a 'force' applied to repulse any nodes close to the edge(s): if you don't do the latter, you'll get graph views where a lot of nodes hug the edge(s) and don't resolve themselves to move back into the visible area proper. (Drag any graph to the edge with such a constraint and you're getting a very jittery graph where a lot of the nodes bounce against the edges but don't 'move away'. That's why you need such a second 'repulse force' to make this happen and make the graph look good, even when dragged near the edge.

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 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.

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
93% 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
91% 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
90% 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
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
88% match
Loading thumbnail…

Collapsible Force Layout

This interactive visualization displays the hierarchical structure of the Flare dataset using a force-directed layout, with collapsible internal nodes. In the default view, only the top-level "flare" node and its immediate children are visible. Clicking an internal node toggles the visibility of its descendant nodes, with collapsed packages rendered in blue, expanded packages in light blue, and leaf nodes in orange. The code uses d3.layout.force for the physics simulation, d3.layout.tree for computing parent-child links, and SVG elements for rendering nodes and links.

FFrissAnalytics
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