Treemap squarify

Treemap squarify is calculating coordinates of a treemap representation following the "squarify" algorithm.

Install

With npm
``
npm install treemap-squarify
`
Or in the browser
`

`

Usage

With npm
`
const { getTreemap } = require('treemap-squarify');

const result = getTreemap({
data: [ // your dataset
{ value: 10 },
{ value: 7 },
{ value: 4 },
{ value: 1 },
{ value: 5 },
{ value: 9 },
],
width: 700, // the width and height of your treemap
height: 600,
});
`

In the browser
`


`

Features

You can pass along properties with the data, they will be in the response object. For example a specific color for each data point:

`
const { getTreemap } = require('treemap-squarify');

const result = getTreemap({
data: [
{ value: 10, color: 'red' },
{ value: 7, color: 'black' },
{ value: 4, color: 'blue' },
{ value: 1, color: 'white' },
{ value: 5, color: 'green' },
{ value: 9, color: 'grey' },
],
width: 700,
height: 600,
});
`

Result will be
`
[
{
x: 0,
y: 0,
width: 330.56,
height: 352.94,
data: { value: 10, color: 'red' },
},
{
x: 0,
y: 352.94,
width: 330.56,
height: 247.06,
data: { value: 7, color: 'black' },
},
{
x: 330.56,
y: 0,
width: 295.56,
height: 157.89,
data: { value: 4, color: 'blue' },
},
{
x: 626.11,
y: 0,
width: 73.89,
height: 157.89,
data: { value: 1, color: 'white' },
},
{
x: 330.56,
y: 157.89,
width: 369.44,
height: 157.89,
data: { value: 5, color: 'green' },
},
{
x: 330.56,
y: 315.79,
width: 369.44,
height: 284.21,
data: { value: 9, color: 'grey' },
},
]
`

All coordinates are rounded with 2 decimals.

Example

Dataset: [23, 20, 19, 14, 9, 8, 7]

`
const { getTreemap } = require('treemap-squarify');

const result = getTreemap({
data: [
{ value: 23, color: '#1B277C', label: '23' },
{ value: 20, color: '#2C5A9C', label: '20' },
{ value: 19, color: '#3984B6', label: '19' },
{ value: 14, color: '#3F97C2', label: '14' },
{ value: 9, color: '#78C6D0', label: '9' },
{ value: 8, color: '#AADACC', label: '8' },
{ value: 7, color: '#DCECC9', label: '7' },
],
width: 700,
height: 600,
});
`
And in vue.js, for example, you can use SVG to create the treemap:
`

v-for="rectangle in result"
:key="${rectangle.x}:${rectangle.y}"
class="treemap__rectangle"
:fill="rectangle.color"
>
:x="rectangle.x"
:y="rectangle.y"
:width="rectangle.width"
:height="rectangle.height"
>
:x=getXText(rectangle)
:y=getYText(rectangle)
fill="white"
>
{{ rectangle.label }}


Sorry, your browser does not support inline SVG.

``

The result will be:


Licensing

The code in this project is licensed under MIT license.