Join Bill Shander for an in-depth discussion in this video Position, size, color, contrast, and shape, part of Learning Data Visualization.
There's a great article in Scientific American called The Data-Visulaization Revolution, and it had a really great quote that I want to read to you. The new graphic designer no longer creates visualizations by choosing a rigid collection of shapes, positions and colour, but rather by choosing the rules needed for data to breathe form. Into geometric abstractions. I love that quote, because I really think that that's so accurate, there really only a few ways to show differentiation between objects on a page or a screen there are a million ways to execute it.
But, there is a very simple list of the number of ways, that you can really show this differentiation, when it comes down to these five things, position, size, colour, contrast and shape. But, allow what this code is saying that it's not about designing something, which you know may be a little bit disappointing to hear for the designers are most of our members. But, it's really more about creating these rules. As this says, it's about creating the rules to allow those five things to take shape and, as it says here, to breathe form into geometric abstractions from data. I just love that quote.
So, you're trying to share information. Right? You're trying to share knowledge with your audience based on data. And usually what's interesting in that data, is where it varies, so this chart is a valid chart right? This is what the data looks like. We have a scatter plot here and we have things along the x axis, and the y axis. But, if all charts looked like this, then this would not be a very interesting field to be in. Usually charts look something like this, or this, or this.
What's interesting of course are the outliers, and the trends that you can see in this charts. So as I said, there are really five ways that you can show differentiation. Position, size, color, contrast and shape. These are in fact I think really the only five ways. I think probably I could find someone that could argue with me on that, but this is really what it comes down to. So, we're going to walk through the list, and we're going to start off with position. Position in this case as the quote said at the beginning, the rules are going to dictate the position of the objects on that screen. So, here we have an x and y on a chart, we have a scatter plot, so our dots are going to be arranged based on their data right? Their position can't be changed, it is driven by the data.
That's what puts the dots in their place. In an infographic, which is different from a chart, of course, you can decide where you place things, right? So, here we have five objects, I'm just drawing attention to the top two, and by putting things at the top of the page, I am drawing emphasis, I am pointing your eye towards them. So, I'm creating the emphasis by the position, manually. If want to draw the eye to the center of the page of course I emphasize the center of the page and put something there. I can also make you start in the left and force a linear progression, by the way I place things and draw your eye to things on an infographic.
Of course this will be helpful in a left to right reading culture like English speakers but maybe not as helpful for Arabic or Hebrew or some of the other right to left languages. Size of course, can also be data driven. The third variable in a scatter plot. So, you have a x and you have a y and now you have a z, which makes the size of the dots change based on the some variable. So data, of course, will change the size of your objects in a chart like this, if you wanted to. Or you might use size to manually highlight things even in a chart.
So in this case we have a scatter plot, where it's clear that size is not a data driven element. But, if I wanted to I could manually change a dot, label it, put a and draw attention to it in that way. If you're going to do this of course you want to be careful and make sure you add a legend at the bottom that says, size means nothing. I'm manually drawing attention to this data, so it's not confusing to user. So that they think size is And of course, in an size can be used strategically in the same way, where you can really create a focal point and draw the ID something just by manually changing the size of the objects.
Colour is a very powerful tool in visualization as well. But, it can be challenging. Select size and position. It can be used to draw the eye for emphasis, whether it's in an info graphic or in a chart. So, here in this chart, of course, colour, you could say is a fourth variable. Right? So, we have x and y. We have z the size which is the third variable. And here we have colour, maybe representing a category so that's a fourth variable if you're introduced to our data here using colour. But, one of the main challenges with colours, and the use of colour in visualizations is colour-blindness.
So, this graphic actually shows you on the left hand side you see a rainbow pattern, and on the right hand side, you actually see simulation of how that exact rainbow pattern on the left is perceived. By people with different types of color blindness. And what you may not be aware of is that up to 10% of people, are colour blind. We're not talking about a tiny fraction of your audience. We're talking about a very significant portion of your audience. Now the most common type of colour blindness is what's called Red Green Colour Blindness. And so, these are people who have difficulty distinguishing between red and green colours.
And if you think about every stock chart you've ever seen that emphasized red and green for up and down, you get a sense of how often it's ignored, the issue of colour blindness. So, keep this in mind. Now, keeping it in mind is one thing, but solving for colour blindness is another. And, luckily, there are some really great resources to do so. So, one of them is something called ColourBrewer, which will actually go in and find different. Colour pallets which are colour blind sensitive, so I can click on this little check box here that says, only show colour blinds safe colour pallets and there are other options as well, as you can see.
I can click here and get multi hue pallets, right? Or I can get single hue pallets, just so I have a shades of colours. I can diverging color pallets. There is a lot of different things you can do on this site. And define colour palette that are colour blind friendly, really cool tool. At the same time let's say you have a brands that you need to adhere to, there is this website called colorblindness.com. And here you can actually upload an image of a visualization that you've created, and once you uploaded it, it'll actually convert it and show you what it would look like for people with different types of colour blindness.
Again, a really great tool for testing to make sure that your image is going to be colour blind friendly. Another great way to emphasize things is contrast. So, here we have what's called a Choropleth Map. And we're going to talk more about that in the movie called The Right Paradigm, Maps. But, the basic idea here, you've seen this a million times in Political Maps, is that you have red and blue to indicate republican and democrat for voting patterns of course and we have contrast right the opacity of the colour.
To indicate how strongly, in this case one county voted one way versus another county. So the use of contrast, is a really great way to show differentiations in data. You can also use it manually. So here, we have a data driven Chloropleth where each county's voting pattern was displayed based on contrast. But you could also do it manually, right? Say we wanted to draw attention to one county. We could grey out, sort of fade back, all the counties but one. Make that one really pop with a dense colour. And so we're using contrast to manually highlight something, as well as in data driven ways, like this Map.
Another one of the advantages to contrast. And thinking carefully about contrast, especially in interactive visualization. Is, you can use it strategically when you have lots of data. So, this is a visualization that I created, looking at every season, of every NHL team, to get a sense of who was the best and worst hockey team based on a certain criteria, which I will explain in another movie. But, it can be hard to see what you're looking at here, because we have 1200 dots on this chart. And they're all overlapping. So of course, by making them translucent, like this one where you can see in isolation.
I can then see that there are patterns. Right where I see dark white colour, I can immediately understand that that means that there's a lot of dots over here. And so it makes it a lot easier to see some of the outliers, sitting around on the outside of the chart. Makes it much easier to see trends in your data. So, we're on to what's my least favorite way to distinguish trends in data. But keep in mind the science actually shows that it's more reliable than colour, for instance. Doesn't look as good and it can be a little bit confusing visually, so you have to be careful using shape, but it is a very powerful tool.
Here is a good example, where the shapes are noticeably different. If I really sort of scan this graphic I can see the squares, I can see the circles. But, if I am sort of taking a quick glance at this, I don't necessarily just immediately see the squares and immediately see the circles and immediately see the patterns in the data and the differences between the two. But, if you combine colour and contrast adjustments and, or these shapes, then it can make a huge difference. Right? Now of course I can see. The green squares as opposed to the gray circles.
In this case I might want to upload this to that colorblindness.com website to make sure that the green pops against the gray for even different types of colour blindness. But, now I've really helped probably various different audiences be able to see these two different types of data points more easily. So, there really are five key techniques to show variance in data. I definitely recommend that you experiment to find what works for your audience. Mix and match, find the rules that you can use over, and over, and over again. And like I quoted at the beginning of the article, really think of them as rules.
These are rules. You're establishing your rules for how to use these elements, to bring your data to life visually for your audience. And what you do, what rules you create, actually could end up being your calling card. Your sort of fingerprint, your visualization brand, look, and feel, as well as a great differentiator for your data.
- Channeling your audience
- Understanding your data
- Determining the information hierarchy
- Sketching and wireframing your ideas
- Defining your narrative
- Using typography, color, contrast, and shape to convey meaning
- Making your visualization interactive