Icicle & Force Layout

100%

Icicle & Force Layout

✓ Published0🌍 Public

Last edited Mar 10, 2017

Created on Mar 10, 2017

This example pairs an icicle chart with a force-directed network to show hierarchical site navigation data and its relationships. The icicle layout, built with `d3.layout.partition`, visualizes page counts with click-to-zoom transitions, while a separate SVG uses `d3.forceSimulation` to display linked nodes. Colors map to categories, and tooltips show each node’s percentage of its parent. Data comes from two JSON files (`icicles.json` and `nodes.json`), rendered as animated SVG elements.

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

The visualization pairs an interactive icicle chart with a force-directed node-link diagram to explore hierarchical data from JSON files. Clicking a rectangle in the icicle chart zooms into that level, while the adjacent graph displays the corresponding hierarchical relationships as a network. The icicle chart uses `d3.layout.partition` and scales from `d3.scale.linear`, rendered as SVG rectangles with click-based zoom via `d3.transition`. The force layout uses `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position circles and links, with a tooltip showing percentage of the parent value.

TThanaporn-sk

94% match

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…

Icicle & Force Layout

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.

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

91% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb (d3v4)

A zoomable icicle chart displays a hierarchical dataset of the Flare software project, partitioning rectangular cells by value and color-coding branches. Clicking any cell zooms into that subtree while updating a breadcrumb trail above, which shows the current path and percentage of the total. The visualization uses d3.partition, d3.hierarchy, and d3.scaleOrdinal with d3.schemeCategory20c, rendering rectangles and foreignObject labels in SVG. Breadcrumb polygons and animated transitions via d3.transition respond to clicks, with data loaded from a JSON file.

TThanaporn-sk

78% match

Loading thumbnail…

Zoomable Icicle (d3 v4)

This zoomable icicle chart displays the hierarchical structure of the Flare dataset, with rectangles sized and colored by category. Clicking a rectangle zooms in to reveal its children, while clicking the top bar returns to the previous level. Built with D3 v4, it uses `d3.partition()` to compute the layout, `d3.hierarchy()` for data nesting, and `d3.scaleOrdinal` with `d3.schemeCategory20c` for coloring. Transitions are animated over 750 milliseconds, adjusting the x and y scales to focus on the selected node.

TThanaporn-sk

78% match

Loading thumbnail…

Example Icicile

This example presents a zoomable icicle chart, a space-filling visualization of hierarchical data where nested rectangles represent tree nodes. The visualization renders the Flare-2 dataset as an SVG and partitions it using `d3.partition`, then colors nodes by a quantized rainbow ordinal scale. Users animate transitions with `selection.transition` to zoom in on a clicked subtree, adjusting rectangle heights and label opacity along the way. The code also dynamically recomputes the target layout coordinates for each node during the zoom animation.

JJonathan Kurniawan

78% match

Loading thumbnail…

ICE-8 assignment

This example presents two complementary D3.js visualizations: a hierarchical family tree and a force-directed social network. The family tree uses a `d3.tree` layout with `d3.linkHorizontal` curves to connect nodes representing three generations. The social network applies `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position seven interconnected individuals, with draggable nodes. Both visualizations render as SVG elements, and the force graph includes labels beside each node, allowing users to explore relationships through interactive dragging.

BBHUMIKA CHUNDU

78% match