| title |
|---|
Cushion Treemap |
Npm module for cushion treemap visualization. Treemap uses nested rectangles to display structure of hierarchical data. Size of each rectangle proportial of value (for example file or directory size in case of file system) associated with particular node.
@cushiontreemap/core was written with as few assumptions as possible about javascript environment. It could be used in worker, react-native, browser or server.
yarn add @cushiontreemap/core
import {
createSurfaces,
drawToImageData,
INode,
layoutSquarefy
} from "@cushiontreemap/core";
const width = 1000;
const height = 500;
function getColor(node: INode<Uid>) {
// return RGBA array of color components for particular node
return [255, 0, 0, 255];
}
const root = { ... } // root INode
const rects = layoutSquarefy(root, width, height);
const surfaces = createSurfaces(root, rects);
canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");
const imageData = ctx.getImageData(0, 0, width, height);
drawToImageData(
root,
rects,
surfaces,
imageData,
getColor
);
ctx.putImageData(imageData, 0, 0);Input data should implement INode interface:
interface INode<Uid> {
value?: number;
children?: Array<INode<Uid>>;
id: Uid;
}- react/vue/react-native etc. wrappers
- Treemaps on Wikipedia
- Treemaps
- huy-nguyen/squarify - squarify algorithm used in @cushiontreemap/core
- Squarified Treemaps layout algorithm description
- Cushion Treemaps: Visualization of Hierarchical Information cushion ttreemap algorithm used in this library
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent