Wavy treemap

100%

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Jan 23, 2017

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.

AI-generated description

This block is a continuation of a previous block. Compared to the previous block (which was a recreation), this one aims to be a more realistic use case, and illustrates how one can distord a treemap in order to fit a particular shape.

This block vizualises the treemap of the D3'source code (data comes from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec'>D3 Source Treemap</a>). Hold on your mouse on a cell for some details.

Acknowledgments to:

D3.js (v4)
blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Wavy treemap

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.

KKcnarf

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

73% match

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

73% match

Loading thumbnail…

D3 Source Treemap

This treemap visualizes the file size, in bytes, of the D3.js 4.4.0 source code, broken down by module and individual source file. Built with D3 v4, it renders as an SVG using `d3.treemap` and `d3.stratify` to create the hierarchy from a CSV containing file paths and sizes. Each leaf cell is a clickable link to the corresponding source file on GitHub, with its color assigned via `d3.scaleOrdinal` and `d3.schemeCategory20`.

Mmbostock

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

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

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

72% match

Loading thumbnail…

HW2 Treemap

This example shows a hierarchical treemap visualization where nested rectangles represent data values, with each rectangle’s area proportional to its value and text labels displaying the numeric data. The layout is generated using D3 v5’s `treemap` and `hierarchy` functions, which compute rectangle positions and sizes from a nested data structure. The SVG rendering applies a semi-transparent royal blue fill with white strokes to the rectangles, while white Helvetica text labels each node. The treemap layout is configured with a 900 by 400 pixel size and a 16-pixel outer padding, and the root’s values are summed using the `sum` method.

Mmryvin

72% match