Skip to main content
SimilarExport ZIP
100%

VisDock in Zoomable Icicle

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 1, 2017
Created on Mar 1, 2017

This example integrates the VisDock toolkit into a zoomable icicle chart built with D3.js v3, visualizing a hierarchical JSON dataset of the Flare library’s file structure. Colored rectangles represent nodes, with the hierarchy flowing from top to bottom, and clicking a node triggers an animated transition that re-scales the axes to focus on that subtree. The code uses `d3.layout.partition` for the layout, `d3.scale.linear` for coordinates, and `d3.json` to load the data. VisDock’s selection tools (polygon, ellipse, line) query these rectangles, and its `setColor`, `changeColor`, and `changeVisibility` APIs apply visual highlights and manage overlays.

AI-generated description

The Zoomable Icicle example is a visualization of hierarchical data structures with rectangular SVG objects representing the nodes. From the top to bottom, the hierarchy of the data goes from high to low. The VisDock toolkit has been integrated into the Zoomable Icicle example built with D3.js (found <a href="http://bl.ocks.org/mbostock/1005873">here</a>) by <a href="http://bl.ocks.org/mbostock/">Mike Bostock</a>. Using selection and other tools, users can query rectangular elements, zoom in on particular nodes and explore. For more information about VisDock, cick on <a href="http://visdockhub.github.io/NewVisDock/">the link</a>.

forked from <a href='http://bl.ocks.org/VisDockHub/'>VisDockHub</a>'s block: <a href='http://bl.ocks.org/VisDockHub/9262169'>VisDock in Zoomable Icicle</a>

mit Licensed

Similar vizzes

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
83% 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
83% 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
83% match
Loading thumbnail…

Fork of Zoomable Icicle

This example shows a zoomable icicle chart that visualizes the hierarchical Flare-2 dataset. A click on any rectangle zooms the view to that node, animating the layout and revealing the subtree; clicking the same node again zooms back out to its parent. The code uses React and the D3 v7 module, specifically `d3.hierarchy`, `d3.partition`, `d3.scaleOrdinal`, and `d3.quantize` to compute the layout and colors, while SVG elements are created and animated with `d3.select`, `.attr`, and `.transition`. The visualization renders in a full-window SVG with no margins or scrollbars.

TTony Brown
82% 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
82% match
Loading thumbnail…

Zoomable Icicle

This zoomable icicle chart displays a hierarchical dataset of file sizes from the Flare visualization library. Users click any rectangle to zoom in and explore deeper levels, or click the top bar to zoom out. The visualization uses d3.layout.partition to compute the layout and d3.scale.linear for positioning, with smooth transitions animating the rescaling of rectangles over 750 milliseconds. The data is loaded from a JSON file and rendered as SVG rectangles with a categorical color scale.

Mmbostock
82% match
Loading thumbnail…

Zoomable Icicle

This example shows a zoomable icicle chart visualizing the Flare-2 dataset, where clicking a cell zooms in to reveal its nested hierarchy and clicking again returns to the parent. Built with D3 v7, it uses `d3.partition` to compute the layout, `d3.scaleOrdinal` with an interpolated rainbow color scale for categorical coloring, and `d3.transition` to animate the repositioning and resizing of SVG rectangles and text labels over 750 milliseconds. The data is loaded asynchronously via `d3.json` from a remote gist.

CCurran Kelleher
81% match
Loading thumbnail…

Example of zoomable icicle

This zoomable icicle chart displays hierarchical data from the Flare-2 dataset, with rectangles colored by top-level category and sized by value. Users click any rectangle to zoom into that subtree, smoothly animating the layout’s scale and position. Built with D3 v7, it uses `d3.partition()` to compute the icicle layout, `d3.scaleOrdinal` with `interpolateRainbow` for colors, and `d3.json()` to load data. The SVG rendering uses transitions to animate rectangle heights, transforms, and label opacity, with tooltips showing the full ancestor path and formatted values.

JJonathan Kurniawan
81% match