# @times-visuals/treemap

> Treemap

Latest version **1.2.1** (published 2019-11-11) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @times-visuals/treemap
pnpm add @times-visuals/treemap
yarn add @times-visuals/treemap
bun add @times-visuals/treemap
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2019-11-11 |
| First published | 2019-06-13 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 20.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Basile Simon |
| Maintainers | chrishutchinson, times-machine |

## Links

- npm: https://www.npmjs.com/package/@times-visuals/treemap
- npm.io page: https://npm.io/package/@times-visuals/treemap

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.6.3
- [d3-scale](https://npm.io/package/d3-scale.md) ^3.0.0
- [d3-jetpack](https://npm.io/package/d3-jetpack.md) ^2.0.20
- [d3-hierarchy](https://npm.io/package/d3-hierarchy.md) ^1.1.8
- [d3-selection](https://npm.io/package/d3-selection.md) 1.3.2

## Recent versions

- 1.2.1 (latest) — 2019-11-11
- 1.2.0 — 2019-06-14
- 1.1.1 — 2019-06-14
- 1.1.0 — 2019-06-13

## README

# Treemap

> A treemap chart built in d3

## Installation

```bash
# Yarn
$ yarn add @times-visuals/treemap

# npm
$ npm add @times-visuals/treemap
```

## Usage

```js
import Treemap from '@times-visuals/treemap';

export default () => <Treemap data={data} onHover={function} />;
```

## Data format

```js
   [
    {
      id: "HouseOfCommons",
      children: [
        {
          category: "Commons staff",
          number: "7194",
          id: "commons"
        },
        ...
      ],
      color: "#254251",
      fontColor: "#ffffff"
    },
```

## On hover return

If an onHover function is added, it will get passed an object in the following structure:

```js
{
    data: Object of the square,
    depth: 2,
    height: 2,
    parent: Object of the parent,
    value: value of the square,
    x0: xx,
    x1: xx,
    y0: yy,
    y1: yy
}
```

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