Guidelines
Suggest edit

Use position instead of area to encode quantitative values

For exact value reading in static charts with quantitative data, prefer position encoding on a chosen chart to improve fidelity and mitigate misread magnitudes for readers comparing numeric values.

  • purpose:refine
  • basis:empirical
  • data:quantitative
  • quality:fidelity
  • lever:encoding
  • reading-mode:exact
  • channel:position:use
  • channel:area:avoid

advice

Position encoding for the main numeric field

Encode the main quantitative field with x or y position instead of area when accurate numeric reading matters. For example, place the value on an axis rather than sizing points or bubbles by that same value.

reason

Why position works better than area here

Position on an axis gives readers a more accurate perceptual readout of numeric magnitude than judging marked area. Moving the main value to position reduces reliance on a weaker magnitude judgment.

Mechanism: Position supports more accurate quantitative interpretation than area for the same field.

Evidence: The collated knowledge records Mackinlay’s quantitative effectiveness ranking as positionX = positionY > length > angle > orientation > area > color-saturation > color-hue, so position is the stronger encoding choice over area for quantitative data (Zeng & Battle, 2023; Mackinlay, 1986).

Notes: PositionX and positionY are tied in the recorded ranking.

context

Use when quantitative accuracy is the goal

  • User Goal: Read or compare numeric values accurately.
  • Data: One quantitative field is being assigned to a visual channel.
  • Chart Setting: A static 2D chart is being designed, and the same field could be mapped to either position or area.
  • Success Criterion: The value can be interpreted more accurately from the graphic itself.

exceptions

Do not use when the field is not quantitative

Break it when: The field is ordinal or categorical rather than quantitative. Why: This ranking is explicitly recorded for quantitative encodings.

costs

Costs of moving the field to position

Sacrifice: Position uses an axis slot. Risk: Forcing every field onto position can crowd out more important information in a multivariate design. Mitigation: Keep the most important field on position and move a less important field to a lower-ranked channel.

mistakes

Common failure around this choice

Mistake: Keep the main quantitative field on area-sized marks when an axis position mapping is available. Why it fails: It leaves readers judging area instead of the higher-ranked position task.

check

Check the encoding decision directly

Failure Sign: Readers must compare bubble sizes or other areas to answer numeric questions. Quick Check: Redraw the same field on x or y position and see whether the reading no longer depends on size judgments. Stronger Test: If the positioned version expresses the same field, keep the position mapping and remove area from the main quantitative field.

fix

Fix the channel assignment

  • Move the quantitative field to x or y position.
  • Replace variable-sized marks with equal-sized marks when area no longer carries the main value.
  • If another field still needs encoding, assign the less important field to area instead of the main quantitative field.

References

Mackinlay, J. (1986). Automating the design of graphical presentations of relational information. ACM Transactions on Graphics, 5(2), 110–141. https://doi.org/10.1145/22949.22950
Zeng, Z., & Battle, L. (2023). A Review and Collation of Graphical Perception Knowledge for Visualization Recommendation. Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems, 1–16. https://doi.org/10.1145/3544548.3581349