Now, I want to introduce the concept of graphical decoding. What is graphical decoding? Okay. If you remember, so far we've been discussing about the idea of graphical encoding. What is encoding? Encoding are the rules that you as a designer implement typically in a computer program to transform data into a graphical representation. Okay. That's very important. But what I want to teach you right now is the opposite. Graphical decoding going from observing of visual representation and trying to figure out reverse engineer, what the mapping rules and the graphical components of this visualization are. This is a very useful procedure. So let me try to give you a little algorithm to follow in order to perform these graphical encoding step. So you have two main steps here. The first one, is to identify explicitly, what the graphical components are. And the second one is to identify explicitly, what the mapping rules are. More precisely, the idea is to look at the visualization and ask yourself, What are the visual marks here? Similarly to what we have already done with some of the examples. So you look at visualization, you think, What are the visual marks? Do we have points? Do we have bars? Do we have lines? Do we have a mix of some of these marks? Okay. Once you identify the marks ask yourself, What kind of information, what data items do the marks represent? So going back from visual representation, to the visual world, graphical world, to the data world. Okay. Third step, identify the visual channels. So is this visualization using position? Is it using color? Is it using size? Like the length of something or the area of something and so on. Once you identify the channels that are used in the visualization ask yourself, What do these channels represent? What kind of information do they represent. More precisely, using the language that you've learned in the data obstruction module. What attributes do these channels represent. So you're basically retrofitting or reverse engineer. The mapping that exist in this visualization. The same thing can be done for tabular and network data. There is a little difference when you're visualization is a visualization of a network data set. The slight, the little difference is that when you identify, when you go from marks to the actual data objects that are connected to these marks, you can have two types of objects. As we have learned before. Is not only data items, but you can have nodes and links. This is important because typically, in network visualizations, you have one type of mark that represents the nodes and another type of mark that represents the links. It's not always true. It's not entirely true. But in many situations, this is true. So keep in mind the procedure is slightly different when you have a network data set. The visualization of a network data set. You can have multiple marks. One set of marks to represent the nodes and one set of marks to represent the links. So let me start with one example, and then I want you to go through a couple of other examples that I'm going to assign to you as exercises. So this is a first example of me performing graphical decoding and then I'm going to ask you to do exactly the same for a couple of additional examples. Let's start with an easy one. This is a visualization coming from New York Times. As you may have noticed, we use New York Times quite a lot in the course. They are famous for producing very engaging and very well crafted visualizations. In this case, this visualization here, is showing medalist and in the last 115 years of the Olympic sprinters. And in particular, this is comparing the performance of Usain Bolt to all the other sprinters in previous years. Okay. So what do we have here? We have as you can see a number of points and these points are positioned in a sort of scatter plot. On the x-axis, we have the distance from Usain Bolt and on the y-axis, we have years, time. It's a little unusual design, but it works particularly well in this case. So how do we decode these scatter plot? The first step is to identify the marks. What are the marks here? We have points. Okay? We have lots of points. So what kind of data item or object does every point represent? So normally, when I ask these in a classroom, the students say, the point represents a runner. Okay. Not necessarily because these are medals and this means that in principle, you can have multiple runners if they won multiple medals. Okay? So this gives you a sense of the fact that it's not always obvious what is the association between the mark and the data item. Keep this in mind. Okay. Next step, identify the visual channels. So here we have three main visual channels. The first one is x position. The second one is y position, and the third one is color. Okay. So now last step, identify what data attributes are encoded with this channels. Okay. So the x position encodes distance from Bolt. The y-axis represents time. The vertical position represents time. And color, we have three different colors, represent the type of medal. So that's how it looks like. That's a particularly easy example. Not necessarily easy in terms of identifying what the association between visual mark and data item is as we have seen and now I want you to perform exactly the same procedure with some additional visualizations taken actually from real-world projects. So let me remind you what the steps are. The first step is to identify the marks. The second step is to identify what data items the marks represent. The third step, is to identify the visual channels used in the visualization and the last step is to identify what the attributes are represented by the channels that you have identified.
