Icicle & Force Layout

100%

Icicle & Force Layout

✓ Published0🌍 Public

Last edited Apr 7, 2017

Created on Apr 7, 2017

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.

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>

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

mit Licensed

Similar vizzes

Loading thumbnail…

Icicle & Force Layout

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.

TThanaporn-sk

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

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

93% 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…

Zoomable Icicle

This interactive visualization displays a hierarchical dataset using an icicle chart, where nested rectangles represent the flare data’s categories and subcategories. Clicking a rectangle zooms into that level, while clicking the top bar returns to the previous view. The chart is built with D3 v3, using `d3.layout.partition` to compute the layout and `d3.scale.linear` for the x and y coordinates. Animated transitions, driven by `rect.transition()` with a 750-millisecond duration, smoothly rescale the rectangle positions and sizes, with colors assigned via `d3.scale.category20c()` based on parent keys.

TThanaporn-sk

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

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

80% match

Loading thumbnail…

Fork of Zoomable Icicle

This interactive icicle chart displays the hierarchical structure of the Flare-2 dataset, with rectangles whose height and width encode the data hierarchy. Clicking a rectangle zooms the view to that node, animating the layout with a 750ms transition. Built with vanilla JavaScript and D3 v7, the code uses the `partition` layout, `scaleOrdinal` with `interpolateRainbow` colors, and SVG `<g>` elements with smooth `transition` attrs. The visualization is rendered directly into the body, featuring cursor-pointer feedback and tooltips showing path and value.

Jjonathangohjj

79% match