# @perfsee/treemap

> Web tree map chart, based on webgl.

Latest version **1.14.2** (published 2025-03-31) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @perfsee/treemap
pnpm add @perfsee/treemap
yarn add @perfsee/treemap
bun add @perfsee/treemap
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 1.14.2 |
| Published | 2025-03-31 |
| First published | 2022-09-29 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 743 |
| Maintainers | eyhn, domonji, forehalo, bytednpm, jianling |

## Links

- npm: https://www.npmjs.com/package/@perfsee/treemap
- Repository: https://github.com/perfsee/perfsee
- Homepage: https://github.com/perfsee/perfsee#readme
- Issues: https://github.com/perfsee/perfsee/issues
- npm.io page: https://npm.io/package/@perfsee/treemap

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.4.0
- [twgl.js](https://npm.io/package/twgl.js.md) ^5.0.0
- [d3-hierarchy](https://npm.io/package/d3-hierarchy.md) ^3.1.2
- [@types/d3-hierarchy](https://npm.io/package/@types/d3-hierarchy.md) ^3.1.0

## Recent versions

- 1.14.2 (latest) — 2025-03-31
- 1.12.0 — 2024-01-09
- 1.5.0 — 2023-03-14
- 1.2.0 — 2023-02-27
- 1.0.0 — 2022-10-18
- 1.0.0-alpha.4 — 2022-09-29

## README

# Treemap

Web tree map chart, based on webgl.

[![](https://user-images.githubusercontent.com/13579374/224657148-9125c3ba-6716-492e-afc9-72a102f4f2f7.png)](https://codesandbox.io/s/treemap-demo-4dehlh?file=/src/index.js)

[CodeSandbox Demo](https://codesandbox.io/s/treemap-demo-4dehlh?file=/src/index.js)

## Usage

```ts
import { hierarchy, TreeMap } from '@perfsee/treemap'

const treemapData = hierarchy({
  name: 'root',
  children: [
    {
      name: 'a',
      value: 30,
    },
    {
      name: 'b',
      value: 70,
    },
  ],
}).sum((d) => (d.children ? 0 : d.value || 0))

const treeMap = new TreeMap(canvasRef.current!, treemapData)
```

Notion:

- The `hierarchy()` function is re-export from `d3-hierarchy` module, you can find the document from [here](https://github.com/d3/d3-hierarchy).

---
_Source: https://npm.io/package/@perfsee/treemap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._