Olympic Feathers with Nadieh Bremer

You should always find a way to make sure that your data checks out, because otherwise you can have sort of a false security.

This episode of data stories is sponsored by Freshbooks, the small business accounting software that makes your accounting tasks easy, fast and secure. Freshbooks is offering a month of free and restricted use to all of our listeners. To claim your free month of freshbooks, go to freshbooks.com Datastories, where you can sign up for free and without the use of a credit card. Remember to enter data stories in the section titled I heard about freshbooks from at signup. Once again, the URL to claim your free month is freshbooks.com Datastories.

This episode of data stories is sponsored by Freshbooks, the small business accounting software that makes your accounting tasks easy, fast and secure. Freshbooks is offering a month of free and restricted use to all of our listeners. To claim your free month of freshbooks, go to freshbooks.com Datastories, where you can sign up for free and without the use of a credit card. Remember to enter data stories in the section titled I heard about freshbooks from at signup. Once again, the URL to claim your free month is freshbooks.com Datastories.

Hey, everyone. It's a new data stories. Hi, Enrico.

Hey, Moritz.

How you doing?

Yeah, what's up?

Not much. Not much. Not much cruising along here. Yeah.

Yeah.

So today we have another project episode. These are the short and on point ones. And we came across a really fascinating project that shows all the Olympic gold medal winners ever in one image. And it's a fascinating piece. And so we wanted to get Nadieh Bremer on the show who made it. Hi, Nadieh.

Hi, Nadieh.

Hi.

Hi. Great to have you on.

Yeah, great to be here.

So, Nadieh, can you introduce yourself a bit? Where do you come from? What do you do? And how did you end up making this piece?

Sure. So I am from the Netherlands. I currently work in Amsterdam. And about five years ago, I graduated as an astronomer but didn't want to do a PhD, so I ended up being a data scientist, and I was working on different projects. And while we have clients, so we have to visualize the end results. And gradually, over the years, I found myself more interested in visualizing the results than doing the analysis itself. So at some point, it just flipped. And then I became, I really want to focus on data visualization. So now I work at Adyen, where I do data visualization full time, which.

Is kind of neat. Yeah, that's a great background to come from astronomy and then specialize in data visualization. But I think it totally makes sense. So that's great.

Yeah, for me, too. But still, people ask me questions like, how did you end up here? Then it makes sense to me.

Yeah, why not? Exactly. So the project, I think it's a side project of yours, and I'll try to describe it briefly. So you will have. Definitely have to go to Nadieh's site and look at it yourself for a while because it's very full of content and very deep. But it shows all Olympic gold medal winners, the summer editions, actually, since 1896. So it's a lot of hundreds of gold medals plotted there and it's split up in different ways. So we have, of course, the year, we have the, the gender of the athletes, we have the disciplines. And you can see basically which gold medals went to which different continents, in which discipline, in which year. And so you can compare the disciplines against each other in terms of their, let's say, gold medal profile. Is that fair to say?

Yes, yes, exactly. It's sort of displaying the raw data in a way without aggregating too much. Virtually no aggregation at all.

Yeah, exactly. So it has a lot of detail, but then there's annotations around it, there's tooltips, so you can explore all the underlying data quite well. And, yeah, the most interesting points are also pointed out in little text annotations. And the way it's organized is it's five rings. So that's an obvious reference to the Olympic theme, I guess. And it goes inside out like year rings, basically. Like in a tree. You could say the oldest Olympic games are in the center, the most recent ones on the outside, and then you have the disciplines in the different angles and then left are the men and right the women. Or the other way around.

I can never remember. It's like the blue background is men, the reddish background is women.

Exactly.

True.

Yeah. So that's roughly it. So you just have a rough idea of what it is, but as I said, you need to go to the side and play with it yourself, otherwise it will be hard to describe how it looks. Exactly.

So, Nadieh, do you want to tell us why you started this project? What's the story behind it? What was the main impetus?

Yeah, well, I guess the real reason is a bit farther away. So a few months ago, the information is beautiful. Wars came out again, saying that it's happening again. And so I started thinking, well, what if I created this last year and I came up with maybe one thing and I was like, how can I only done one project in the past year? I love creating projects, but I actually, when I look back, it was all based on tutorials like small examples or presentations and no projects. So I started discussing this with a friend that I met at Openviz, Shirley Wu. She's based in San Francisco, also data visualization designer. And we ended up actually then doing a twelve month collaboration where each month we pick a topic, both pick the same topic, and then we both create a data visualization around that topic and we give feedback to each other. So we're both each other's critics and such. And so for. So for August the theme is Olympics.

Sure.

Oh, yeah.

So that was really the real reason I had to create a project in August about the Olympics.

So the reason is you wanted to win a prize and it was August?

No.

Yeah.

No, no, no, it was just, it's, it was a way. This, this twelve months is like a way to force yourself to do something, even if otherwise you might say, nah, it's like, no, I have to do something because Shirley's also doing something. So I also have to do something.

Yeah, but it's always great to hear how some projects start. And I totally understand your feeling of having done no visualization during the last twelve months. So how did you actually get started? So what were the first steps? How do you work on a new project? Do you first sketch it or you go into coding directly? How did it work?

Well, I either start from a question that I have, like why is this? Or how is that? And I try to find the data, but here it was. More generally, I just tried to find what data is out there, just googling for Olympics and data. And I found a really interesting dataset from the Guardian with all of the medal winners until the 2008 Olympics. And I thought that would be really interesting, such a rich data set. I wanted to do something with that. And around that same time I saw an image of a peacock feathers and I don't know why, but that stuck, that feather shape, I'm really intrigued by that, by how it sort of builds out. So I just started sketching then. Yeah, with feathers. So with pointy tips and thinking out, well, sort of like one feather could be one sporting discipline and then if you go outwards you get the years. And I thought it would be really interesting that, well, people remember the latest olympics most. So I thought the idea of having the emphasis more on the later sessions was an interesting idea. So when I sort of realized that I really stuck with this sort of feather shape idea, tried to build that out, there were some issues in terms of that that I didn't think of when it was still in my head. Like some years they have more medals or more events than other years and things change like that and that can really affect the feather shape. But by sketching it out a bit more, I finally sort of had something that I think could work once I plucked the data in. So really it's basic sketching. And then I dive into coding. There's not really an in between phase of making it, making a beautiful sketch.

And the dataset, was it in good shape already, or did you have to put a lot of work into cleaning and processing and analyzing the data?

Well, the funny thing is, actually, so this data set was until 2008, and I found another dataset that had 2012, and I added that. But in that 2012 dataset, which was actually also from the Guardian, there were a lot of missing medals, many sports were missing. When I did my check to see if the number of events matched the number of gold medals I had there, and it didn't. So I then manually really had to go through it 2012 and then figure out, oh, well, hockey's missing, some other sports are missing. So then actually, also my trust in the other data set, the really big data set sort of was broken. And I tried to figure out how can I check this data set to get my confidence back into the numbers without actually manually going through all of these people. So again, for each, I actually the same approach for each of the Olympic editions, I figured out how many events do I have called medals for? And then I looked it up on wikipedia to see how many they said there should be. And if there were discrepancies, that was a bit of manual search, like, where am I missing one? And that was also always explained. Either a match lasted more than a day and they just stopped it and gave out two silvers, small things like that. And one year, all of the horses were in the files were all winning gold medals. So you had like Princess Lulu one gold. So I took those out. They have great horse names.

They did win.

True. Yeah, true. Maybe I should just have let the horse names be there and then take the people out. So it was a bit of data processing, and also for the 2016, I could use 2012 as a base. And luckily there was a page that outlined the exact differences between these two Olympics that I could use. That I could use. But all in all, actually, I kept times, because I never do that. It took me about 12 hours to prepare the datasets.

Oh, nice. And how does it compare to the time it took to actually create the visualization part? You don't know?

I think usually I would say that data preparation is like 80% of the analysis 20, but with visualization, I always end up with data preparation 20% and visualization 80% because I'm tweaking so much. I just never want to let it go.

So what did you learn from the data and the visualizations? What kind of information can you extract out of it? Is there any surprising facts? Any insights?

I thought the first things I was very intrigued about was the fact that sometimes events disappeared, like tennis disappeared for quite some time, and then it reappeared at some point. And we saw that with rugby this year also, that women weren't allowed to compete in some very, like, normal sports for very long time. So I thought that was kind of odd as well. But it's being. It's more equal now. I think only greek roman wrestling doesn't have women, whereas I think rhythmic gymnastics, you can have men, which I would kind of find funny to see men just twirling around with those things. I think there would be men that were willing to do that, so why not?

Sure. It's funny. So some of the feathers are perfectly symmetric, right? And then you can see, okay, that's like it has always been diving, for instance, perfect symmetry. And then boxing or something. You know, it's like. Or many have this where just the last five, six editions, the women came in. And I didn't know that either.

Yes.

That's insane, actually.

Yeah. I never knew that. And then one thing we found also is that in 1920, they had lots of events in shooting and archery and sailing. And you can see that in the 1920 ring. But that means that the year with the most number of events defines the angle that the feather gets. So then you get a lot of sort of this white space around the medals, mainly because of the 1920 edition, which I found very frustrating. I was thinking about, is there one way that I can sort of delete 1920s only look at the last 100 years? Oh, no, that's. That still includes 1920s, but in the end, I just left it in because it was true to the data. I guess.

This is a good time to take a little break and talk about our sponsor for this week. This episode of Data stories is sponsored by Freshbooks. So it all starts with invoicing, but actually, Freshbooks has many features to help keep you organized and streamline the business side of being a freelancer. Freshbooks makes keeping track of your expenses extremely easy. You no longer need boxes full of receipts, and they also have a very nice mobile app. The app lets you take pictures of your receipts, and freshbooks organizes them for later. It can create expense reports for you and also makes claiming expenses at tax time a breeze. All the little details about cash flow are kept in one place. So freshbooks knows exactly what invoices you sent, when you send them, who's paid you, and who owes you what. Freshbooks will also handle your time tracking, so when it comes time to create that invoice, you'll know what you did and when you did it, the most important thing for everyone listening is that getting started on freshbooks is extremely simple, even if you're not a number person. Actually, especially if you're not a numbers person. To claim your free month of freshbooks, go to freshbooks.com Datastories, where you can sign up for free and without the use of a credit card. Please remember to enter data stories in the section titled I heard about fresh books from at signup. And now back to the show.

This is a good time to take a little break and talk about our sponsor for this week. This episode of Data stories is sponsored by Freshbooks. So it all starts with invoicing, but actually, Freshbooks has many features to help keep you organized and streamline the business side of being a freelancer. Freshbooks makes keeping track of your expenses extremely easy. You no longer need boxes full of receipts, and they also have a very nice mobile app. The app lets you take pictures of your receipts, and freshbooks organizes them for later. It can create expense reports for you and also makes claiming expenses at tax time a breeze. All the little details about cash flow are kept in one place. So freshbooks knows exactly what invoices you sent, when you send them, who's paid you, and who owes you what. Freshbooks will also handle your time tracking, so when it comes time to create that invoice, you'll know what you did and when you did it, the most important thing for everyone listening is that getting started on freshbooks is extremely simple, even if you're not a number person. Actually, especially if you're not a numbers person. To claim your free month of freshbooks, go to freshbooks.com Datastories, where you can sign up for free and without the use of a credit card. Please remember to enter data stories in the section titled I heard about fresh books from at signup. And now back to the show.

You mentioned a bit already. So you start sketching, then you go into code, and then you basically tweak your way to the end result. Is that basically how your design process goes, or can you remember which steps this one took? Did you. Did you know already you want to do the five rings, for instance, or is that something that emerged later?

No, it already started out with five rings, and that was only because I actually wanted to have it in one ring. But when I was, I then calculated how many degrees I would need. So I thought, well, each discipline or sport has a maximum number of events they once had. And so I was counting all of these things for all of these disciplines. And then I thought, well, that means that each metal would have to be smaller than one degree if I fit it into one ring. So I knew that that wouldn't work. And then I thought, well, five is the logical next step. And five, it gave a nice number of arc degrees that one metal would get. So I already started out with five, and, well, the first thing I did was really just getting these one feather correct, I guess. But then, in a codewise way, if you get one feather correct, the rest follows because it's based on the same idea. So I had to figure out, first I create a feather. So a group for athletics, for example, and then I create groups within that for the additions. Then there's a group to the left for women, a group to the right for men, and then finally we have the separate medals. So it's really a very nested structure in there, and it was really about getting those groups in the right rotation and then placing the metals in the right place. And that actually went fairly quickly. I think I had the sort of the groups there and the medals in the right location within an hour or three or something, but then it didn't look very nice yet, so it still needed a lot of tweaking and extra additions and such. The abstract base was there pretty quickly, and that's sort of where my sketch also ended, just having these medals there. And then it's really about starting to tweak with the code. So adding legends or adding the timelines, adding interactions, or this background color for women or men, that was also something that wasn't there at the start. And actually all the way at the start, they were still feather shaped. So now they're truly circles. But I used to have them with tips at the end so that they would look more like feathers. And I was playing around with these SVG pads and cubic bezier curves and figuring out how to create these tips dynamically, which was a lot of fun. But then I showed it to a friend and he said, lose the tips. I had to swallow and think about it in an hour. But I lost tips. But that's why it's called olympic feathers.

Still, I wouldn't think of feathers, right. It looks like maybe overall like metals or some, some tree rare structure. Yeah, but it makes sense.

So one thing that I really like is that you have this webpage on GitHub that shows the progression of your designs. That's amazing. I really, really like that. So we will link that on the show notes. I suggest all listeners to take a look. It's a really cool progression of ideas. And you can see the rings transform from their initial feathers to the final whole page. So how did you actually decide on the final format? Did you see that as a blog post, as a poster? What kind of medium did you have in mind? Did you have one in mind from the very beginning or the medium itself evolved over time? How did it go?

Well, at the start I thought it might work nicely as a poster, but when I started building it and when I sort of wanted to investigate the data and the things that I saw emerging from the visual, I thought I really wanted to have interactivity. So I want to hover over a medal and then see who that was or which event that was. And that sort of made. Yeah, well, the poster wasn't, the static part wasn't possible anymore. So that is what turned it into a webpage, but just not really a blog post, but really like a standalone thing, because the, the circle should have as much room as possible on the screen. I thought otherwise they would really be too small. So that's actually how that turned out to be, just its own standalone website.

And from a technical point of view, like did you implement it? Did you write it all yourself? Did you get some help? What's your tech approach?

I wrote it all myself, although I'm sure I have many stack overflow people to thank for helping me.

We all do.

We all do, yeah, exactly.

But I did ask that designer friend for some input along the way to say what he thought about it, and then he would sometimes share a suggestion how he put it together. So it really is just HTML with D3 used to visualize it. But in essence it's actually a fairly simple site, which no extra things added except for D3. Let me see. No, yeah, that was it, really simple and lean.

No, that's perfect.

Yeah, yeah.

So, and I guess everything is available in your GitHub page, right? So if listeners want to take a look they can go there, right?

Yes, yeah, yeah, it's all in GitHub, so also the code is all in GitHub. I always share everything I make because I get the group the best things back, like how to improve stuff. So I'm all pro sharing.

Yeah, that's great. So let's say that some of our listeners want to do a similar project. Are there any lessons learned that you, lessons that you learned during the process that you can share with our listeners?

Yeah, that's great. So let's say that some of our listeners want to do a similar project. Are there any lessons learned that you, lessons that you learned during the process that you can share with our listeners?

Well, I guess from the start in a data kind of way, is that even from such respectable websites or places like the Guardian, you should always find a way to make sure that your data checks out, that aggregated numbers coincide, and if they don't, that you understand why, because otherwise you can have sort of a false security. Because the data set is so large that it's difficult to test. Even if you just manually try out a few and see if they're correct. It's difficult to see if things are missing. It's not less difficult to see if things are incorrect. And especially the missing part I think was a learning for me here. And then I think what I also did here was that I structured the data set into a JSON beforehand with lots of things pre calculated. So the angle of rotation was pre calculated based on the metals and what came before. Because I find that I work in R for my data preparation and I find that so much easier to do in there instead of JavaScript. So in JavaScript it's really just reading out the right properties and then oh, rotation. Well I'll pick the rotation offset property that I already have in the dataset. So that made it much easier to set up the basic shapes pretty fast.

And that makes much cleaner code if you separate the preparation and then just the visual mapping, if you have that in two parts, even if it's both, JavaScript, if you have two separate parts, makes much cleaner code. I totally agree.

Yes, definitely. I was starting out in JavaScript at first and I thought, well, no, this is just getting way too complicated. I can do it much easier. And I guess in the visual design, well, just asking friends for feedback, I guess. Well, I guess most people do that, but this was really a project on my own. And you can sometimes really get stuck in certain ideas and then somebody who hasn't seen it and, well, it's not really a new thing, but they can have like a fresh look and say, well, that doesn't work. Or what about this that you just weren't thinking about anymore because you've already spent hours and hours looking at the same thing.

Yeah, great tips. Really. I totally agree. So you put it out on the web and then what happened afterwards? Like, how was it received? Did a lot of people take notice? Did you get any comments back? I also saw you had a lot of, you made good use of Twitter in promoting it by publishing individual stories during the games with little screenshots and gifs and so on. So can you tell us a bit what happened after the launch?

Yeah, so it was received really well, actually, I would say that I've only had one thing ever that I created that was received even better. So this one is really like the top, this number two in the social media sense, although I don't know how that compares to general. But for me personally, it was well received. And yeah, I tried to market it a bit more, I guess because every day I was updating 2016 data set because every day we had like 20 new medals. And when I was doing that, I would find these new interesting things, like, well, because I'm from the Netherlands, when finally won a gold medal in gymnastics, I was like, oh, did we ever win a medal before 1920? Oh, that's cool. So I just, I just made a snippet of that and shared that. So it was also a way to just share more interesting stories that with the things that you were able to find from the visual, but didn't do it every day, just like every other day or so for the last week of the Olympics. And people, they were really positive. I thought because it was a circular chart, I would get a lot of like division, like people either liking it or hating it because it was circular.

Don't do that.

Don't do something around.

Yes, I mean, they are in fact sort of donut charts morphed into radial bar stacked bar charts. But I only got one tweet that said, oh, wait, you can't read this because it's a donut.

I have to admit, it was. My first reaction was also was that necessary? Do we need to make that round? But then I looked into it, I think it makes sense, you know, I think it totally works. But I have, I have to admit, my first reaction was exactly this.

Yeah, we're so trained in that. Right. I always have to, because I love circular things and I have to, really have to hold myself back sometimes to not turn everything into a circle.

Yeah. Ah, the circle people. Yes, one of the circle people. I think. No, I think it's fascinating and I think it's all these little stories, they really make the piece and all the little annotations and it's once again, one of these things that become the more fascinating, the more you look at it. So just yesterday I read an article and somebody was thinking about how unfair it actually is that there's only like a couple of gold medals for sprint, but, like, in swimming, you have like a hundred different disciplines and swimming styles and lengths. So Michael Phelps has it much easier than Usain bolt, you know, in terms of. But still they're being measured against each other in terms of gold medals, but Michael Phelps has much more chances to win gold medals and that's really unfair. And then you start to think about, wow, yeah, that's like, maybe swimming is totally overrepresented in all these statistics because, you know, it seems much more important than the other things. And so true. And all these really interesting questions that are tied to this data set and what are you actually counting? And so on.

Yeah, yeah, I thought exactly the same thing when I was building this up. Also, because somebody like Simone Biles, she's so amazing and she won, except for that one that went to the Dutch, all the gold medals in the gymnastics, and she could have won way more if there were more things to medals in that area, I think. And, yeah, so I was thinking exactly the same thing when I saw that.

And it seems so easy, like, yeah, we're counting the medals and it seems so straightforward and straight, but, yeah, and then you look at it in detail, you're like, ah, that doesn't make any sense. Yeah, it's interesting. Very nice. Great project. I think it's a great example of, yeah, how interesting things can happen if you just have a good visual idea and, like a deep data set and you really go all the way with it. And as I said, I love the annotations of the whole presentation and, yeah, make sure to check it out. We'll put the links in the show notes and. Yeah, thanks so much, Nadieh, for coming on the show. It's fascinating to follow your work and thank you. I hope you win a prize with it.

That's why I didn't make it for that. It was the awards that reminded me that I hadn't created anything.

But now you have to hand it in. Now you have to win. Thanks so much.

Thanks so much.

Thank you for having me.

Yeah. Bye bye. Thank you.

Bye.

Hey, guys, thanks for listening to data stories again. Before you leave, we have a request if you can spend a couple of minutes rating us on iTunes, that would be extremely helpful for the show.

Hey, guys, thanks for listening to data stories again. Before you leave, we have a request if you can spend a couple of minutes rating us on iTunes, that would be extremely helpful for the show.

And here's also some information on the many ways you can get news directly from us. We're of course, on Twitter. Twitter. We have a Facebook page@Facebook.com, datastoriespodcast. All in one word. And we also have an email newsletter. So if you want to get news directly into your inbox and be notified whenever we publish an episode, you can go to our homepage datastory es and look for the link that you find on the bottom in the footer.

So one last thing that we want to tell you is that we love to get in touch with our listeners, especially if you want to suggest a way to improve the show or amazing people you want us to invite or even projects you want us to talk about.

Yeah, absolutely. So don't hesitate to get in touch with us. It's always a great thing for us. And that's all for now. See you next time, and thanks for listening to data stories. This episode of data stories is sponsored by Freshbooks, the small business accounting software that makes accounting tasks easy, fast and secure. Freshbooks is offering a month of free, unrestricted use to all of our listeners. To claim your free month, go to freshbooks.com Datastories where you can sign up for free and without a credit card. Remember to enter data stories in the section titled I heard about freshbooks from at Signup. Once again, go to freshbooks.com Datastories to claim your free month.

Yeah, absolutely. So don't hesitate to get in touch with us. It's always a great thing for us. And that's all for now. See you next time, and thanks for listening to data stories. This episode of data stories is sponsored by Freshbooks, the small business accounting software that makes accounting tasks easy, fast and secure. Freshbooks is offering a month of free, unrestricted use to all of our listeners. To claim your free month, go to freshbooks.com Datastories where you can sign up for free and without a credit card. Remember to enter data stories in the section titled I heard about freshbooks from at Signup. Once again, go to freshbooks.com Datastories to claim your free month.