| (window.webpackJsonp=window.webpackJsonp||[]).push([[36],{330:function(e,t,o){"use strict";o.r(t),t.default='# Leveraging Color to Enhance Data Visualization\n\nIn all the visual pathways in the data visualization, color is the first-way visual perception. Doing visual encoding and communication is an effective way. If used properly, color can sufficiently improve the visualization. In the following, we will look at some specific ideas to improve the visualization.\n\n## Sympathetic Response of Color\n\nColor perception is a complicated result of the interaction between physiological and psychological effects. To prove that humans can perceive colors by warm and cool, Hiroshi Ohchi, a Japanese graphic designer has done an experiment to paint the wall of two workplaces in gray-cyan and red-orange. With the same objective ambient temperature and labor intensity, staffs in the gray-cyan workplace are easier to feel cool. Further research found that except for the feeling of warm and cool by observing colors, there are also light and dark, far and near, lively and melancholic. Colors will cause emotional fluctuations that affect human behavior based on human instinct.\n\nIn the field of visualization, if we choose the color that coincides with the characteristic of data and the sympathetic response of emotions.\n\nHere is an example of the selling percentage of a certain dessert shop.\n\n<img max-width="830" width="50%" height="100%"\nsrc="images/design/color/color01.png">\n</img>\n\nWe provided two charts with the same style but different color schemes. The right side one obviously performs better for the dessert data displaying.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/color/color02.png">\n</img>\n\nCompared with blue and purple, color likes orange, yellow, pink and green are preferred choices to inspire the appetite, happiness and warmness which matched the motion of eating sweets. In the other hand, most of the customer group for desserts is woman and children. Lively and cute chart colors in the left chart might be the better choice compared with the calm and rational colors of the chart.\n\n##Semantic Response of Color\n\nDifferent colors can help us to identify and classify different ideas because we are familiar with combining things and concepts with colors. We subconsciously think of white when we referring to "clouds", pink when we referring to "love". Those colors that are naturally consistent with semantics are called "semantic-resonant color".\n\nThe researchers noticed that matching the semantic-resonant color for words contained specific color can increase the speed of the cognitive process and vice versa. This funny phenomenon is called the "Stroop Effect". In a comparative test (as shown below), the text "YELLOW" in the first line is easier to be positioned compared with the text "YELLOW" in the second line. In the second line, the text "PURPLE" have the font color of yellow, which makes it being noticed earlier sometimes. The font color here interfered with our speed of finding the right answer.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/color/color03.png">\n</img>\n\nUsing semantic-resonant color effectively, we use the same color as the meaning of the data to improve the cognition efficiency of the visualization. For instance, you might use blue to display the data of "OCEAN", yellow to display the data of "DESERT".\n\nThe visual effects should be explained as easily as possible. Try to find out the color scheme that matches the preconceived and cultural association of the user. The following chart shows the sales info of kiwifruit, banana, orange and strawberry and chose the same color as the fruit itself. Therefore, we can easily identify and remember the fruit corresponding to each column.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW">\n</iframe>\n\n## Common Sense Consistency of Color\n\nIn terms of visualization, the color used is directly related to factors such as data type, display environment, target client, and social background. You cannot separate color as an individual factor to design. Please restrain your free creative passion before selecting the color scheme and check if it is a special type of data. For example, colors like green and red in a stock chart have their customary meaning. Therefore, the consistency between the choice of color and common knowledge makes the user understand and distinguish the chart efficiently.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG">\n</iframe>\n\nHere is another example of the outdoor temperature, the red and blue bars make the chart easy to distinguish without explanation.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1">\n</iframe>\n\n## Divide Data by Colors\n\nWe usually use the line chart to analyze the trend. We can actively configure an interval when sometimes we need to clearly know whether a specific data is in some domain. If you set 25%-75% as our planned sales, try to set different colors for each interval in this domain to efficiently identify the interval for each value: whether it is not reaching the goal, reaching the goal, or exceeding the goal.\n\nTherefore, color can be used as an effective tool to improve the readability of the chart.\n\n<img max-width="830" width="80%" height="100%"\nsrc="images/design/color/color04.png">\n</img>\n'}}]); |