Lifetime Checkpoint – Reimagining Key Moments

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.