PHPackages                             codeagent/treemap - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. codeagent/treemap

ActiveLibrary[Utility & Helpers](/categories/utility)

codeagent/treemap
=================

Builds an hierarchical structures (like file system) into treemap form

v1.0.0(9y ago)31292[2 issues](https://github.com/codeagent/treemap/issues)[1 PRs](https://github.com/codeagent/treemap/pulls)MITPHPPHP >=5.4.0

Since Jun 20Pushed 9y ago1 watchersCompare

[ Source](https://github.com/codeagent/treemap)[ Packagist](https://packagist.org/packages/codeagent/treemap)[ RSS](/packages/codeagent-treemap/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (3)Versions (2)Used By (0)

Sometimes we need to convenient represent hierarchical data structures such as file system. One of the famous methods is a treemap. This **php package** provides you to build treemaps in formats of html, canvas and image from native php multiarrays. Special architecture of classes gives you an opportunity for customization at level of one node: node content, node color and other.

See [demos](https://codeagent.github.io/treemap/).

More info about treemaps you may see in [wiki](https://en.wikipedia.org/wiki/Treemapping).

Installation
------------

[](#installation)

Install the latest version via composer:

```
composer require codeagent\treemap

```

Also, it's necessary to plug in required css-styles to your page for correct display of html markup. You can do that by copying `treemap.css` file to web-accessible folder of your server. To do that, simply run `vendor/bin/treemap` command with target directory as argument. Then you need to include it into the head section of page via `` tag, for example ``

Basic usage
-----------

[](#basic-usage)

Include composer’s autoloader and inject `Treemap` class from `codeagent\treemap` namespace into php script. Map is waiting at the entrance your data as first argument, width and height as second and third arguments respectively. To obtain the result of rendering (html markup, image), call `render` method of `Presenter` interface:

```
include("vendor/autoload.php");
use codeagent\treemap\Treemap;

// your data in consistent format
$data = [["value" => 2, "children" => [...]], ["value" => "4", "children" => [...]], [...], ...];
$presenter = Treemap::html($data, 1200, 800);
echo $presenter->render();
```

By default, Treemap class considers, that "weight" non-negative value are located in the `value` attribute and the "children" nodes addressed via correspond `children` key of node. If it is not suitable for you, you can tell treemap which keys to pick explicitly:

```
$treemap = new Treemap($data, 1200, 800);
$treemap->valueAttribute = "volume";
$treemap->childrenAttribute = "department";
```

And then draw treemap using appropriate Presenter:

```
$presenter = new HtmlPresenter($treemap);
echo $presenter->render();
```

Not forget to inject presenter class to you script via `use` statement.

Advanced usage
--------------

[](#advanced-usage)

### Formats of representation

[](#formats-of-representation)

Of course, presentation of treemap does not limited only by html. Besides html there are classes for building images and canvas elements in this package.

```
include("vendor/autoload.php");
use codeagent\treemap\Treemap;
use codeagent\treemap\presenter\HtmlPresenter;
use codeagent\treemap\presenter\NestedHtmlPresenter;
use codeagent\treemap\presenter\CanvasPresenter;
use codeagent\treemap\presenter\ImagePresenter;

$data = [...]; // your hierarhical data
const WIDTH = 1200;
const HEIGHT = 800;
$treemap = new Treemap($data, WIDTH, HEIGHT);

$html = (new HtmlPresenter($treemap))->render();
// same as  $html = Treemap::html($data, WIDTH, HEIGHT)->render();
echo $html;

$canvas = (new CanvasPresenter($treemap))->render();
// same as  $canvas = Treemap::canvas($data, WIDTH, HEIGHT)->render();
echo $canvas;

$image = (new ImagePresenter($treemap, "png"))->render();
// same as $image = Treemap::image($data, WIDTH, HEIGHT, "png")->render();

header("Content-Type: image/png");
echo $image;
```

`ImagePresenter` outputs image in form of raw data. For this reason, pass appropriate content-type header with image data: `header("Content-Type: image/png")`. It is worth noting the `NestedtmlPresenter`. In fact, it is a collection of treemaps with different detalization degree, which gives you conveniently navigate from one map to another via headers and breadcrumbs at top of presenter.

### Custom node styles

[](#custom-node-styles)

Presenter interface gives an ability to adjust a single node rendering via a utility `Nodeinfo` class, for example:

```
use codeagent\treemap\Treemap;
use codeagent\treemap\presenter\HtmlPresenter;
use codeagent\treemap\presenter\NodeInfo;

$presenter = Treemap::html($data, $width, $height)
    ->render(function(NodeIndo $node){
        $data = $node->data();
        $node->content()->html("{$data['name']}");
        $node->background("calculated_color_here");
    });
```

`NodeInfo` api provides an access to node information:

- **background()** - sets/gets background color of node
- **content()** - access to content of node (NodeContent)
- **rectangle()** - access to geometry (rectangle) of node
- **level()** - depth of node (0 is root Node)
- **isLeaf()** - whether node is leaf
- **isRoot()** - whether node is root
- **id()** - order between node siblings
- **visible()** - whether node is visible/not
- **data()** - node data

License
-------

[](#license)

MIT

###  Health Score

25

—

LowBetter than 37% of packages

Maintenance7

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity58

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

3610d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/1f6bf37c4bfe03ffa21b54f528ba9f302896c34e1516a7cb3516be05144f5bb0?d=identicon)[codeagent](/maintainers/codeagent)

---

Top Contributors

[![codeagent](https://avatars.githubusercontent.com/u/6485588?v=4)](https://github.com/codeagent "codeagent (2 commits)")

---

Tags

treetreemap

### Embed Badge

![Health badge](/badges/codeagent-treemap/health.svg)

```
[![Health](https://phpackages.com/badges/codeagent-treemap/health.svg)](https://phpackages.com/packages/codeagent-treemap)
```

###  Alternatives

[knplabs/knp-menu

An object oriented menu library

1.4k55.8M285](/packages/knplabs-knp-menu)[cuyz/valinor

Dependency free PHP library that helps to map any input into a strongly-typed structure.

1.5k9.2M108](/packages/cuyz-valinor)[chdemko/sorted-collections

Sorted Collections for PHP >= 8.2

222.5M3](/packages/chdemko-sorted-collections)[bluem/tree

Library for handling tree structures based on parent IDs

252916.1k7](/packages/bluem-tree)[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

320392.1k17](/packages/codewithdennis-filament-select-tree)[loophp/phptree

An implementation of tree data structure

981.8M2](/packages/loophp-phptree)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)