Data visualization critique and redesign (Dear data)

Last year we have practiced visualizing data and using dear data method and sending it to one of our pears then each of us had to look over the one they have received, trying to analyze it and if needed propose changes in the or redesign the visual based on the data visualization principals. This article is my take on the one I got and analyzed it proposing some changes based on the data itself.

I wanted to tank the sender 96 for sharing the weekly data around election using a dear data. What can be seen is that there are moods, reasons behind moods, the results of the election in that day (who had more votes), the time of the day and the day the feeling happened.

What marks/channels are used? What type of visual encoding is used?

Mark as items/Nodes: Points

Channels: Position (both), color hue, shape

Why do you like / dislike this visualization?

The design is leveraging different channels to show the data. I specially like the part on the right that shows who had more votes in that day, which was interesting to me, I wished it was bigger since in the beginning I did not even notice it.

Looking at it I wished different shapes or texture were used instead of color hue when moods were shown, since two colors are very similar, seen on top and looking at the black and white version it is clear that color luminance is not taken into account.

The time of the day is clear and did not need colors and explanation in the back of the card the same for days (redundant=> low ink ration).

I do not know what the envelops and the other shape in the background stands for and it is not explained much in the back of the card so it could be removed if it is not needed.

Overall color hue is overused, not making pop-out effect, and could have been replaced using another channel (suited for categorical data like shape, texture, ...) or add color luminance to show different factors. Also not explaining or coloring the time could have saved space for explaining what things in the background stand for or add other details.

Can you suggest any additional design ideas or data that would have been neat to link?

- There are 6 moods mentioned in the dear data to make pop-out I have used textures to show different moods, shown in the legend on top, that go from negative to positive (tense, gloomy, neutral, humored, hopeful, and cheerful).

- Moreover since the reasons behind the feelings are divided into 5 part, each 25%, I though going for a pentagon instead of a circle would enable me to put them on the outline of it using both color's hue and luminance so that even if the audience is color blind it would be clear. Another benefit of a pentagon is that the top of it aims to the time it happened while with circles it is harder to find the exact time it happened.

- T in the legend is a short form for tweet and the colors red and blue show two side of the election red for Trump while blue is for Biden.

- R stands for results while P stands for predictions, two other reasons behind the moods.

- To make sure after going all black and white the lines still could be understandable, I have played both with line wight (tick for Biden and slim for Trump) and texture (Marker for R and P, Pencil for T). Color luminance is also checked so that one or two colors do not have the same level of luminance.

- Extra explanations are omitted like showing days and times separately and explaining them. Instead there is a guide showing that time is horizontal while days are vertical.

- Overall, the data is shown, all extras all eliminated, it is simple yet informative (ink ratio is high)

Looking at the new design I can tell that overall, the sender (96) was mostly affected by the results and lest effected by the results and least effected by Biden's tweets. Also, the sender's (96) mood was mostly neutral and rarely cheerful regarding the election. Finally, as the days went by the votes were mostly in Biden's favor. The sender's (96) feelings were mostly occurred around noon or in the evening which could show that the sender (96) had time to check the news during those times.

Would you change the colors? And if so, how would you improve them?

As I have mentioned I would have minimized the use of hue and when color is used would consider luminance to make sure it has a pop-out effect and can be understood even if the audience is color blind.

What type of color map (divergent, rainbow, ...) is most appropriate?

The best way to understand if a color mapping is effective is to convert it to black and white and if the picture looks similar to its original form or conveys the data needed to be shown it is effective otherwise it is not. As can be seen in the picture of Lincoln the higher the luminance difference the better it looks after changing it to black and white hence a better color mapping.

The same can be seen below and the rainbow color mapping are not performing well in showing the data due to many factors. The first is that they are not considering color luminance and the second is that people do not automatically put the colors in order. Moreover, the perceptual rate of change of the colors is not the same throughout the entire color range. It is said that the divergent color mapping is the new rainbow mapping, going from cold color to hot, which raises the same problem since the luminance is not considered but at lease the order is clear and the perceptual rate of both colors are the same.

We humans naturally assume if the color is pail it means it is not strong or is related to a low quantity and if it is dark it means it is strong or is related to a high quantity so divergent color mapping could be self explanatory if the color luminance is considered like using dark blue going to moderate yellow or just using one color going to white, losing its darkness along the way.

Looking at the diverse types of color mapping shown below, the color mappings in green are more effective while the ones in pink are less effective.

More resources:

Course material for session 7, 8 and 9

https://www.kennethmoreland.com/color-maps/

https://tomroelandts.com/articles/the-diverging-color-map-is-the-new-rainbow-color-map