https://github.com/kevinwang15/treebox
an interactive TreeMap visualization - Please star if you like this project
https://github.com/kevinwang15/treebox
canvas canvas2d data javascript treemap visualization
Last synced: 9 months ago
JSON representation
an interactive TreeMap visualization - Please star if you like this project
- Host: GitHub
- URL: https://github.com/kevinwang15/treebox
- Owner: KevinWang15
- License: mit
- Created: 2021-01-19T10:30:01.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-21T04:05:47.000Z (over 1 year ago)
- Last Synced: 2025-05-13T13:14:23.483Z (9 months ago)
- Topics: canvas, canvas2d, data, javascript, treemap, visualization
- Language: JavaScript
- Homepage:
- Size: 7.72 MB
- Stars: 56
- Watchers: 5
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# treebox
Treebox is an interactive TreeMap visualization
- weight-aware multi-level hierarchical treemap layout
- click on a block to zoom in / "esc" to zoom out
- smooth transition
- uses canvas & requestAnimationFrame for performance
- customize text / color / weight
- fires events (so you can implement tooltip, etc.)
- no dependency (5kb gzipped)
- MIT license
# DEMO
# try it
```bash
git clone https://github.com/KevinWang15/treebox
cd treebox
yarn install
yarn start
```
# use it
```bash
npm i @kevinwang15/treebox
```
```javascript
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;
}
```
```javascript
import TreeBox from "@kevinwang15/treebox";
const pixelRatio = 2;
{
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();
}
});
}}
/>;
```
# Roadmap
- more customization options
- github.io page
- automated testing