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)

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 😁

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!).

‍