When shown an image, there are some visual properties that we can detect effortlessly and almost instantaneously - they "pop out."

These are called preattentive attributes.

Knowing which attributes are preattentive can help in creating more effective visualizations.

Below are some interactive visualizations demonstrating some of these attributes - some "pop out" more than the others. They were all created with d3.js. These examples are primarily based on those in C.G. Healey's Perception in Visualization, C. Ware's book Visual Thinking: for Design, and S. Few's Tapping the Power of Visual Perception. Some of them are what seem to be preattentive, but this is my own subjective assessment - these have "subjective" in the subtitle.

In the examples below, links are provided to the source(s) that inspired or served as the source for the general design for the example. The routine to generate the star shapes with svg is from this blog post by Larry Spencer.

On larger screens, there is a navigation area on the right side of the screen to help move between the different examples.

Browser Note: It's been reported that there seem to be rendering/hanging issues with FireFox on Windows 8.1. Please let me know if you see oddities. It works fine for me on Chrome, Firefox, and Safari on a Mac, and on iPad and iPhone.