Creating Good Graphics

Grammar of Graphics Review

Three raincloud plots show the distribution of bill lengths of 3 species of penguins.

Plot source

How do we describe this plot using the grammar?

  • X mapping: bill length
  • Y mapping: species
  • color mapping: species
  • geoms: Density, Dotplot
  • stats: Density, Dotplot
  • position: dodge?
  • coordinate system: Cartesian

Grammar of Graphics Review

The image is a multicolored line graph illustrating changes in the average number of COVID-19 deaths per day over time in various countries. The x-axis represents the increase or decrease in deaths per day, while the y-axis shows the average number of deaths per day. Curving lines in different colors represent the death trends from eight countries: USA (dark blue), France (light blue), Spain (yellow), Italy (red), UK (green), England and Wales (orange), China (purple), and Germany (light red). Notable dates and events such as lockdowns and other measures are marked along these lines, indicating changes in trends from March to April 2020. Annotations with specific dates are provided, such as "3-Apr", indicating notable shifts or inflection points in the trend lines.

Plot source

How do we describe this plot using the grammar?

  • X mapping: \(\Delta\) Deaths/day
  • Y mapping: Avg Deaths/day
  • color mapping: Country
  • label mapping: Date
  • geoms: Path, Text
  • coordinate system: Cartesian

Alt Text and Accessibility

The original alt text for the plot on StackOverflow was “The Rainbow Tornado”.

  • Does this help visually impaired users?

  • What would be a better description?

  • If you were visually impaired or hearing someone describe this chart, what would you want as a description?

Alt Text and Accessibility

Best Practice:

  • Provide a 1-2 sentence alt-text AND a link to a longer description
  • Longer description should contain:
    • the data source,
    • a tabular representation of the data, and
    • 1-2 paragraphs of description for the chart

This is hard to do well (or integrate into the page).

Alt Text and Accessibility

Good (but not best) Practice:

  • Provide a caption
    • with the data source and
    • link to a data table if it’s easily available
  • Provide several sentences of alt text

Image Accessibility Checker - AI image captions

  • Not perfect but decent
  • Manually check before using

Gestalt Principles of Grouping

The image illustrates the word "GESTALT" using various visual design concepts. Each letter is creatively manipulated to demonstrate principles of Gestalt psychology. The "G" uses partial shapes to suggest closure. The "E" consists of small squares to depict proximity. The "S" shows continuation with lines extending from its curves. The "T" and "A" demonstrate similarity with vertical stripes, while the "A" also features a tree-like shape within its form to illustrate figure and ground. The "L" and final "T" continue the use of vertical lines consistent with similarity.

Gestalt: Closure

Kanizsa Triangle Illusion. Most people see an upright white triangle occluding three black circles at the vertices and a second inverted triangle with a black outline.

Don’t trust Alt Text generators all the time!

The image features a simplistic black silhouette of a five-pointed star. The star is symmetrical, with each point extending outward evenly from a central focal point. Its sharp angles and straight lines create a clean and balanced geometric design. The background is entirely white, providing a stark contrast that highlights the star’s dark outline.

Umm…

Gestalt: Closure

Three circles at the vertices of an upright equilateral triangle, with an upside down orange equilateral triangle and then a blue upright equilateral triangle.

Three pac-man shapes (circles with a 60 degree section missing) with three 60 degree acute angles interspersed.

Gestalt: Good Continuation

A sin curve from 0 to 4*pi, with a corresponding line at y=0 over the same domain.

Gestalt: Good Continuation

A sin curve from 0 to 4*pi, with a corresponding line at y=0 over the same domain. From 0 to pi, both lines are colored red and are solid, from pi to 2*pi, the lines are dashed and yellow, from 2*pi to 3*pi, the lines are green with longer dashes, and from 3*pi to 4*pi, the lines are blue with even longer dashes. The addition of color and linetype combine to make the plot seem to be composed of four half-ellipsoid shapes, rather than two continuous lines.

A sine curve from 0 to 4*pi, with a corresponding line at y=0 over the same domain. The sinusoidal line is colored red and solid, while the line at y=0 is dashed and blue. The addition of color and linetype combine to make it clear that the plot is composed of two continuous lines that happen to intersect, illustrating the Gestalt principle of closure.

Gestalt: Proximity

Gestalt: Proximity

Gestalt: Similarity

Applying Gestalt

A set of 12 small multiple charts showing changes in house proices between 1890 and 2020 in cities. All cities have price increases but increases in Philadelphia, Baltimore, Charleston, and Washington DC are much larger than cities in the south or midwest.

Source