Using color effectively

One of the biggest choices you'll make when building data visualizations is choosing which colors to use to represent what. While it's certainly possible to convey a lot of information through purely monochromatic charts, using the wide range of color representable through a digital display can be a very effective way of depicting another dimension of the data you're visualizing.

If you plan to use color to communicate information, there are a few things to consider. The first is whether a user will be able to discern the pattern necessary to understand what the colors mean. If you have a legend explaining what color corresponds to what, try turning it off and thinking about whether you're still able to understand what the color combination means. Is it intending to show increasing intensity, diverging values, or just that it has a particular quality (in which case, you'll definitely need a legend)?

Secondly, pay some attention to people who are colorblind. The most common color combination to use for choropleth maps is generally the stop-light color scheme: green for low values, yellow for medium values, red for high values (or the inverse, depending on whether a high value is a good thing or not). There's a problem with this, though; for people who are red-green colorblind, the highest and lowest values look nearly identical.

Also, while still on the topic of stoplight colors, when discussing sensitive topics such as immigration, a fair degree of care should be taken when color-coding anything green or red -- if red means bad or severe, is it actually that way? Or is it displaying red merely because the color scale has been constrained to the values in the dataset? Colors are very emotive, and it's easy to unintentionally present an opinion when using them. In general, using a sequential color scheme (scaled to the average of what one would expect that value to be) is a much safer bet.

A very good way of finding a color scheme for a map (and quite a lot else) is using ColorBrewer (http://colorbrewer2.org), a tool built by Cynthia Brewer and Mark Harrower at Penn State. It provides a bunch of different prebuilt color schemes for representing data, and you can choose the type of relationship you want to depict. Additionally, it helpfully allows filtering out color schemes that aren't colorblind-friendly, or even printer and photocopier-friendly:

You can use ColorBrewer schemes directly in D3! The scale in d3-color, d3.schemeCategory20c, contains the colors it uses.
An easier way to use these is via the colorbrewer package:
$ npm install colorbrewer --save
Then, require('colorbrewer') as normal. For the preceding 7-Class BuGn scale (look next to the export pane for the scheme's name in the Colorbrewer2 UI), you'd write:
import BuGn from 'colorbrewer';
const sevenColorBlueGreen = BuGn[7];

Lastly, listen to natural cues from your data; if you're doing a visualization of political parties, it makes sense to color-code the data at least somewhat similar to the party colors (as boring as it is to always color-code political data to party colors, the novelty of not doing it this way is easily outweighed by the cognitive dissonance it causes).

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset