Stretched Treemap
This example uses a stretched treemap to visualize the hierarchical structure of the Flare dataset. The rectangles have a fixed aspect ratio of 4:1, which is achieved by first computing a squarified layout with a target ratio of one and then stretching the result horizontally. The treemap is built with `d3.treemap` and `d3.treemapSquarify.ratio`, while color and labels are assigned to each node via `d3.scaleOrdinal` and HTML `div` elements. Data is loaded from a CSV file with `d3.csv`.
AI-generated descriptionThis example demonstrates how to produce a stretched treemap where the target aspect ratio of the rectangles is 4:1 (width:height). Since squarify.ratio does not imply orientation—the ratio must be one or greater—this approach uses a target ratio of one to produce a squarified layout of size [width / ratio, height], and then stretches the resulting layout to fit [width, height].
A limitation of this approach is that inner padding cannot be asymmetric, and thus if inner padding were used, it would also be stretched by the target aspect ratio. This example subtracts one from the width and height of the generated cells to separate adjacent cells. However, this loses nesting information compared to a non-stretched treemap.