# Treemap Generator Render hierarchical data as a squarified treemap where area encodes each item's share > Canonical page: https://elysiatools.com/en/tools/treemap-generator - **Category:** Data Visualization - **Keywords:** treemap, hierarchy, proportion, area, squarify, breakdown, share ## Overview Parses a JSON hierarchy (name + children + leaf value), computes each node's total value, and tiles the canvas with the squarified-treemap algorithm so rectangles stay close to square. Cells are colored by top-level branch and can show labels, values, and percentages. ## Inputs - **Hierarchical Data** (textarea): JSON hierarchy: each node has a name, optional value for leaves, optional children - **Chart Title** (text): Enter chart title... - **Color Scheme** (select) - **Show Labels** (checkbox) - **Show Values** (checkbox) - **Show Percentages** (checkbox) - **Border Width** (range) ## When to use - When you need to display nested hierarchical data and show how sub-categories contribute to the overall total. - When comparing relative proportions of budget allocations, disk space usage, or market share across multiple levels. - When you want to generate a clean, squarified SVG treemap directly from a raw JSON data structure without writing code. ## How it works - Input your hierarchical data in JSON format, defining nodes with a name, optional children, or leaf values. - Customize the visualization by selecting a color scheme, adjusting border width, and toggling labels, values, or percentages. - The tool processes the hierarchy, computes node totals, and applies the squarified-treemap algorithm to render the SVG layout. ## Use cases - Visualizing corporate budget distribution across departments and sub-teams. - Analyzing website traffic sources broken down by channel and device type. - Mapping product sales performance across different regions and product categories. ## Frequently asked questions ### What JSON format does the tool expect? It expects a nested JSON object where each node has a 'name', and either a list of 'children' or a numeric 'value' for leaf nodes. ### How are the colors assigned in the treemap? Rectangles are grouped and colored based on their top-level parent branch using your chosen color scheme. ### Can I display both raw values and percentages on the chart? Yes, you can toggle the 'Show Values' and 'Show Percentages' options to display both on the rendered rectangles. ### What is a squarified treemap? It is a layout algorithm that tiles rectangles while keeping their aspect ratios close to 1:1, making them easier to compare. ### Can I customize the spacing between the rectangles? Yes, you can adjust the border width slider to increase or decrease the spacing between the tiled cells. ## Related tools - [Donut Chart Generator](https://elysiatools.com/en/tools/donut-chart-generator): Generate customizable donut charts (ring charts) from data with various styling options, perfect for showing proportions with a central space - [Icicle Chart Generator](https://elysiatools.com/en/tools/icicle-chart-generator): Generate interactive icicle charts for hierarchical data visualization, perfect for displaying tree structures, file systems, and organizational hierarchies - [Org Chart Maker](https://elysiatools.com/en/tools/org-chart-maker): Render hierarchical JSON into a vertical organizational chart with names and titles - [Pyramid Chart Generator](https://elysiatools.com/en/tools/pyramid-chart-generator): Generate pyramid charts for hierarchical structure visualization, perfect for organization charts, hierarchy levels, and proportional data - [Tree Diagram Generator](https://elysiatools.com/en/tools/tree-diagram-generator): Generate interactive tree diagrams from hierarchical data with customizable styling - [Multi-level Pie Chart Generator](https://elysiatools.com/en/tools/multi-level-pie-chart-generator): Create concentric multi-level pie charts with hierarchical relationships and interactive drill-down functionality - [Polar Area Chart Generator](https://elysiatools.com/en/tools/polar-area-chart): Generate interactive polar area charts to visualize data in circular format, perfect for comparing categories with cyclical patterns or radial distributions - [Rose Chart Generator](https://elysiatools.com/en/tools/rose-chart): Generate beautiful Nightingale rose charts (coxcomb charts) to visualize data through both angle and area, perfect for comparative analysis and historical data presentation ## Samples - [Grafana Advanced Application Samples](https://elysiatools.com/en/samples/grafana-samples): Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development - [QR Code Samples](https://elysiatools.com/en/samples/qrcode-samples): Sample QR code images for testing QR code reading and generation tools - [WebRTC Real-Time Communication Samples](https://elysiatools.com/en/samples/webrtc-samples): Comprehensive WebRTC samples for peer-to-peer audio/video communication, data channels, screen sharing, and signaling server implementation - [D3.js Data Visualization Samples](https://elysiatools.com/en/samples/d3js-data-visualization): Comprehensive D3.js data visualization examples including charts, maps, animations, and interactive visualizations ## Related content - [JSON Schema, Mock Data, and API Fixture Generators](https://elysiatools.com/en/hubs/json-generate): Curated tools for JSON schema generation, mock payload building, and API fixture preparation in one hub. - [JSON to Typed Code Generators (TypeScript, Go, Rust, Kotlin, Java, C#)](https://elysiatools.com/en/hubs/json-to-typed-code-generators): Paste JSON and get ready-to-use types: TypeScript interfaces, Go structs, Rust structs with serde, Kotlin data classes, Java classes, C# classes, Zod schemas, and inferred JSON Schemas. - [JSON Interchange and Format Translation Tools](https://elysiatools.com/en/hubs/json-convert): Compare JSON conversion tools for CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN, and related structured formats in one hub. - [JSON Inspection, Diff, and Transformation Tools](https://elysiatools.com/en/hubs/json-utility): Compare JSON formatting, diffing, path inspection, schema validation, merging, transformation, and export tools in one hub for API and data workflows.