</AS>

Aleix Soler

2025

Lifetime Checkpoint

The goal of this experiment was to visually represent the remarkable milestones in a person's life, allowing for a quick visualization of how many days pass between key events and providing a general idea of the type of life that person leads.

Context & Objective

This project was born as part of the refactoring of my blog. When adding various navigation sub-elements to the "About Me" section, such as /now and others, I thought it would be a good idea to visually display the important milestones in my life that I wanted to share publicly.

Procedure

Step 1: Rendering the diagram

The diagram is rendered through a customizable component that uses a _custom hook_ to draw the chart with D3. Hooks like `useCallback` and `useEffect` are used to listen for real-time modifications and improve performance. Currently, the component does not detect screen resizing, but this is planned for future improvements.

Curiosities

Initially, I used AI to generate the foundation of the code in D3, as it had been a long time since I last worked with it and I wanted to speed up the process. I tested both ChatGPT and Claude and noticed that Claude generated better code for this type of task.

However, the approach suggested by AI was not entirely scalable. As I refined the component, I had to restructure around 900 lines of code to make it cleaner and more maintainable. AI was useful for getting started quickly, but in the end, I had to spend time refactoring it to fit my way of working.

⏳ Time spent on the experiment: Approximately 6 hours of work, including research, development, and refactoring.

Roadmap

These are functionalities I have in mind but haven't implemented yet to prioritize other tasks.

Planned improvements:

  • Display a list of complementary data to provide more context to the chart.
  • Make checkpoints clickable to show more information (notes, images, links).
  • Improve the UX of zooming, scrolling, and resizing.
  • Add interactivity to the legend to allow hiding specific categories in the chart.
  • Finish refactoring the code and publish it as an **npm** component so others can use or modify it.