Visualizing Movie Data | VMD_06 | Films by flags

The idea is very simple. From which countries did we see films during 2015? Represent the number of movies with the flags of those countries.

The size in which I work is 1000 x 1000 pixels. There are exactly 50 countries who have made films. And the largest score of 69 films is achieved by the USA. Looking at the display size, in width, I have 1000 : 50 = 20 pixels available. In the height I have 1000 : 69 = 14 pixels available. One flag has a size of 20 x 14 pixels. That is very small. I have made a Processing test-file. The first column is made up of svg-files which are reduced in Processing. Processing or Adobe Illustrator are doing crazy things with this flag-file. The stars of the American flag are randomly placed outside the boundaries of the flag. But because the flag is reduced you cannot see the stars, and the errors, anymore. The second column is a png-file which blurs the stars and lines rather randomly together. The third column is a bmp-file. Manually corrected in Adobe Photoshop. The fourth column is the same bmp-file but now it has a black line between each separate flag. I choose the latter. Although it’s a lot of manual editing work.
VMD_06.01

The next step I’m going to make is to find the positions of the flags. There, too, I’m going to use the American flag. It’s just a placeholder. I need to make a minor adjustment to the image file. When the flags are 20 pixels in width I must sacrifice one pixel in width for a black line. Otherwise, the flags will visually not be separated from each other. And if you look at this example, you will see that it’s not a good visualization. We are dealing with very big differences in the rather small data set. The minimum score is 1 and the largest score is 69. In addition, the flags are not looking good. And I have no space to add extra information such as headers, country names or scores.
VMD_06.02

I have to solve this differently. Let’s start all over again. I have 50 films. That are two rows of 25 flags. Or two columns of 25 flags. Or 10 rows of five columns with flags. That seems most appropriate. Flags are usually wider than tall. And that would eventually produce a square. I pick a random image of a flag. In this case its the United Kingdom’s flag. Five flags in width and ten in height.
VMD_06.03

I also need margins on all four sides of the display window. I take 100 pixels margin. This produces flag sizes of 160 x 80 pixels. And that results in an exact square of 800 x 800 pixels.
VMD_06.04

How can you visualize the number of films that we saw in 2015 using these flags? One possibility is Processing’s tint function. But because this tint function does not work the way I want it to work, I go for a black rectangle with a little transparency. All flags are 160 pixels wide. A 100% score is 69 films seen (the American ones). The width of a flag 160 divided by the score 69 = 2.3. Thus the multiplication factor is 2.3. for all the scores. Bringing this into practice that is visually extremely disappointing. Although it represents the exact data.
VMD_06.05

The disadvantage of this representation is that the differences are too far apart from each-other. I would like to keep these differences but the relationship needs to be adjusted. I think I need to use Processing’s map function. It re-maps a number from one range to another which provides a more interesting image.
VMD_06.06

I have the map function applied excessively. Otherwise, the countries from which we have seen only one film stay almost invisible. Furthermore, I found little refinement in the image. I solved that with a small transparent black gradient. Finally, I have rotated the total image 90 degrees. This gives a better picture because it seems that the light comes from above. Which is much more natural. And why not? Flags on their side remain equally recognizable.
VMD_06.07

Advertisements

Comments? Leave a reply.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s