shallow focus of clear hourglass

Your Life in Weeks

A few weeks ago a friend of mine posted a picture on his Facebook page, showing a visualization of this life in weeks. He had seen a similar post by another friend of his. The visualization came from a post dating in 2014 on the blog, WaitButWhy.

From the post:

It kind of feels like our lives are made up of a countless number of weeks. But there they are—fully countable—staring you in the face.

The goal is to give you a visualization of time. Doing so helps your brain comprehend things properly when it comes to time and your life. It does this, in my view, in two ways.

First, it forces you to ask questions about the important moments in your life. What truly is a defining moment? Matriculation of schools as a kid, changing jobs as an adult, getting married, death of family, etc. I have mixed feelings that there is such a long chapter from me joining Wizards, but at the same time, it’s that way because my life has reached a very happy stable point. I shouldn’t seek change for change’s sake.

Second, it is about visualizing things properly. As a kid, the time we spend in a school feels like forever. The time I spent at college felt like a long time, but in truth, it is nearly a blip on my life’s grid here. So it helps give you a concrete view of how your life is defined through the lens of time.

Sometimes life seems really short, and other times it seems impossibly long. But this chart helps to emphasize that it’s most certainly finite. Those are your weeks and they’re all you’ve got.

Given that fact, the only appropriate word to describe your weeks is precious. There are trillions upon trillions of weeks in eternity, and those are your tiny handful.

Your Life in Weeks on

Initially, after seeing my friend’s Facebook post; I printed out the graphic planning to do my own coloring on it for visualization as he had, but I kept holding off for a few days. I just couldn’t motivate myself to figure out the week counts, etc. Then the idea of doing it in the browser came to me.

Yesterday morning, with the house quiet, I decided to code a digital visualizer. In all, it took me about 3 hours, but I reached a minimum viable product looking something like this:

Seeing my life laid out like this was a good thing. I’m a fairly optimistic person and looking at this I realized how much of my life is left ahead of me. To think about all that I’ve done and experienced in my life up to this point, and (hopefully) there is so much left ahead! It lives me feeling emboldened and excited.

Sure, I’m in my late 30s. When I was a teen, I would have seen myself as a grown up closer to death. I don’t see myself that way now. Obviously perspectives change with age.

I am very glad to have gone through this exercise to see what my life looks like. Seeing it from my finished project was rewarding for the few hours of work.

The above graphic is generated off of the following formatted list:

6/1/1987,c,Moved to Kansas
8/1/1989,c,Elementary School
12/1/1989,c,Moved to Orlando
8/1/1994,c,Gotha Middle School
8/1/1998,c,Edgewater High School
8/1/2002,c,Georgia Tech
12/1/2004,c,Left Georgia Tech
5/16/2006,c,Moved back to Orlando
10/22/2006,c,First date with Katie
3/16/2007,e,Mom died,#000000
7/28/2007,c,Work as a web developer
8/5/2009,c,Worked for
12/12/2011,c,Work at Wizards of the Coast

Each row is a format of “[Date],[Type],[Description],[Color (Optional)]”

  • Date – Self explanatory
  • Type – Either ‘C’ or ‘E’. C is the marker for a new chapter, which defines the color until the next chapter. E is for the event, which is a singular box.
  • Description – The text description for the entry
  • Color – An optional entry. You can choose your own color, if not it picks from a predefined list that tries to maximize visibility.

The above image is fairly opaque to look at. The actual implementation in the browser has it such that I can mouseover the first cell of each color block to see a tooltip of what that block’s description is.

I coded the implementation in PHP to generate HTML and CSS. It took me nearly three hours, all told. I had spent some time thinking it over ahead of time, but only the minimal amount of my pre-thinking ended up being useful as I was about 2/3rds through before realizing I had to re-frame my week thinking for this.

My biggest gains from this exercise were experimenting with CSS’s grid functions, which aren’t something I have any experience with. Additionally, working with dates is always a challenge when coding, and this was no exception.

As I mentioned above, I had to realize that the grid displayed on screen was not a weekly view of calendar years but instead (in my case) it is shifted to be the first event in the list. For me, the first week of each row is week 42 of the calendar year since I was born on October 22, 1983.

I’m not linking the implementation, or sharing it. I wrote it as a coding exercise for myself. I’ve shared the link privately with some folks, but I am not going to be sharing it broadly as I have no desire to further develop or maintain the project.