Skip to content

Calculates the treemap coordinates following the squarify algorithm

License

Notifications You must be signed in to change notification settings

clementbat/treemap

Repository files navigation

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

<script type="text/javascript" src="https://unpkg.com/treemap-squarify@1.0.1/lib/bundle.min.js"></script>

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

<script type="text/javascript" src="https://unpkg.com/treemap-squarify@1.0.1/lib/bundle.min.js"></script>
<script type="text/javascript">
const result = Treemap.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,
});
</script>

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:

<svg :width="treemapWidth" :height="treemapHeight">
  <g
    v-for="rectangle in result"
    :key="`${rectangle.x}:${rectangle.y}`"
    class="treemap__rectangle"
    :fill="rectangle.color"
  >
    <rect
      :x="rectangle.x"
      :y="rectangle.y"
      :width="rectangle.width"
      :height="rectangle.height"
    ></rect>
    <text
      :x=getXText(rectangle)
      :y=getYText(rectangle)
      fill="white"
    >
      {{ rectangle.label }}
    </text>
  </g>
  Sorry, your browser does not support inline SVG.
</svg>

The result will be:

Licensing

The code in this project is licensed under MIT license.

About

Calculates the treemap coordinates following the squarify algorithm

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published