My life in vacations

week 1 | data

For me, this month was more about the data than the visual. One of my favorite hobbies is traveling, seeing the world. However, I'm not a backpacker, I'm too much of a control freak to not know where I'll be sleeping, but I'm also too introvert to just try and find a place with the locals. Thus, my vacations are more expensive than my typical peer. So I have a feeling that I've been on a decent number of vacations since I was born, but not an excessive amount. Nevertheless, the idea of mapping out my personal vacations, when, where, with whom, was immediately fixed in my mind. But only the vacations where I did not stay at home and I considered it a true vacation (so business trips) would count.

I can't remember all of my vacations of course, so the first thing I did was mobilize my mother. She has the fact memory of an elephant. It was quite fun to discuss my vague memories of when I was younger than ±12 with hers and together we managed to get a good starting list for my youth. I then went to my dad to browse through old vacation photos and match these with the list to see if the years and locations were correct. However, this took quite some time, because my parents never made picture books. So when I asked my dad for the photos, he pulled out a big box from some dusty place that was stuffed with photos, but not in order. So it took me about 4-5 hours to sort them on year and month (the printing month and year was on most of the photo's backs). And then another 4 hours to look through them, find the vacation photos, discuss with my dad where they were taken and then placing each year or occasion in their own folders. However getting the exact dates was too much to ask for. We didn't have digital cameras back then. So I'll have to figure something out in the visual for that. But at least this exercise has now resulted in a nicely sorted box of my childhood photos.

The different sorting stages of getting through my childhood photos

After I was 12, my parents separated and my typical vacation turned around 180 degrees. Instead of lying on a beach in either France or the Netherlands, me and my dad went to discover Europe; Paris, London, Rome. And I started to keep journals from these trips (writing in whatever notebook I could find). So besides the journals and the ticket stubs of the many musea I could now say exactly when I had been away and to where. And with the advent of a digital camera in 2004 I could use the dates saved in the image files to trace back when I had been away and where.

A collection of my travel journals

week 2 | sketches

My idea this month was a very simple one. Each year since I've been born would be one row and the weeks in which I've been on vacation would be colored and annotated. Simple as that, just rectangles on rows. However, I wanted to play around with different kinds of annotations to make it easier for myself to see trends; where did I go, with whom, how did we get there, what was the main purpose. Things like that. In the sketch below is my first attempt at creating the annotations, although I expect I'll be trying out some more things once I start building the visual.

Sketching the different annotation options

However, having made the same mistake before, I knew that what I was sketching above was a poor reflection of reality. There are 52 weeks in a year and typically I'm on vacation during 5 of those weeks. So only 10% of a row is marked. And that will not create a vey nice effect, having so much white space in between. So I started thinking of ways to give the vacation weeks more space and I was reminded of the way time zones run across the Earth, from North to South pole, not at all in a straight line. Maybe I could also squeeze the months in which I wasn't on vacation in that year. Yes, the months wouldn't align perfectly anymore, but I was more interested in seeing trends between vacations, than getting a perfect overview of the periods in which I was away (which is mostly July-August anyway)

Thinking of how to squeeze the months together

I'm not sure if this idea will work, but I'm going to try :)

week 3 & 4 | code

Due to a very busy month, with 4 conferences to speak at and another in the 1st week of October I thought I had created a simple idea, focusing most of the time in the first half of September with the manual data collection. Well, that turned out differently...

Yes, the idea was simple, but the execution needed a lot of manual and custom code. First step was getting those vacation rectangles in the right location. Due to the idea of the squeezed months (which had no vacation in them) and centering the year around August (the typical vacation month) it took me at least 30 iterations before I had the math and loops in my code working correctly. Of the 3 examples below, which are screenshots throughout all of these iterations, I do like the middle one where I applied a color blending mode for fun. Most vacations were duplicated in there, creating a nice artful overlap 😁

Examples of the first steps in creating the vacation rectangles

Next up were the patterns inside the vacations representing the purpose of my travels. I was trying to go for easy-to-decipher patterns. That hopefully the legend wasn't even needed to guess what the pattern portrayed. For a short time I looked into creating SVG patterns, but in the end I found it easier to play around with creating a small line chart or icon on top of the rectangle. I had a lot of fun creating the safari icon in particular (it might be my favorite part of the entire visual, haha).

The icons on top of the rectangles are actually pretty similar to my first sketch; boyfriend = heart, dad = blue circle, pretty straightforward. For my mom I made an icon of a pink small circle with a swoosh downward. That's because my mom had really, really long hair when I was young (as in, below her butt), so the swoosh is her hair.
While going through my data I took note of the people that were my most frequent travel companions. What surprised me is how often I've gone with my in-laws already, haha, so they got their own icon as well (their last name sort of translates to "angel" so that's why the icon is a yellow halo 😉 ). Since this entire visual is already crazy personal, I didn't mind the icons relating to something that only I would understand, but now you do too!

Some of the different vacation patterns & people icons

Although I was using a gradient for the vacations for which I didn't know that exact starting and end date, I wasn't sure what to use for vacations where I couldn't remember how much I enjoyed it. You can only apply 1 gradient to an SVG element and I didn't want to make it elliptical to get the idea of blur in both the vertical & horizontal direction. That's until I read Shirley's write-up for September and she talks about the motion blur filter, and then I was like, of course, I wrote a whole tutorial on that, how could I forget, haha. So I replaced the gradient with the SVG blur filter in either horizontal, vertical or both directions. I did find that the vacations in my early youth, where both the duration and enjoyment are blurred, are a bit like vague spots, but then Shirley said that this was a nice metaphor to how I remember them, just blurry pieces (or nothing at all). Which is absolutely true.

The different types of blurry filters applied to the vacation rectangles

I also tried practically all the line interpolations on the dividing lines between the months, trying out d3 v4's new curve options. The one below, although not useful for the final result, was definitely my favorite.

Some wonky results for the month dividing lines

Due to all of these custom touches, such as the icons, the patterns, the legend, the annotations to help people understand my life through vacations more I finally came to the point where this project has more lines of code than my previous month of Olympic Feathers. Not something you'd expect when you compare the two -___-

I kept the interactions to a minimum. Only helping out the viewer with the most difficult thing: knowing which month was which, due to all the squeezing going on. So there's only a small hover going on that highlights the same month throughout the years.

Showing the small interactivity on the visual

I wanted it to look a bit like a "scroller" I guess. However, here nothing fancy is happening as you scroll down 😁, you're just seeing more of the visual with new annotations. Somehow it also reminds me a bit of a children's book; simple & bright colors, easy icons, a bit of text every now and then.

I have to admit, with the amount of code and hours that it still required, maybe I should've gone for a more complicated sketch/idea that would've looked more visually appealing (but would still take the same amount of time). This one now just looks so.... simple. But as Shirley wrote last month, not every month will be a good month. I just really wanted to try out this idea where the the time scale isn't set in stone, but where you more generally get a feeling of time; "that vacation was at the start of the year", or "that safari was in the summer", so that the vacations themselves get more room to exist I guess.

Below you can see the end result of my September month of Travel!

The end result of My life in Vacations

What I do like is that I've never made a visual with (such) personal data before. So maybe it's not that interesting visually for other people to go through, but for me personally it has a special place in my heart ^^

san francisco
Four Years of Vacations in 20,000 Colors

week 1 | data

Travel is one of my absolute favorite topics, and since graduating college, I've tried go abroad at least once a year (I moved around a lot as a kid, so I get restless when I'm in the same place for a long period of time, and traveling helps alleviate that). Since I take so many pictures when I'm traveling, I thought it'd be a really fun idea to gather all the photos I took on my trips and visualize them.

So the first thing I did was go through all my photos from the last 4 years (thank you iPhone and Dropbox), and group them into year and airport code: And the first very noticeable thing is, I just like going to the same places. The second thing I realized was, I take a ****ton of pictures. In my last trip to Japan and China alone, I took more than 1000 pictures in the span of 2.5 weeks.

After I sorted through my images, I played with gm, a node wrapper for GraphicsMagick. My first idea was to reduce the images down to their top 3 colors, and blur and resize them. I experimented with the ~1000 images from my latest trip, and took every 5th picture (because 1000 is just ridiculous): Unfortunately, it didn't look very good, and also took a few seconds to load.

On my second try, I decided to go through all the images in all the folders, and only resize the images. I also read the images' data, and saved the dates they were taken and the latitude/longtitude of where they were taken, when available. (Script for getting metadata and resizing images)

This came out to about 800 images, which was just enough to have a noticeable lag in loading all the images, but not enough to do anything particularly exciting with them 😕.

Since using all the images (~4000 photos) felt like it would be way too memory intensive, I decided to try colors instead. I searched around for how to get the primary color(s) of an image, and found get-image-colors - very cool. Unfortunately at this point, I did something minorly stupid: I passed in the fully sized images (~2500x3200pixels, ~3MB) to get the primary image colors. Around 30 minutes and 120 images later, I realized that I could have just passed in my resized images (13KB) to get the colors instead. D'OH!

Once I figured that out and fixed the code to take in the resized images, I had the colors for all ~800 images in the matter of seconds. Here are the ~4000 colors for the ~800 images (each image gave me 5 primary colors): (Script for getting colors from the resized images)

week 2 | sketches

When I was thinking about my visuals for the month, I first thought of food (my travels are always dictated by food). All I could think of was the ice creams I ate in Japan this past summer, and how cool it'd be to make an ice cream image out of all my smaller photos.

I started looking at icons in The Noun Project which Nadieh introduced me to, and found Esteban Sandoval's super cute set of ice cream and beverage icons:

The idea is to have a food for each trip, the type denoted by the continent: I'd place each color along the icon path, with the x-axis being time of day the photo was taken, and the y-axis the nth day of the trip. The food would be sized according to the number of photos that trip had, and I would apply the gooey affect so that all the colors blended well together. Finally, I would clip the colors with the icon so that they would have clean edges.

I'm really excited about this idea, but given that I don't know exactly how to execute and that I only have one week of the month left, I decided to also explore another idea.

The second idea came when I was driving out of the parking lot after dinner, and saw a string of lights along the building. For some reason it reminded me of fall time (approaching holidays?), and I thought how pretty it might be if all the colors could become a string of lights or stars in the night: The idea is to place the colors with the y-axis being the years, and the x-axis being the time of day or the longitude of the photos. I want to then use the force layout to get rid of overlap, and use motion blur in both directions to give a glow effect. Finally, I want to run a string through all the lights/colors from the same trip.

It's a pretty straightforward idea, but I'm really hoping that the result will be good 😁

week 3 & 4 | code

So my code portion for this month started out pretty interestingly: This is essentially what happens when I sketch before actually exploring the data. For July, I had the time to explore my data before really sketching and deciding on my idea, and August I just happened to luck out with the data and idea I went with. So I think I got complacent this month (and plus I had already done so much work to get the data to where it is) that I was like, THIS IDEA WILL WORK.

It obviousy did not. Important lesson learned: always explore the data first.

Fortunately, the short list for Kantar's Information is Beautiful Awards had just been released and I came across Nicholas Rougeux's absolutely gorgeous Off the Staff: And it got me thinking about trying out a radial format - especially since I've never worked with it before. So I grouped the colors by the trip, and then used the time the photo was taken as the angle of the colors around the center: When thinking about how to calculate the x- and y-positions of the colors, Susie Lu's Radar Plot Annual Temperature code helped a lot. After I found the correct positions, I used the new D3 forceSimulation (absolutely brilliant updates in there) to actually place the colors; in particular I used forceX and forceY to nudge the colors toward the x- and y-positions I had previously calculated, and then forceCollide to get rid of overlap.

(My code.)

At this point, I have the colors sorted by time, but it's all just a blob around the center. So to find some sort of pattern, I wondered about how to sort color and use that as the radius for the color. I found this really great article: The incredibly challenging task of sorting colours by Alan Zucconi. It went into incredible detail about the different ways of sorting, but for me the section on HSV sorting was enough and I latched on. From this, I could start to see patterns, of which days and which trips had which colors. Unsurprisingly, I had loads of green and blue from my pictures of scenery. It's still funny to see that my 2016 trip to New York and 2014 trip to Japan have so much red and orange - what I now know to mean food pictures.

(I just wanted to add this iteration, where I switched the encoding of time and hue and got the gorgeous picture on the right, but had to scratch it because it looked too close to Nicholas's Off the Staff 😢.)

So I want to mention, all of the code until this point only took a day. It took 3 more days for me to gather metadata on my trips (where I stayed, what I enjoyed, who I traveled with and visited), figure out the visual encoding for that metadata, and work through the interactions on how to show that information. When people say that 80% of the work for a dataviz is in the annotations, they're really not kidding. In particular, the interactions were hard to get down; originally, I had it such that hovering a line or the dot would show the information for that particular element. But since they were all so small and thin, the flicker was unbearable when I accidentally unhovered or tried to look at the next line. After many iterations, I landed on something I really liked: hovering over a day will show all the information from that day:

And here is my final iteration, which turned out kind of like the gauges in a car dashboard: I am quite happy with this month's, especially with how much I learned about color and the opportunity to try out a layout I haven't before. I am also happy that I pushed through with the annotations and legend portion and got it to a point that I could be satisfied with, since that's what I usually despise working on (DISCIPLINE!).