Transcription
Audience: [Applause]
Nadieh Bremer: Let’s see. Yes, thank you very much for having me. I heard so many good things about Beyond Tellerrand, especially when I went to the Fronteers Conference in Amsterdam, and so I was so pleased when I was invited to speak here.
But when people hear that I am actually officially an astronomer, they always find it very odd how I could have ended up as a data scientist when I finally left academia. This has become even worse now that I’ve switched again to focus primarily on the visualization of data. However, with images like this to look at, I’d say that astronomy is probably the most artfully or visually oriented of the exact sciences. And with more than a billion stars in our Milky Way alone, we have more than enough data to play around with. So for me personally, a switch to a data visualization designer seems like a perfectly normal extension of astronomy. And although I dabbled with visualizations during my data scientist years, I’ve only truly been focused on it for the past two years or so.
I found that, in data visualization, I tend to be a perfectionist. I love spending hours and hours on some small detail to make it exactly as I have in mind or sketched out on paper. However, usually what I have in mind isn’t quite the default setting or what all of the examples are using, and that forces me to try and be creative with the available charts and tools like using a donut chart to create a radial bar chart, for example.
You don’t have to be some sort of code wizard to go beyond the norm. By combing existing charts and forms and layouts in inventive ways, you can assign a new meaning to the whole or even simply reusing an existing chart in a different manner can open up more possibilities for new data displays. And don’t underestimate the power that a good use of fonts and colors and hierarchy you can have on the end result in terms of visual appeal and effectiveness. Of course, for drastic changes, you can even decide to go into the underlying source code if possible and turn an existing chart into something completely different, but based on somebody else’s fantastic work.
This is really true regardless of the tool. I’ve hacked my way through PowerPoint, Keynote, ClickVue, Tableau, R, although I’m now mostly focused on D3 due to the creative freedom that it brings me. D3 is a JavaScript library that has become the standard in online data visualization, and it’s what I’m using for all of my examples.
I hope that -- I actually want to take you through several projects that highlight the different ways you can go beyond the norm in the visualization of data. These examples are of projects that I did in the last year and a half or so, either during the day working for Adyen as a data visualization designer, although I handed in my resignation this week to become a freelancer full time. And the other projects I did in my own personal time, which is just in the night and in the weekends.
Although personally painful, I’ll even show you some of the very first things that appeared on my screen if I was brave enough to take a screenshot of it back then. Before taking you through the choices, mistakes, and improvements made that evolved, these were the final states. Hopefully by the end, you’ll be driven to take your next data visualization beyond the norm and take a look at it from a different angle to get the most effective and engaging result possible.
The company that I’m still working for right now, Adyen, handles payments. They are sort of the middleman in between you and the store where you want to buy an item or a service from. They try and get as many good transactions through regardless of whatever payment method you are using or whatever bank the store is using.
Well, Adyen also loves to catch fraudsters, of course. The project that I’ll show you know called the Shopper DNA is a way developed to visualize more complex cases of fraud. It’s not really visualization that you can understand right after you see it, but it’s used primarily by people that do nothing else than investigate fraud the entire day. For them it’s worth the initial investment.
It’s not the best screenshot, but this is how the first version of the Shopper DNA looked when I first joined Adyen about a year and a half ago. What is visual on this screen is how one transaction can be connected to 13 other transactions through payment identifiers. The 14 transactions together have all used the same email address, 3 different credit card numbers, and 2 known IP addresses.
I diverged a bit trying to figure out sort of a second version, but eventually I came back to the same basic setup. However, now these circles, outer circles, they were scaled according to how often that identifier had been used in the transactions, and I added these thin outer arcs to section off groups with the same payment identifier like delivery address or email address and so on.
But if you look at this visualization in an abstract sense, it’s really a combination of three separate things. We have the inner lines, which are part of D3’s little known chart form called Hierarchical Edge Bundling. These sized circles, they are nothing special. You see them in scatter plots and bubble charts quite often. This very thin outer arc is nothing more than a teeny-tiny donut chart. But by combining these three charts, the Shopper DNA had been sort of converted into something new that was exactly fitting to the data and revealing its insights.
Something else I quickly want to touch upon is colors. Although finding a good color palette can be difficult in any field of visual design, I personally feel it might be most difficult in data visualization because the colors also have a direct meaning. For these payment identifiers, which are categorical, I had to find a color palette that looks nice together, but is still distinguishable.
I often start with a rainbow because it has many different hues. That one. I couldn’t use red because that was in use in an outer ring representing something else, and yellow is often too bright, grasping the attention more than any of the other colors, whereas all of these payment identifiers are of equal importance. Well, somebody then suggested to use a pastel rainbow, which you already saw and, yeah, that didn’t really work out that well, so that was just one refresh screenshot and move on.
I tried some more earthy tones, even trying out the red a bit, but that was just not working. Then I asked some of my colleagues and the design team, and then five people had a two-hour meeting about colors. One of the good things that came from that is that actually the design team got a lot more respect for picking colors for data visualization.
Audience: [Laughter]
Nadieh Bremer: But the thing that we ended up with was this, so blues and greens. But even here you have to be careful. If you make the one half all greens and the other half all blues, people are going to see that as two separate groups, which they aren’t. Even within the colors, if you go from light green to green to dark green, again in data vis that’s often the darker the color the higher the value, which isn’t the case here. So we really have to think about how to alternate these colors to make sort of have only different colors, nothing else.
Then we took this to user testing, and what feedback did we get? Well, they told us, we don’t really need to see the difference of these identifiers. We want to see more difference in this outer ring representing something else, and then we can read off the labels whatever the other stuff means. So I turned it all dark blue. Easy. If only I’d known that before. Yeah.
Well, one other thing I implemented is that if the circle gets quite big, which is often an indication of fraud, I only show the most often used identifiers and then, on a hover, everything that is connected does become visible. This is a way to make the visual less daunting to look at for the user, but also focuses the attention off the user onto the identifiers that are probably most important.
In the previous project we had circles connected by lines, but typically in data vis, when you’re talking about connected circles, you’re talking about a network, which brings me to another project I did at Adyen. They’re now about ten years old, but they really try and keep that starter vibe going. And, in typical Dutch style, there’s virtually no hierarchy in the way people interact.
However, if you look at the organization from an HR perspective, it’s still very much a pyramid with a CEO at the top. When HR came to me requesting a new organizational chart, they had two demands. It should be able to update dynamically when new people are added, and it should not portray the pyramid vibe. That’s why I decided to go for a network because then it appears as if people are lying more in the same plane of equality.
Well, I got some data to play around with from HR, and this is truly the first time I had something successful on my screen, the first time it wasn’t just white and red error message in the console, everything. You can already see the network being built up there on the right, people connected to their managers. In essence, this is the network. Of course, this is not something I can go back to HR with and tell them, well, here you go. There’s the network. It needed a lot more, both in terms of design and interactivity.
Well, something you might notice from this presentation is that I often have a mandatory rainbow phase during early development because it just makes the screen more fun to look at, although I usually end up at a different color palette. But the first thing I turned my attention to were teams, how to make it visually more clear which people were in the same team. My first approach was to sort of calculate a shape that will go around the team members exactly, but I could never make that look smooth. It was always clunky with these weird shapes going on. In the end, I just decided to go with plain circles. Though they take up a bit more space, they actually make the whole feel less cluttered due to their smooth, symmetrical shapes.
Well, next up were the nodes, as circles are typically called within a network, or an even better term is my colleagues. Well, these circles had become quite big in the meantime because I had come to understand I would have access to photos of everybody, but I also wanted to use an outer ring of color representing the function that that person had within a team. But the problem was people were starting to overlap, which isn’t fair to the people on the bottom.
Well, I made a version that had no overlap, but that took up so much space that you lost the structural view of the network. Again, I tried around different things, different things, and ended up at this where these circles, they would still overlap, but where they did the axis would be cut away. I really liked the visual analogy that this gave of each team is now clearly visible as little groups of frogspawn clinging together. You know you do typically work together with people throughout your team, but you work most closely together with your direct team members, so I really liked that, the way that looked.
This process of partial clipping was done by using a so-called Voronoi technique. It’s a technique. I’ve made the Voronoi cells here visible. It’s a technique in which you split up a plane into cells. Each cell surrounds one point in such a way that everything within that cell lies closer to the point within that cell than it does to any of the points outside of the cell. It’s a very handy technique, and I’ll show you a few more uses for it later on.
As a bit of a background, in D3 a network is created by simulating gravity and charges. When you press refresh, the network is first bouncing around trying to find some form of equilibrium of pushing and pulling. I’ll show you a movie now where I have just pressed refresh, but I’ve also visualized these Voronoi cells continuously, so hopefully it’ll become a bit more clear how they truly react. I also figured out that if you forget to update the Voronois and instead plot an entirely new one on each animation frame, you get a rather psychedelic result.
Audience: [Laughter]
Nadieh Bremer: Anyway, the next challenge: in D3’s version 3--we’re now actually at 4, but when I was making these we were at 3--the network is created by first randomly plopping all of the points onto the screen. That meant that on each refresh my network would be oriented completely differently. But of course that doesn’t really work when you have a colleague going into the organizational chart, trying, having to reorient themselves every time. There has to be some form of consistency.
But I didn’t want to have to specify the locations of each of these people, these persons, because that would defeat the purpose of it being dynamic. Therefore, I sort of tried out a hybrid approach where I would fix the position of some of the people, but only based on very general characteristics. I would fix the CEO in the center, the board around him in a circle, and then the first layer underneath the board would sort of be positioned in the same general direction with a slight random offset, and then the same for every level deeper. Now I would let gravity take over, which makes it much more certain in which direction these circles will fly out because it is gravity, and so you can sort of intuitively see how that might go.
This is how it would then look on different refreshes. I mean it’s not perfectly consistent, but it is definitely consistent enough. A few more design things in there, color palettes, blah-blah-blah, and this is where I ended up with the visual form. Okay. Great.
You can see how Adyen’s organization looked a few months ago. But, yeah, nobody can really use it. It needed interactivity, but I don’t typically start on interactivity early on. I only start when I feel like I’ve hooked down the main visual shape that I want to have because, although interactivity can be paramount, it will never turn a bad visual form into a good one.
To be honest, I don’t really enjoy implementing interactivity. I always have these clashing events of hovers and clicks and if and all statements trying to figure that out. Also the visual on my screen isn’t really changing that much any more, so psychologically it feels like I’m at a standstill. But yeah, this one really needed some interactivity.
We had 400 people and counting. I really needed a search box, so let’s show you where I’m at. So that’s me. Yeah, I have some very interesting colleagues, as you can see. So it’s just a simple hover. You hover over a person. You see who that person’s manager is. If that person is a manager, you see which team he leads. We can make our own job titles. I especially like this one: Visual Art Implementer of Graphic and Interaction Design and Branding Communicator. Yeah.
Audience: [Laughter]
Nadieh Bremer: Well, he knows his way with words though.
Somebody else I really like, I was always a fan of Flarion, so we can go to somebody else, and now we have a click event in a way, which is nothing more than a hover that just holds. We can pan in here. We can zoom in or out. We can go all the way--that’s too far--all the way back. And here we have these functions that people have within a team. It’s really pretty basic interactivity, but it turned this chart into something that nobody could use into something that people can use to see how somebody fits into the organization, who that person’s manager is, and so on.
In the previous project I used this Voronoi to get away to get rid of this axis overlap. But it can be very handy for increasing UX and data visualization as well. Here we have a simple scatterplot. I’ve taken some data from the World Bank showing life expectancy on the vertical and GDP per capita on the horizontal for about 200 countries in the world. They’re sized according to the total GDP of that country and colored according to the region in which they lie.
When I see this, I want to know which country is which. There are too many to label separately, and that’s why we typically use tool tips. The tool tips are often attached to the element that triggers the mouseover, so I mouseover a circle. Then we have a tool tip attached to the circle. I’ve made the circles quite big, but it can still be quite difficult to sort of get a sense of this sparse region. I really have to really try and get my mouseover there.
I thought, well, can’t I combine that with these Voronois? Okay, so now the Voronois trigger the mouseover. Great. Now I have a tool tip everywhere. But, yeah, that doesn’t really make any sense to have this tool tip hovering over the cell.
What I did then is I gave the circle within the cell and cell some unique ID like country. Then when I move my mouse, the Voronois still trigger the mouseover, but the tool tip is attached to the circle inside it. Well, of course I don’t need to see the Voronois. They’re just there to capture the mouseover. But now it becomes a lot more easy to get a sense of this sparse region over here, whereas it works perfectly well in these really dense regions.
Well, I created a tutorial on how to do this, sent it out, and then a few months later Frank Lebeau actually said, well, over here I’m too far away from any of the circles to see a tool tip. It doesn’t make any sense. He implemented something else where he had distance limiting circles.
Now the tool tip is triggered by these blue areas. But these blue areas are still clipped according to the Voronoi grid, making sure that I always see the right one. Again, I don’t need to see all of the stuff that’s happening behind it, but that’s how something as default as a scatterplot can be improved to sort of have a better user experience.
But Voronois can also be used for line charts because line charts are, in essence, just a collection of points connected by a line. Many very fascinating analyses of baby names have been done in the past, such as the most trendy or poisoned or unisex name, but I was interested in something much more simple. I just wanted to know how had the most popular baby names risen and fallen from fame over the past years.
Here we have the end result where each of these lines is a name. On the horizontal we have the years, and on the vertical we have the position in the top ten. For example, in 1986, Jessica was the most popular U.S. girl name, then Ashley, then Amanda, and so on. It’s colored according to the … (indiscernible, 00:18:22) name and the thickness represents the highest position ever reached by a name, so we can see here that Jennifer was number one, but here Meagan never got above number ten.
There’s a Voronoi at work here because I don’t actually have to hover over any of these circles -- sorry - circles -- these lines exactly to capture them. And because we have a top ten for every of the years, it’s just a rectangular grid. I can increase this timeframe, and then the Voronoi grid updates right along with it.
Well, sometimes I make very extensive sketches, but more often then not they’re quite simple like this one. But although this sketch is simple, it contains the visual form that is the main abstract shape of the end result. I didn’t design any more things on paper for this project. I knew I had to get the actual data on my screen and then continue to design with code, which is something I find myself doing more and more often these days because your data has such a great impact on your design choices.
But this is the first functional thing I had on my screen, and it’s not pretty at all. I mean the lines aren’t even connecting. Basic color scheme. Axes in the wrong location - whatever. But you just start trying to fix every little thing and see where that leads you.
Well, here we have the lines are connected. Good. We have my rainbow phase. The variable time picker over there. Things are going okay, but sadly these are the only two screenshots I made during this project. But there is one other thing I wanted to share.
Although I only show the top 10, I actually have the data for the entire top 100. If you look how these names acted when they were below the top ten, something very fascinating arises that names, they can rise up out of nowhere to a top 3 position in just a few years, whereas if they fall off, it can take decades before they disappear from the top 100. That sort of makes sense, though, if you think about it, but I always find that so awesome when the data actually tells you that.
Although this Voronoi really helps to get a better mouseover event, I think it’s actually this sort of mini chart over here that makes the biggest difference in making this chart more effective. When I was investigating the data, I actually found out that it was available until 1880. However, a typical screen isn’t wide enough to do justice to 135 years of volatile change. That’s why I employ this technique of focus and context in which you have a small chart below that shows you all of your data, so 1880 all the way to 2015-ish, and then you select a window from that that is visualized in more detail above. The user can then sort of make the window bigger or smaller or move it to somewhere else, so you give complete freedom to the user to investigate whatever they want to see.
I’d seen the use of this main and mini chart only for line charts, but I thought, well, wouldn’t that be interesting for bar charts as well? The next time that I created a design for a dashboard at Adyen, I put in something that I called a brushable bar chart where a brush is sort of the technical term for this window.
Here’s the setup where, on the right, we would have all of our bars from which a small selection of them would be selected then visualized in large on the left. Although a colleague of mine would focus on getting the rest of the report ready, I would try and get this brushable bar chart into the charting framework that we use at Adyen. Okay, so sadly I couldn’t find any readymade examples on stack overflow. There were some things, but nothing was quite advanced enough.
No worries, I thought. I’ll just start from a bar chart and figure it out from there. But then I learned why there weren’t any readymade examples. Let me try and explain the essence.
For a line chart we have continuous data such as time. This sort of bigger main chart only knows about that axes that you gave it, so here we have 1950 to 1970. If I then make that window three times as big, you can extrapolate from this axes. I can say that my run from 1930 to 1990, and then it can regress the data for that.
However, if we have categorical data, for example we have these three movies, and if I make the window three times as big, there is no way to extrapolate that based on this axes. You don’t know what data might go left or right. That was sort of the essence.
Nevertheless, I wanted to try and figure it out, so my first idea was to have this sort of mini chart sent through the selected bars, which would then rerender. However, that gave quite some headaches in terms of transitions. Here we have just a bar chart of the top 50 worldwide grossing movies. Don’t start using rainbow gradients to fill your own bar charts. This is just for presentation purposes.
But if I move this thing down, you see the movies that disappear or they slide out. The ones that stay, move up, and the new ones move in. I couldn’t make it immediate. I tried to do that, but it just didn’t look right. The problem is that transitions take time, so I can’t do anything when somebody is moving this thing up and down. Even more so, I can only send through whole bars, so I had to write all kinds of ugly code to make sure this window would sort of snap to the nearest bar no matter if I move it up or down or over here, move it there, whatever.
Okay, so I wasn’t quite happy, but it was working. I made this sort of dummy example, put it online and, as I’d hoped, somebody came with an improvement. They told me, why don’t you use clipping instead? That was such a good idea. A completely different way of thinking.
In this scenario, both of the bar charts would know about all of the bars, but most of this bigger main chart would be clipped away. Then I only need to send through the top and bottom pixel location of this bigger main chart so that the visible portions would be in synch, which then gives me this. Now if I move down, I get instant feedback from the main chart knowing that, well, I’m doing something and it’s working. You can have half bars over here, so I can remove that code as well. Much better, this version.
This is how that was implemented eventually in the reports at Adyen. This is like a dummy example, but there are charge backs, which is a synonym to fraud, so the color is red, and you can sort of figure out which of these countries you want to see of if you want to rank it on count or rate or amount. Yeah, so that was a fun, fun, fun challenge to do.
Moving away from the brushable charts and the Voronois, I want to end with two projects that took the same basic chart form, but used it for wildly different data and visual results in the end. Well, during a fun project at my previous employer, Deloitte, I had access to a data set that contained what education people had done and then what occupation they ended up doing a year and a half after graduation. We wanted to visualize these flows from occupation to education. I could have used a Sankey diagram, which is very good at showing flows. But I like circular things, and it was going to be used in the media, so I wanted to try and create something a bit more eye-catching.
I made a simple, simple design, and grabbed some images from whatever, showed them to my manager and, thankfully, he loved it. But then I had to build it, of course. The only problem was I didn’t know that this design existed in any of the charting frameworks that I was aware of. I therefore tried to start from something that did exist and see if I could somehow transform this in this circular flow design.
Well, in D3 there is something called a Chord diagram. I’m a big fan because it’s circular, and it can show an immense amount of information in a small space. But it is known for being particularly hard to understand. Nevertheless, I felt that this was the chart form that most closely matched my design.
I’m just going to try and quickly explain how you can get information from this. I want to see more people using it. This is the default Chord diagram and it shows, for an imaginary population of people, their own hair color and the hair color they would prefer on their partner. I’ll let that sink in.
Okay, so the outside circle is the actual distribution of hair color, so see that as a donut chart. We have about 30,000 people with black hair, and about 40,000 people with brown hair. If we then focus on one of these inner chords, as they’re called, we see this one is about 16,000 people wide on the brown haired side.
These 16,000 people that have brown hair would prefer a partner--and we follow it to the other side--that has blonde hair. Okay, so vice versa, about 20,000 people have blonde hair, but only 2,000 of those people would prefer a partner that has brown hair. Okay. Maybe that was a bit fast, but I hope I’ve at least been able to convince you that you can get insights from this chart.
For mine, it was much simpler. I just needed all of these chords to flow from left to right. Here was me trying to figure out the data setups to make that happen … (indiscernible, 00:27:32) these in. Good. That was working.
But how to get this gap in the middle? Well, maybe I can just add another chord that represents no data, sort of rotate it so it would be nicely in the center, and then hide it altogether. Here I was at the form that I’d shown my manager. I’d achieved it without too much trouble. I’d just taken an existing chart and used it in a different manner by looking more abstractly at the separate elements and seeing how I could use that in my design.
To be honest, in my mind these parts were pulled apart a bit more. And although I could easily move these outer arcs outward, for these inner chords I had to dive into the D3 source code for the very first time and make some very minor adjustments. It was nothing more than some horizontal offsets. But that was truly not something I could have done with the available options of the Chord diagram.
Also some sorting to reduce the overlap, and now I was at my desired end result. Again, I wrote a blog about it, how to recreate it, called it the Stretched Chord diagram, and put it on Twitter. Then people started calling it the Bat Plot.
Audience: [Laughter]
Nadieh Bremer: Which was way more catchy. I’m not good with names.
Anyway, here is the actual end result where we have educations on the left and occupations on the right. Just to make it a little bit more intuitive that we are talking about a flow, I added sort of a very subtle gradient over the chords.
But as I told you, in data visualization I am a perfectionist, almost having OCD, so even though you couldn’t see them, it was still bugging me that these dummy chords, they were in the DOM still. You could select them if you wanted to. And the data had to be structured in a very specific way with symmetries and zeros going on.
The next time -- I told myself the next time I’m going to create a new chart, I’m going to do it right and wrap it into a new function instead of hacking an existing one. A few months later, the opportunity arose to do just that. It was again, coincidentally enough, again connected to a Chord diagram.
For about nine or ten months now, I’ve been doing a monthly collaboration with Shirley Wu, who is a data vis designer from San Francisco, called Data Sketches. In it we make a data visualization each month on the same topic and then, besides sharing the end result, we also write about the creation process, so data findings, sketching ideas, coding it up.
For our very first month the topic was movies. I don’t actually have a favorite movie. It really depends on my mood, but it’s probably some sort of sci-fi action fancy adventure. I do have a favorite trilogy, and that’s The Lord of the Rings. That’s more than 11 hours of film. I can watch it year-after-year. I’ve even watched the 24 hours of extras more than once. Anybody else?
Audience members: Yeah.
Nadieh Bremer: Thank you.
I tried to find the data and was surprised there wasn’t that much to find. But then I came across a real gem. Somebody had counted the number of words spoken by each character in each scene of all three extended editions of The Lord of the Rings. I mean how amazing is that?
Audience: [Laughter]
Nadieh Bremer: I knew I had to visualize that data. I decided to focus on the number of words spoken by the members of the fellowship in the different locations. I made this sketch, so we have the members of the fellowship in the center, the locations around that inner circle, and then some chord we connect them where the width of the chord will represent the number of words spoken.
But as you may see as well is that this is sort of similar again to a Chord diagram, so I knew I could probably start from there. But I also knew that even with a mountain of outside the box thinking, I could not get these chords to flow inward. I really had to dive into the underlying source code and really drastically adjust them to make my own function.
On a lovely summer day, I decided to stay inside by my laptop and figure that out. Typically, I really work in small steps, so I don’t really think about it all the way through. It’s more like I need to figure out how to do this. If I got that working, I’ll figure out the next step. If I can’t get it working, I’ll figure out the compromise and see how that will take me.
The most important step for me was trying to figure out if I could make these chords flow inward. That actually took less time than anticipated, which is pretty rare for me in coding. Well, getting rid of that space and now it was ready to handle the actual Lord of the Rings data, but we have nine members of the fellowship making sure that they end up at the right vertical location, some sorting again to reduce overlap, and some fun with math and custom SVG paths to make these inner chords look a bit more natural and smooth as if they were hanging instead of … (indiscernible, 00:32:23). Some better colors.
But it was getting pretty clear to me that this chart could use some space in the top and bottom. Well I had some experience with that, but this time I was going to do it right. No empty percentage -- sorry. No dummy chords, but just using, giving an empty percentage to the function and figure out the rest. Of course that took a few steps to get working, but eventually this is where I ended up at the end of that lovely summer Sunday where any sane person would have stayed outside.
Well, a few more design tweaks and I knew I really needed to have some interactivity because we have so many of these chords going on. I implemented just the easy ones. We have a hover, and then we can see who spoke at that location. But we can also hover over a person and see where that person spoke. But also, I’m hiding where he didn’t speak because it isn’t always about showing the data. Sometimes it’s also about hiding what’s irrelevant.
I added this small piece of text for every person, something that I learned through this data. My favorite one is actually Boromir, who is really only alive during one movie. He manages to speak more than Legolas does in three.
Audience: [Laughter]
Nadieh Bremer: I didn’t know that. And I spent way too much time trying to figure out the elfish words for these locations. I still don’t know if it’s correct, but it looks pretty.
Audience: [Laughter]
Nadieh Bremer: What I figured out from these more elaborate projects is that I never just plopped my own data set into an example and then called it finished. Each data has its own unique quirks and insights that require adjustments to the default to show the information most effective and make it visually appealing.
I also never start from scratch. Many people have done wonderful things that they share or they share a way to recreate it. The quote by Kirby Ferguson that everything is a remix of something else, holds very true to me. Although I might not consider it a remix when I’m designing something, but when I look at my final result and I compare it to what’s out there, I see the commonalities and I started from something that lies closest to my design. I hope that by taking you through the design journey of these projects, I’ve shown you how even the most basic starting point can turn into its own unique project, how by combining and reusing designing and hacking you can create something that is tailored to your data.
The final thing I actually want to end with is a project that I did during the Olympics, visualizing all 5,000 gold medal winners since the very first Olympic Games in 1896. I was really sad of finding out that I didn’t take enough screenshots of my previous projects, so I took loads of screenshots during this one. At some point I felt like maybe the screenshots can sort of speak for themselves about how the design process went.
It’s called Olympic Feathers because my initial inspiration was a peacock feather where you would have more emphasis on the later editions. It was sort of that’s how the years flowered. I tried to make these sort of feather shapes, and then I showed it to a designer friend of mine. He’s like, yeah, lose the feather shapes, and that was really tough because I’d spent so much time creating these path, but I trusted his opinion, so they were gone. But I could never think of a new name because, yeah, I’m not that good with names.
You can actually find tutorials on most of the stuff that I’ve shown you here on my website, VisualCinnamon.com, because however can spell my name correctly, so that’s why I have a different kind of website. But data visualization also really lives on Twitter, so if you want to know more, please join me in Twitter, and we’ll talk about data vis over there.
Thank you very much for your attention.
Audience: [Applause]
