# Graphing Out Loud vol. 1

February 6, 2014

Sochi 2014 Olympics – Calendar Visualizations

It all started with a trip to McDonalds for a McChicken sandwich, where, David Vuong, a Solutions Architect at Dundas saw a Sochi 2014 Winter Olympics games schedule. He wondered what other Winter Olympics visualizations are floating around, so he and Ricky Bradnam sat down over a coffee to talk some of the visualizations that have popped up around the Sochi 2014 Olympics.

## McDonalds – Tune in and Cheer on!

Our local McDonalds is using this image on their tray liners.

David: I saw this calendar when I sat down to eat, and thought it was interesting that another large company wanted to venture into data visualization. The colour scheme caught my eye, but when I searched for the colour meaning in the calendar, I couldn’t figure out what it signified. I also looked at the medal symbols, and I was confused as to what they meant too. My initial thought was that they may be indicative of medals being awarded for those sports. But, when I looked at the third row, Ice Hockey, I saw that there were no medals in that row. I couldn’t figure out what the medals meant, so I searched for the (non-existent) legend. When I couldn’t find one, I got frustrated and began to question the design choices of the calendar.

There are comment bubbles around the margins pointing out that certain sports are new, but they are placed somewhat randomly on the calendar. There is a lot of visual scanning necessary to find the corresponding row for the new sports. If they had a callout bubble on the row, or something similar, it would be much easier to read.

Verdict: Although the design of the calendar could use some tweaks, overall, it does its job.

Ricky: I pointed out that the colours might have some meaning, perhaps indicating loose “categories” of sports. I watched a presentation on YouTube recently by Noah Illinsky that talked about the power of using color in this way. One of his big points was the need for some sort of anchor, or context, for those colours, and I didn’t see much logic in the sport groupings. It turns out that these colours are lifted from the official Sochi site – we can’t take McDonalds to task here.

Given the title of the image, I would think the point of this calendar is to tell me the days on which medals are being awarded for each sport. This leaves me somewhat puzzled at a few of the design choices made. The biggest points of confusion are the dimensions that they used to group the sports. It is not at all evident from the calendar why the “cluster” is so important as to cut the calendar in half. Unless the events are in different time zones or something, the location of the sport isn’t going to influence my viewing habits.

## Sochi 2014 Calendar – Official Sochi 2014 Site

http://www.sochi2014.com/en

We looked at an official 2014 Sochi Winter Olympics calendar as a basis for comparison for the McDonalds calendar design. The following image is taken from the interactive calendar of events off of the official site of the Sochi 2014 Olympics.

David: They have sorted the events in alphabetical order, rendering the colour categories a bit meaningless. The colours also look disorganized. The ceremonies row has no events, which seems to be an error on their part.

There is no legend for the dots. I had to go back to McDonalds to find out that they referred to medal awards. It had nothing to do with needing another McChicken. Honest.

Ricky: I immediately looked toward the show all button here that hides the bottom half of the event calendar. Maybe I have spent too much time on dashboards, but I prefer having all of the relevant data displayed together. The interactivity is a bit of an issue here too – take a look at how the specific sporting events are displayed when we mouse over a cell in the grid. David, as a designer, what would you have done here?

David: It’s tough. Screen real estate is limited, but you also need to maintain the context (sport we clicked, day, and other sports that occur that day).

I’d have the callout “stick” with a mouse click on the day/event combination, so that the user can avoid accidentally closing the callout when moving the mouse to scroll.

Ricky: I’d have nixed the callout in favor of having the individual sport schedule show up in the main window. You can carry through context with some labelling at the top of the screen. This chart comes close to this kind of functionality with the links on the date labels at the top of the screen, but the drill-down format leaves something to be desired.

## Sochi 2014 Winter Olympic Games Schedule and Results – SportsInteraction.com

http://www.sportsinteraction.com/2014-sochi-schedule-results/

When we did some searching for other visual treatments of the 2014 Sochi Winter Olympics calendar, this item was one of the highest ranked and linked sites in the search results.

Ricky: I typed “Sochi calendar visualization” or something similar into Google and found this. What? I am still pretty confused as to how it works. I’m assuming that the little icon in the middle is the opening ceremonies and the days radiate out toward the edges of the circle. But to use this to actually figure out what days that events are on? And to get a full picture of all the events taking place on a single day? Not likely.

At least now I know that hockey will be on every day. That’s a win for me.

David: This visual seems to be latching on to the trend of circles in visualization, infographics, and the like (such as the orbis indicator).

I also noticed that they didn’t adhere to the IOC color associations. As an example, hockey is Red here but green in IOC publications. They are already using so many colours, why not use the IOC standard?

Ricky: I hadn’t noticed the deviation. Good pull. Is it even the same colour palette?

David: It is almost the same. They use more purples, as an example, and fewer blues.

Oh, interesting. When you click on an event two things happen: the other segments on the same day highlight, and a small schedule of events appears on the right.

I cannot fathom why you would highlight the rest of the events for that day on mouse over. It makes more sense to show the schedule for that particular segment immediately on mouse over, not on click. The highlighting of the segments adds no functional value. It seems purely aesthetic.

Ricky: Cool for cool’s sake. It happens. The problem is, I know it is possible to be stylish and functional. I do it every day (brushes back hair, puts on shades). This visualization falls short. I couldn’t even figure out how to get back to the view of all sports after I had clicked on a segment, so I’m already lost.

The same observation we made in the McDonalds sample about the new sports applies here during the mouse over – my eyes have to do so much bouncing to have any idea what’s going on.

## Sochi 2014: Russia's numbers game – CNN.com

http://edition.cnn.com/2014/02/04/sport/sochi-winter-olympics-by-the-numbers/

Our search for dashboards on the Olympics turned up dry. Looking for some more content, we turned to infographics. We picked one of our favourites – this one off of the CNN home page.

Ricky: Ahh, CNN. There are plenty of blog posts out there taking CNN to task for their interesting choices in visualizing data.

My critique is something that I have noticed in many infographics of late – that the graphic is is in no way encoded with any info. As an example, the two visuals in the top left – 17 days, 89 events – are just big numbers on cute backgrounds. They both have the same number of little calendars in the frame, they are the same shape, the only variation is the colour and I struggle to associate anything with those choices. The two visuals in the bottom right – 37,000 officers, 25,000 volunteers – share a similar presentation. I’d prefer that they at least give some visual representation of the quantity. Like the borscht pot on the right.

Then again, the borscht pot size is completely arbitrary. It looks like the pot holds, what, 400,000 litres? Is that the most borscht ever eaten, or is that all the borscht available? I don’t know. Oh well, I tried.

David: That’s a good point. This infographic is devoid of any context. Check out Jeff’s blog on this topic. For example, there is a TV displaying 3 billion viewers. Is that a good number? Are these viewing numbers being influenced by the controversy, or indicative of the decline of television? Does it include online viewers?

Ricky: That is another common complaint about infographics – numbers in isolation. Are we asking for too much here?

David: It doesn’t matter. This image needs to stand on its own merit. The only context on the whole image shows up on the thermometer showing the expected average temperature. What does that blue mark even mean? It isn’t the freezing mark because the temperature on the image is below the mark and the expected average is 8.3. It isn’t the historical average for the winter Olympics, again because the text states that this will be the warmest winter Olympics ever. I’m lost.

Ricky: Is there anything you do like? The visual treatment is very modern – I wish it was more consistent in its graphics. I feel the 3d images are arbitrary and inconsistent with the rest of the graphic.

David: I like the 15 sports spelling out the numerals 1 and 5 – its novel.

## Final Thoughts

David: Even though I have no idea when I should turn on my computer to see the events in action, I am going to be cheering Canada on over the next two weeks. Wait, is it two weeks or three?

Ricky: How many calendars have we just looked at and yet you still don’t know this? I guess these visuals really do need some improvement.

David: Hah. Right. Anyway. In 2010 we won the most gold of any country – I hope we do as well this time around. I look forward to seeing how people visualize the medal results after the games complete.

Ricky: Maybe we should try our hand at it as well.

###### Previous Blog
Olympic Data Visualization Mistakes

A look at how a data visualization of the Olympic rings could be enhanced by utilizing more best practices

###### Next Blog
Save Yourself from Dashboard Disaster: Ask These Questions

Questions people should ask themselves before publishing a dashboard / making one public.