Zaney Timeline
Project Category
Client
Tools
Project Brief
Objective: Create a visual resume showcasing work, school, and personal data points in an effort to learn more about working with a vector graphic software (technically Affinity Designer but it's just budget Ai so...)
Scope: I did all the things.
As part of my website relaunch (and honestly something I was thinking about during the initial version but never got around to), I want to make some personal data visualizations for my About Me page. Images are worth a thousand words, of course, and what better way to show I'm interested in data visualization than by showing data visualizations?
Choosing data to visualize on my About Me page has been tricky, I'm not going to lie. I want to represent myself accurately - not purely professionally (e.g. like a git commit map or something meant to hype up my productivity, etc), but also not unprofessionally (e.g. a bunch of visualizations about my hobbies and topics completely unrelated to work - I'm trying to find a job, after all). I felt that a timeline of my life and career would help strike that tonal balance on the first go and provide me the latitude to include those super-serious or super-silly visualizations later.
This timeline is meant to be an accompanying piece to my resume or CV - some overlap regarding information, but not everything from the CV is on the timeline and not everything on the timeline is on the CV.
I'm thrilled with how this visualization turned out. For the opportunity to zoom in and explore around the visualization, I suggest heading on over to my About Me page. Or 'Open Image in a New Tab' on the image below.

Design Process
Spiralizing the Timelines
Strangely, I did not spend a lot of time sketching this visualization out beforehand. I knew I wanted to make a viz in Affinity Designer since it had been a quick minute since I exercised those skills, and I knew that making a visualization like this in d3.js would involve a lot of hard-coding x and y coordinates, so it wouldn't be as mobile-friendly as an image file would be. With the tool decided, I played around with some shapes for timelines.
Obviously there's the line version of a timeline, both straight and wandering. I liked the idea of a wandering, circuitous timeline but wanted to explore the idea of a circular timeline. The wandering line felt like it would be extended vertically and I was hoping for something that would fit on the screen.
I could have had three different circles for three different areas of data I was including - life, non-academic work, and academic work. I sketched out one of these circles and was not feeling it. It felt too limiting and constrained, and that's when I thought about using a spiral. Not just any spiral, however, but the golden spiral.

I immediately felt in love with this idea. First, the visual metaphor of a constantly growing spiral to represent a constantly growing life? Chef's kiss. Secondly, as a biologist, I've been exposed to Fibonacci spirals in nature since I can remember, and I remember being fascinated by them. The opportunity to design a golden spiral to represent my life was bringing up fond memories of curiosity and wonderment for me, and I hope that it does for others, too. And lastly, as a photographer, the golden spiral is often used as a framing technique (more in landscape than in wildlife photography, but still) and with the biology connections, it felt like this idea was touching on some of the cornerstones of me.
I thought about the content I wanted to include. I knew there'd be three main categories: life, academic work, and non-academic work. Therefore I started the design with three layers. And then within each category, I started by including three types of events. I wasn't sure at this point if this was too much or too little content, but it's just a starting point. As I made the visualization, I decided to add hobbies to the life timeline, as well, to help add some more personal, fun information and achieve that balance I talked about.
I decided early on to try to keep the icons as minimal as possible. I knew I needed to differentiate starting and stopping points for education and jobs, and that left choosing symbols for relocation (squares for moving boxes, of course), travel (triangles for T-words), and then hexes for hobbies. Rather than have individual icons for Hobbies, Awards-Scholarships-Fellowships, and Presentations-Posters-Publications, I decided to use filled-in circles with letter indicators. I felt this kept the legend more minimal by repurposing one of the basic icons instead of adding new ones.
Most of the icons are oriented perpendicular or parallel to the timeline's direction, rather than the xy axes. Triangles, Squares, and X's are all rotated, while the circles with letters are oriented vertically for legibility. After looking at the design with rotated and non-rotated icons, I felt rotated icons flowed better and offered a more seamless look. The icons weren't just on the timeline, but part of it. I also liked that the squares and triangles now all had corners pointing forwards in time, suggesting some sort of movement or direction - which is what the events the icons are symbolizing are all about, anyway.
After I decided to rotate the triangles, the initial idea of having the triangle half-filled to indicate travel for both work and fun needed to change. With the triangle basically lying on its side on the timeline, visually it just felt odd for the top half to be solid. I swapped to a gradient fill instead.
I also elected to swap the icons for Hobbies (hexes at this stage) with the teaching icons (circles with T's). The life timeline had a variety of icons, but the work timeline just had circles, both empty and with letters, and x's. By swapping, I added more diversity to the work timeline.
After posting the initial draft for feedback on the DVS slack, Jocelyn and I walked through the idea of using specific icons and maybe eliminating the need for the legend entirely. In the end, we both concluded that this might not be the best application for that idea, however. Eliminating the need for a legend might help the viz feel more sleek and less cluttered by having few elements, but then I'd have a lot of different icons on the timeline and that might be overwhelming to the reader, especially if there also wasn't a legend they could reference. And as Jocelyn noted, using a trophy for Awards and a microphone for Presentations might feel a bit cheesy.
By the way, if you want to read the thread on the DVS slack, I posted it in #share-critique on November 5th, 2023.
And then there was the question of how to show duration. Overlapping thicker lines on the timeline would be both limited and cluttered. Here I took inspiration from shells themselves - septa. I decided to use dotted lines connecting the start and stop of each event to indicate duration. It's not a perfect analogy, since septa in the shell originate on different lines while in my timeline, the beginning and end of the line would be on the same timeline. But close enough?

I started with the life spiral content and then immediately sent this image to a few friends for 'proof of concept' testing. If just one spiralized timeline wasn't working for people, then adding two more would not improve matters. But my friends loved it! One recommended I place the key in the center as that is where his eye initially landed, and I did so.

We also discussed what to do about the research timeline. I have just finished my Ph.D. and I'm not looking for post-docs explicitly. As much as I love academia and research, there is a strong possibility that I'm never directly involved with academic research again. (I sincerely hope that's not the case.) What would I do with the research timeline if I didn't have any more content to add in the future?

In the end, collapsing all the work down to a single Work timeline seemed like the best choice.
Color
Now with only two timelines to work with and knowing I'd need to use color to differentiate between academic and non-academic work, I considered my colors. I settled rather quickly on using white and gold for the two timelines - it's a golden spiral, after all. To help these lines pop out from all the others lines, I gave them a slight glowing effect.
However, for the content colors, I was divided. If you can't tell from spending time on my website, my favorite colors are vibrant blue, green, and purple. That is my holy trinity, and a data visualization about me should have my favorite colors, right? Right?? I decided to step outside of my comfort zone for this one. I was perusing coolors.co for some color inspiration and saw this one:

With a little tweaking to improve the contrast between the blue and red in the palette and the grey background, and swapping out the other three colors for my white, gold, and grey - voilà!

Is it a great color palette, where the colors naturally seem to go together? No, not really. But is it to my aesthetic tastes? Also, no. But it's an accessible palette with good contrast between all the colors (checked with Adobe Color Checker). Good enough.
Visual Hierarchy
The biggest task for this visualization was adding content to the design. I knew it'd take a while and decided to hold off on making key design choices like final layout and visual hierarchy - i.e. how to direct the reader to the more relevant events, should they be looking at this visualization with an eye towards hiring me - until the bulk of the content was on the page. Because of this approach, a lot of the decisions were made organically.
One of the decisions made earlier on in this process was how to differentiate the labels between the major events and minor or less relevant events on the timeline. I started with the transparent labels because I felt they would help ease the potential feeling of clutter or busyness by blending more into the background. For events that I wanted to stand out, making the label stand out seemed like the best option.

Still afraid of having too much going on, I opted not to label Presentation, Poster, or Publication events as I added the icons. When I added icons for Awards-Scholarships-Fellowships later in the process (after concluding there was still room on the life timeline for more information), I followed my precedent and didn't label those either.
When I posted a draft on the DVS slack share-critique channel for feedback, one of the commenters, Hannah, asked why the year labels were so much bigger than the other text - regarding visual hierarchy, were they the most important thing? I responded that the years were a larger font so that they could be read without needing to zoom in. I knew from the start that this would be a 'zoom in and explore' infographic - that because of the amount of labels, I'd have to keep them on the small side to prevent the feeling of being overwhelmed by the content. At this point I was thinking the title would be on the About Me page itself, not hard-baked into the visualization due to the limited real-estate. How was a reader going to know they were looking at a timeline? The years! And then driven by a strong sense of curiosity and the thought "what an odd looking timeline", they'd click into the viz and start looking around. Seemed reasonable to me, anyway.
To help cement the implicit visual hierarchy from the labels and following the feedback from Hannah, I rearranged my key so that the color labels and P & A icons were at the top. I added a small blurb to explicitly relate to the reader the fact that events with solid labels are more directly related to data visualization, research, and website development. This way, I didn't have to add solid and transparent label boxes to the key, but the reader was still getting that information.
Now, there is one element that I did NOT plan or have a strategy for - label placement. Given the variability in label size and content density, as well as the spiralized layout, I could not come up with a one-size-fits-all guideline about placement of the label boxes relative to their associated icons. I couldn't. I just did my best and hope that proximity is enough to communicate connectedness between an icon and its label.
Layout
Finally, I had to figure out how to organize the timelines, title, blurb, and key in the visualization. I needed to add the title to the top somewhere, and because of the flow of the golden spiral, there is actually more room to add text on the right than on the left. I opted to place the title and blurb in the upper right corner for space considerations, and then I realized that by being on the opposite side of where the title usually goes, I'm feeding into the 'zaniness' of the visualization. A timeline that isn't straight and a title not where it's supposed to go. Perfect.
Obviously I started with the key on the right and then moved it to the center based on the feedback about where my friends were looking first at the visualization. Now, with the title and blurb on the right, the eye might start looking at the spiral, but it starts reading as it circles around and lands on the title. Aligning the key with the other text elements was now a no-brainer.
The very last thing I did was increase the font size of the labels. Now that the content was more or less fixed and the text elements were all present, I could see that there was room to increase the legibility of the labels without overwhelming the visualization. So they went from 18pt to 24pt, lol. And I standardized margins around the text - two-line label boxes were 55pt tall and singles 35pt, and however wide the text labels were, the label boxes were 25pt wider. This provided some visual consistency with regards to white space in the labels. Better than eyeballing it!
Wrap Up
I'm psyched that I conceptualized, made, sought feedback, and finalized this visualization in basically four days. I started on Friday and am writing this summary on Monday afternoon. Not to conflate speed with quality, of course. I simply feel that it shows my excitement for this visualization as well as my growing confidence in my design choices. I didn't spend days vacillating about how to make the perfect timeline. I just....made it. And that feels really good. That feels like progress.
But that being said, there are some things I'm not happy about with the design, such as the randomness with regards to label placement relative to its icon. Some of them are aligned with an edge, some with the center, and some just wherever they could fit. I also want to add individual dataviz and website development projects, but sadly there was no room on the work timeline for this content. This information also isn't in my CV, but my projects page of my website, so I am concerned about its absence from the About Me page as a whole. And lastly, nowhere in the viz did I communicate that, aside from graduate school, all the 'jobs' I've held during school and the undergraduate research projects were part-time. And I combined jobs I was paid for with 'jobs' that I did not get paid for, such as being the EIC for Science in the News' short form blog. It was work, but volunteer work. I felt like there wasn't room to clarify these distinctions in the visualization, and if I'm wrong and there's a way to do so succinctly, please let me know. All the options I considered (e.g. using distinct starting icons, adding the info to the labels, providing more exposition in the blurb) did not strike me as better alternatives.
But that wraps up the first visualization of November. Hopefully you enjoyed exploring the spiral timeline as much as I enjoyed making it.
Cheers,
Z