Icicle & Force Layout

100%

Icicle & Force Layout

✓ Published0🌍 Public

Last edited Apr 14, 2017

Created on Apr 5, 2017

The visualization combines an icicle chart with a force-directed node-link diagram, both driven by the same hierarchical dataset of loan categories. The icicle chart, rendered with SVG rectangles via `d3.layout.partition`, allows click-to-zoom into any non-"end" node, updating the visible rectangles and highlighting the selected path in orange. Simultaneously, a separate force simulation using `d3.forceSimulation` and `d3.forceLink` displays the hierarchy as a connected network of colored circles, with nodes colored by group and linked by edges; clicking a rectangle also recolors the corresponding node in the network. The data comes from `icicles.json` and `nodes.json`, and the example uses D3 v3 for the partition layout and D3 v4 for the force layout.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/EoinMGB/'>EoinMGB</a>'s block: <a href='http://bl.ocks.org/EoinMGB/0e814f40414ac79162a8c31028af39bf'>Icicle & Force Layout </a>

mit Licensed

Similar vizzes

Loading thumbnail…

Icicle & Force Layout

This example combines an icicle layout with a force-directed graph to visualize hierarchical data. The icicle chart, built with D3 v3, encodes a JSON hierarchy as nested rectangles, where each segment’s size and color represent the value and category of data, and clicking a rectangle zooms the view to that node's subtree. A linked force-directed network in D3 v4 shows relationships between nodes, with node colors and link widths conveying group and connection strength. The hybrid view uses two D3 versions in a single page, with an animated partition layout on the left and an interactive force-directed diagram on the right.

EEoinMGB

92% match

Loading thumbnail…

Linked Force Layout & Icicle Diagram

This example combines a force-directed network graph with an icicle diagram to visualize hierarchical data, where clicking a node in the force layout highlights the corresponding partition in the icicle chart and vice versa. The visualization uses d3.v3 with a d3.layout.force for the network and d3.layout.partition for the icicle, rendering both in SVG with smooth transitions and tooltips. Data is loaded from external JSON files ("icicles.json" and "nodes.json"), and the interactive brushing effect synchronizes the two views by updating color and node size.

EEoinMGB

92% match

Loading thumbnail…

ice8

This example shows a small network of nodes and links laid out with a force-directed simulation. It loads JSON data from a raw GitHub gist URL using `d3.json`, then renders the graph as SVG circles and lines. The layout is computed with `d3.forceSimulation`, using `d3.forceLink` for edges, `d3.forceManyBody` with negative strength to repel nodes, and `d3.forceCenter` to keep the graph centered. Node and link positions are updated on each simulation tick by setting the `cx`, `cy`, `x1`, `y1`, `x2`, and `y2` attributes.

GGorantla Vishnusai

78% match

Loading thumbnail…

Force-Directed Tree

The visualization shows a small, hierarchical set of d3 software components arranged as a force-directed tree. Nodes and links are rendered as SVG circles and lines using D3’s force layout, with a weak vertical push that separates parent nodes from their children to suggest a tree structure. The example uses `d3.layout.force` with charge and link distance parameters, and updates node positions on each tick with `force.on("tick", tick)`. Node colors come from a categorical scale, and the data is loaded from an external JSON file containing nodes and links.

Mmbostock

78% match

Loading thumbnail…

Circular Force-Layout

This circular force-layout visualization maps a network of interlinked nodes, with node size and color encoding attributes like total current and type, respectively. Rendered with D3 v4's force simulation, the SVG animation reveals clustering and directional relationships through directed links. Data is loaded from CSV and JSON sources, and the circular layout emerges from a custom gravity force that pulls nodes toward predefined cluster centers.

663anp3ca

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

77% match

Loading thumbnail…

D3 Node-link Diagram With Force-directed Layout

This interactive D3 node-link diagram visualizes a force-directed network layout using data from the SOC-FIRM-HI-TECH repository. It shows the connections between nodes, with link thickness proportional to edge weight and node color assigned by ID via `d3.scaleOrdinal` and `d3.schemeCategory10`. The graph is rendered as an animated SVG using `d3.forceSimulation` with link, many-body charge, and center forces, allowing drag interactions. Hovering over a circle reveals a tooltip with the node ID, powered by D3 transitions and mouse events.

Ddarrenisdunn

77% match

Loading thumbnail…

Node-link diagram with force-directed layout in D3

This node-link diagram visualizes the FIRM-HI-TECH dataset, showing the connections between entities as a force-directed network. The visualization uses D3 v7 with d3.forceSimulation to position nodes and links, applying charge, link, and center forces to create an organic layout. Nodes are rendered as colored circles using d3.scaleOrdinal with the schemeSet1 palette, while links appear as thin black lines. Interactive tooltips appear on hover, displaying the node ID and enlarging the circle for emphasis. The data is loaded as CSV and parsed into numeric source and target values for the simulation.

EEunice Tu

77% match