an interactive TreeMap visualization - Please star if you like this project
Treebox is an interactive TreeMap visualization
git clone https://github.com/KevinWang15/treebox
cd treebox
yarn install
yarn start
npm i @kevinwang15/treebox
export function genData(layers = 4) {
const result = [];
for (let i = 0; i < 7; i++) {
const children = layers - 1 > 0 ? genData(layers - 1) : null;
result.push({
text: `${layers}-${i}`,
color: ({ ctx, hovering, item, bounds }) => "red",
children,
weight: children ? null : Math.floor(10 * (1 + 2 * Math.random())),
});
}
return result;
}
import TreeBox from "@kevinwang15/treebox";
const pixelRatio = 2;
<div
ref={(domElement) => {
const treebox = new TreeBox({
pixelRatio,
data: genData(),
domElement,
eventHandler: console.log,
});
window.addEventListener("resize", () => {
treebox.repaint();
});
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
treebox.zoomOut();
}
});
}}
/>;