Collapsible Force Layout

100%

Collapsible Force Layout

✓ Published0🌍 Public

Last edited Oct 1, 2018

Created on Dec 8, 2016

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.

AI-generated description

This example demonstrates how to create a force layout of a hierarchy whose internal nodes are collapsible. Leaf nodes are shown in orange, while internal nodes (packages) are shown in blue. Clicking on an internal node (without dragging) causes that node to expand or collapse, toggling the visibility of its descendant nodes.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1093130'>Collapsible Force Layout</a>

gpl-3.0 Licensed

Similar vizzes

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

90% 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

89% match

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

88% match

Loading thumbnail…

Collapsible Force Layout

This interactive visualization uses a collapsible force-directed layout to display a hierarchical dataset of software clusters. Orange leaf nodes represent individual items, while blue nodes indicate packages that can be expanded or collapsed by clicking. The underlying tree structure is flattened for the simulation, with links computed via `d3.layout.tree`. Node positions update on each tick of the `d3.layout.force` simulation, with SVG circles and text labels rendered dynamically based on the current node state.

Mmbostock

87% 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

87% match

Loading thumbnail…

entrainement graph

This interactive force-directed graph visualizes the hierarchical structure of the Flare dataset, with collapsible nodes and animated transitions. Built with D3 v3, it uses `d3.layout.force` for physics-based layout and `d3.layout.tree` to compute links from the nested JSON data. Node size reflects leaf data values, while color distinguishes collapsed, expanded, and leaf nodes. Clicking a node toggles its children, restarting the force simulation to re-layout the graph.

GGregory-Howard

87% match

Loading thumbnail…

Collapsible Tree

This interactive visualization displays a collapsible hierarchical tree of the Flare software package’s class structure. Users click nodes to expand or collapse branches, with smooth transitions animating the tree’s layout changes. The visualization uses d3.hierarchy and d3.tree to compute node positions, d3.linkHorizontal for curved links, and d3.zoom for panning and scaling. Data comes from flare-2.json, rendered as SVG elements with circles and labels, updating via enter, update, and exit selections with d3.transition.

FFereidoun Mianji

87% match