Map chart
Resource Treemap Chart
A proportional block layout that maps resource weight to tile area using a binary-split algorithm.
Tiles are computed with a recursive binary split, each gets a unique radial gradient fill, they scale in with spring animations from their tile center and a percentage badge marks the dominant category.
Dependencies
framer-motiontailwind-mergetailwind-variants
Interaction type
Hover or focus any tile to expand it and reveal its label, size and share percentage.
Usage
import { ResourceTreemapChart } from "@/registry/new-york-v4/ui/resource-treemap-chart"
<ResourceTreemapChart data={resources} />Page Weight Breakdown
Total transferred bytes by resource category