ez-tree

name	ez-tree
description	Visualización de árboles y grafos en 3D — útil para datos jerárquicos y mapas de decisión.
version	1.0.0
tags	["3D","trees","graphs","visualization","hierarchy","three.js"]

EZ-Tree — Visualización 3D de Árboles y Grafos

Resumen

Visualización de árboles y grafos en 3D — útil para datos jerárquicos y mapas de decisión. 1.4k⭐.

Repo de referencia

• GitHub: github.com/dgreenheck/ez-tree
• Lenguaje: JavaScript
• Licencia: MIT

Instalación

npm install ez-tree
# o
git clone https://github.com/dgreenheck/ez-tree.git
cd ez-tree && npm install

Uso Básico

import EzTree from 'ez-tree';

const tree = new EzTree({
  container: '#tree-container',
  data: {
    name: 'Root',
    children: [
      { name: 'A', children: [
        { name: 'A1' },
        { name: 'A2' }
      ]},
      { name: 'B', children: [
        { name: 'B1' }
      ]}
    ]
  },
  layout: 'radial',  // 'radial', 'hierarchical', 'force'
  colors: ['#2563eb', '#f97316', '#10b981'],
});

tree.render();

// Interacción
tree.on('click', (node) => {
  console.log('Clicked:', node.name);
});

Patrones Clave

1. Layouts: Radial, hierárquico, force-directed
2. Interacción: Click, hover, zoom, pan
3. Custom: Colores, tamaños, formas personalizables
4. Animation: Transiciones suaves entre layouts
5. Export: PNG, SVG de la visualización

Integración con Mastermind

• Complementa threejs-3d-maps — visualización jerárquica vs geoespacial
• Útil para competitive-intelligence — mapas de competencia
• Ideal para dspy — visualización de programas
• Reemplaza D3.js trees para visualización 3D

Pitfalls

• Tamaño: Datos muy grandes (>1000 nodos) pueden ser lentos
• Layout: El layout radial no siempre es el óptimo
• Dependencias: Requiere Three.js
• Mobile: Puede no funcionar bien en móviles

Referencias

• GitHub: dgreenheck/ez-tree