Skip to content

Overlay Type Comparison

Run the Overlay Type Comparison Fullscreen

Sample iframe reference

1
2
3
4
<iframe
   src="https://dmccreary.github.io/infographics/sims/overlay-type-comparison/main.html"
   width="100%" height="580" scrolling="no">
</iframe>

About This MicroSim

This MicroSim shows the same microscope diagram rendered with all four overlay types simultaneously in a 2x2 grid. Hover over regions in each panel to see how each type handles interaction. Click a panel to select it and read its strengths, weaknesses, and best use cases in the info panel below.

Lesson Plan

Learning Objective

Assess which overlay type is most appropriate for a given image by viewing the same diagram rendered with all four overlay types side-by-side and evaluating the trade-offs in clarity, precision, and readability.

Activities

  1. Hover over regions in each panel and compare the interaction feedback.
  2. Click each panel and read its description. Which type provides the best balance of precision and clarity for this microscope diagram?
  3. Discuss: how would your overlay type choice change for a map? A flowchart? A photograph?

References