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.