Skip to main content
SimilarExport ZIP
100%

Wavy treemap

✓ Published0🌍 Public
KKcnarf
Last edited Dec 3, 2018
Created on Jan 17, 2017

A wavy treemap displays the hierarchical structure of the flare.csv dataset, with each rectangular cell distorted by sinusoidal waves along both axes to create an undulating, artistic surface. The visualization transitions smoothly from a standard nested treemap to the wavy form. Using D3 v4, it applies `d3.treemap` for layout, `d3.stratify` for hierarchy, and custom path interpolation via `transition.attrTween` to morph rectangular boundaries into curved paths. Hovering highlights a cell and shows its ID and value via a native title tooltip.

AI-generated description

This block is a recreation, inspired from @JacobJoaquin, and is more or less data art.

This block is forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/911ad09bdead40ec0061'>Nested Treemap</a>, and hence vizualises the treemap of the famous flare.csv. Hold on your mouse on a cell for some details.

Even if this block is a recreation, the technique can be used to distord the treemap in order to fit a particular contour/shape (cf. d3-shaped Treemap).

Acknowledgments to:

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Wavy treemap

This visualization shows the D3.js source code as a treemap where rectangular cells are distorted into a wavy, custom shape. The layout uses a standard `d3.treemap` with `d3.stratify` to structure the data, then applies custom distortion functions to the computed rectangles, converting them into SVG paths. The wavy warping is animated over five seconds using a transition, with the final shape approximating the D3 logo. Hovering a cell reveals its file path and line count in a tooltip.

KKcnarf
88% match
Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualization displays the hierarchical structure of the flare.json dataset, with nested rectangles sized by either node size or leaf count. The interactive chart allows toggling between these two aggregation modes via radio buttons, triggering a smooth animated transition. Built with D3 v4, the visualization uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` for coloring, rendering SVG cells with clipped text labels and tooltips.

Bbootshine2
80% match
Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare data set, encoding each leaf node’s size by its rectangular area and grouping related categories by color. The view toggles between summing node values by size or by count, with animated transitions updating the layout over 750 milliseconds. Built with D3 v4, the example uses `d3.treemap`, `d3.hierarchy`, `d3.scaleOrdinal`, and `d3.treemapResquarify`, rendering the hierarchy as SVG rects and text elements with clip paths.

Wwicaksh
79% match
Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller rectangles, with each node's area proportional to its value, encoding the hierarchical structure and size of the Flare visualization toolkit's packages through both position and color. The visualization includes an interactive radio-button control that toggles between summing leaf sizes and counting leaves, triggering a 750-millisecond transition that animates rectangle boundaries using D3 v4's `d3.treemap` with the `d3.treemapResquarify` tiling algorithm. Rendered as SVG, the code uses `d3.hierarchy`, `d3.scaleOrdinal` with the `schemeCategory20` color palette, and `d3.json` to load the packaged flare.json dataset.

Mmbostock
79% match
Loading thumbnail…

Treemap

This treemap visualizes the hierarchical structure of the Flare codebase, using rectangular nested cells to represent file sizes and categories. Built with D3.js v4, it uses the `d3.stratify()` and `d3.treemap()` APIs to lay out nodes, with color assigned from a `d3.scaleOrdinal()` palette based on top-level branches. Leaf values from `flare.csv` are displayed inside each cell, while hovering reveals the full path and numeric value. The rendering uses HTML divs positioned absolutely, with nested labels and value text.

Mmbostock
79% match
Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes hierarchical data, such as the flare.json dataset, using nested rectangles to represent size values, with an option to re-sort by count. It shows an interactive animation that smoothly transitions between these two aggregation modes. Built with D3.js v4, the code uses `d3.treemap`, `d3.treemapResquarify`, and `d3.hierarchy` to process data, while SVG rendering and `d3.transition()` handle the animated updates. The example also includes a color scale from `d3.schemeCategory20` for visual distinction.

MManoukK
79% match
Loading thumbnail…

Treemap Example

This treemap visualizes the hierarchical flare dataset, showing relative leaf-node values as nested rectangles colored by their top-level parent category. Built with D3 v6 and rendered as SVG, the example implements a custom treemap layout algorithm via recursive space partitioning that alternates between horizontal and vertical splits. The code uses d3.scaleLinear for proportional sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and calculates text visibility based on rectangle dimensions. Data is loaded from a JSON file and displayed with interactive hover effects absent, focusing purely on static hierarchical encoding.

HhelloHailey-sketch
79% match
Loading thumbnail…

Treemap 4.0

This treemap visualizes the hierarchical structure of the Flare dataset, with each leaf node represented as a rectangle sized by its numeric value and colored by its top-level category. A dropdown menu above the chart lets users dynamically switch between five tiling algorithms for the treemap layout. The example uses the `d3_hierarchy` treemap API, setting the tile method based on the selected option, and renders the result as SVG using `d3.csv` to load the data from flare.csv.

FFrissAnalytics
79% match