• Assignment 3 due tonight
• Were videos helpful?
• Questions
• Design Principles, color, edges

• Mechanics: how do I build a visualization?
  • Javascript, CSS, HTML, d3
• Principles: why should I build it in this way?
  • data and perceptual arguments
• Techniques: what do I use to turn principles and mechanics in an actual visualization?
  • algorithms, software libraries

Honesty + Good Judgment

Healy, K. (2018). Data visualization: a practical introduction. Princeton University Press.

Good aesthetics (as opposed to bad taste) is hard to operationalize, but here are some general guidelines (that might be broken at times):

• Maximize data-to-ink ratio
• Clean up typefaces (the fewer different typefaces, the better)
• Avoid extraneous colors and backgrounds
• Simplify, mute, or delete gridlines
• Remove superfluous axis marks and labels
• Avoid excessive decorative embellishments

You want to ensure that your visualizations are beautiful, easy to read and interpret, and memorable (i.e., visually distinctive) – these goals might conflict with each other at times and only practice will tell you how to balance all of these elements.

General issues to avoid:

• Bad data: work with good quality data, and do your homework in terms of data checking and transforming
• Tricky scales: when providing comparisons, make sure you are as transparent about your scales as possible. The easiest way is to be honest is to keep the same scale across different panels and/or plots and keep the full scale of the original data
• Perceptual issues: some visualizations are are more difficult than others. For example, due to human perception, 3D plots are often harder to read and interpret. Stacked bars make general trends easier to read, but differences between subcategories are harder to interpret.

Discuss with a partner: What principles does this violate?

Discuss with a partner: What principles does this violate?

Discuss with a partner: What principles is this respecting?

Our visual system (i.e., all the visual processing models from our eyes to our brain) re-constructs what we are looking at and it uses relative differences instead of absolute values for brightness and colors.

Relativization of brightness can be demonstrated in the Herman grid effect, in which we perceive darker blobs where grid lines meet at the edge of our visual field.

Write D3 code to draw a 4 x 4 grid of rectangles

• 400 by 400 canvas
• height and width of 90 for each rectangle

• At the very center of the visual field, we see the lines as they are (just white)
• The center is where our vision is really good, and our ability to distinguish details decreases at the edges of our visual field (Ware, 2008)
• Visual illusions are side effects of our visual system processing

Ware, C. (2008). Visual Thinking: For Design (Series in Interactive Technologies). Morgan Kaufmann Publishers.

Download the code for the herman grid solution

Another side effect of our visual system processing is perceiving the same shade as lighter or darker depending on the background behind shade.

Write D3 code to draw a 2 x 2 grid of rectangles

• 400 by 400 canvas
• height and width of 200 for 4 big rectangles
• height and width of 100 for 4 small rectangles centered in each big rectangle
• color of small rectangles: #777777
• color of big rectangles: #252525, #555555, #959595, #B5B5B5

Things to keep in mind regarding edges, colors, and contrasts:

• Our visual system is not a physical light meter, what we perceive is different from actual values for colors and brightness
• Humans are better at seeing edge contrasts for monochrome images
• We are also better at distinguishing dark shades (compared to light shades)

Download the previous challenge solution

Quiz: What are the primary colors?

1. red, green, blue
2. red, yellow, blue
3. orange, green, violet
4. cyan, magenta, yellow

Quiz: What are the primary colors

1. red, green, blue
2. red, yellow, blue
3. orange, green, violet
4. cyan, magenta, yellow
5. all of the above

“Color” refers to three components:

• Hue refers to the dominant wavelength of the color (e.g., red, blue, purple)
• Saturation refers to how intense of vivid the color is
• Luminance refers how bright a color is

Ways to represent color in HTML:

.attr("fill", "red") // name 

.attr("fill", "#FF0000") // #RRGGBB
  
.attr("fill", "rgb(255,0,0)") // rgb(R,G,B)
.attr("fill", "rgb(100%,0%,0%)") // rgb(R%,G%,B%)
.attr("fill", "rgba(100%,0%,0%,0.5)") // works with both int and %

.attr("fill", "hsl(0,100%,50%)") // hsl(H,S%,L%)
.attr("fill", "hsla(0,100%,50%,0.5)") // hsla(H,S%,L%,a)

Download sample code and make changes to it

You can use online color pickers for color help.

• color schemes need to represent accurately differences in our data
• changes from one level to next need to be perceive as having the same magnitude
• be careful when picking colors for variables (consider type: categorical, continuous, etc.)
• take into account people who are color-blind, and how they perceive colors

Here are some points to consider:

• Gradients should be used as sequential scales from low to high to represent numeric continuous/ordered variables (e.g., population size). Light colors should represent low values, and dark colors high values.
• Diverging scales should be used where there is a neutral midpoint and then there is variance in ether direction from that neutral point (e.g., temperatures can be positive and negative).
• Qualitative palettes where each color has the same valence (i.e., no color dominates the other) should be used for unordered categorical variables (e.g., political parties, countries). Different colors in the palette should not imply differences in magnitude.

Let’s look at the following arrays of colors:

d3.schemeCategory10;
d3.schemeAccent;
d3.schemeBrBG[6];

For continuous colors schemes (with values between 0 and 1):

d3.interpolateBrBG(0);
d3.interpolateBrBG(0.5);

See more color schemes for D3

Download sample code