Playground — Treemap — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/treemap

Treemap Playground

Experiment with Treemap props in real time. Treemaps use nested rectangles to represent hierarchical data, where each rectangle's area is proportional to its value. They are excellent for visualizing file sizes, budget allocations, and organizational structures. Toggle color-by-depth to distinguish hierarchy levels at a glance.

Dataset:

Color

Color by Depth

Labels

Show Labels

Title

Interaction

Enable Hover

Generated Code

The link restores this exact configuration; the config is a portable ChartConfig artifact.

JSX

import { Treemap } from "semiotic" const data = { name: "project", children: [ { name: "src", children: [ { name: "components", children: [ { name: "Header.tsx", value: 1200 }, { name: "Table.tsx", value: 1540 }, // ...5 files ]}, { name: "hooks", children: [...] }, { name: "utils", children: [...] }, ]}, { name: "docs", children: [...] }, { name: "tests", children: [...] }, ], } <Treemap data={data} />