Este proyecto nació como parte de la refactorización de mi blog. Al añadir varios subelementos de navegación en la sección "About Me", como el /now y otros, pensé que sería una buena idea mostrar de manera visual los hitos importantes de mi vida que quería compartir públicamente.

Paso 1: Renderizar el diagrama

Inicialmente, utilicé IA para generar las bases del código en D3, ya que hacía tiempo que no lo usaba y quería agilizar el proceso. Probé tanto con ChatGPT como con Claude, y noté que Claude generaba mejor código para este tipo de tareas.

Aun así, el enfoque que proponía la IA no era del todo escalable. A medida que refinaba el componente, tuve que reestructurar unas 900 líneas de código para hacerlo más limpio y mantenible. El uso de IA fue útil para arrancar rápidamente, pero al final tuve que dedicar tiempo a refactorizarlo para adaptarlo a mi forma de trabajar.

⏳ Tiempo dedicado al experimento: Aproximadamente 6 horas de trabajo, entre investigación, desarrollo y refactorización.

Estas son funcionalidades que tengo en mente pero que aún no he implementado para priorizar otras tareas. Mejoras previstas:

• [ ] Mostrar una lista de datos complementarios para dar más contexto al gráfico.
• [ ] Hacer que los puntos de control (checkpoints) sean clicables para mostrar más información (notas, imágenes, enlaces).
• [ ] Mejorar la UX del zoom, scroll y el redimensionado.
• [ ] Añadir interactividad a la leyenda para permitir ocultar categorías concretas del gráfico.
• [ ] Terminar de refactorizar el código para publicarlo como un componente en npm, para que otros puedan utilizarlo o modificarlo.