Gestalt Laws Principles and Visualisation

Contents

Gestalt Laws Principles and Visualisation#

Gestalt Principles of Grouping#

"Gestalt" == pattern

The whole is other than the sum of the parts.

Kurt Koffka

Regular, orderly, symmetrical, simple Proximity Similarity Enclosure Closure Continuity Connection

What are they and why do they matter?#

Proximity#

plot_points(array1a, array2a)

../_images/383fa899c8be1021266d7fb20a712f309490c2913402301f3039d7d426597fc2.png

plot_points(array1b, array2b)

../_images/207d286fe12dfece2b61a2c1ca54014e365993616c7eb6d776aa2e338ae012ca.png

plot_points(array1a, array2a)

../_images/383fa899c8be1021266d7fb20a712f309490c2913402301f3039d7d426597fc2.png

plot_points(array1_groups, array2_groups)

../_images/078fbb3c12d0108e2d0587c749f154521d5d8aa89ddc6ea3d1e60f0ac64c671c.png

plot_scatter(x_scatter, y_scatter)

../_images/2f909a36a3d5cb1ea8600285e525c7fae100205184fc513f1e5b88115726b854.png

sales_plot(barplot=True)

../_images/bfa1e86326b9d9065e97d0194fde53142bc41a556d868ccb7ca16edbfbdf945c.png

sales_plot(barplot=False)

../_images/40fc8e46a5a6e77dbba8f996209449b10dc9d9892941821a9fd1c41c26f78742.png

Proximity
Things close to each other are grouped.

Similarity#

plot_points(array1a, array2a)

../_images/383fa899c8be1021266d7fb20a712f309490c2913402301f3039d7d426597fc2.png

plot_points(array1a, array2a, labels_a)

../_images/4e83d3c6808a93778fde517c99106d64437ff18134e53933a91d36c34637e288.png

plot_points(array1a, array2a, labels_a, squares=True)

../_images/ac8646a55efb2105a308bab3d83c0e27a424d6b18a9882dd973ff6a51a5a0c25.png

plot_scatter(x_scatter, y_scatter)

../_images/2f909a36a3d5cb1ea8600285e525c7fae100205184fc513f1e5b88115726b854.png

plot_scatter(x_scatter, y_scatter, labels=labels_a)

../_images/7b4a65af33832b84fdad58b764ad40c5e107b94b951bd08e737dc7548856c175.png

Similarity
Things that look similar are grouped.

Enclosure#

../_images/078fbb3c12d0108e2d0587c749f154521d5d8aa89ddc6ea3d1e60f0ac64c671c.png

../_images/eeb1c357ddc3c7bc0b334c8d912aeab1234ed8ac5832097d2160b294b50c2edf.png

../_images/c955357017a709408265bd59b61fe587045b50c1f342197acfcf0f067fe459a5.png

../_images/7b4a65af33832b84fdad58b764ad40c5e107b94b951bd08e737dc7548856c175.png

../_images/43fa5f4dc480cbbb5ca802493f251aa870619e29642764841d81bd9c4ece1aed.png

../_images/4ad262e981f9da73aaab61ab0f341c6716cd5f2483ddb958a32a1e2047da8274.png

../_images/7b4a65af33832b84fdad58b764ad40c5e107b94b951bd08e737dc7548856c175.png

Enclosure
Things with a boundary around them are grouped.

Closure#

../_images/a822df696e634dafb7c8275b19b9ab2363dea91fac69dc109d105fb18342ba39.png

../_images/65607ae209318c7716d1edeb6633a57570dcb296eba6fdb9c63a313a76904826.png

../_images/40209881b8f954653f14498a8d1f6e555a62b0d299c31a003c3f71303159a46d.png

Closure
We like seeing closed shapes.

Continuity#

../_images/0c8aeb0c8f776dac15d0b57998137b7fb9b58e4e536a9e328b0b5e6d15a7da4e.png

../_images/6cfddaae45645f58fabea236ef670f77854a4b1a193ca45cbc2c6b97f3ef4a31.png

../_images/20a490f87cbc80c3fd63873763c484758479aa41653a52794893aeb27659219a.png

../_images/9d0c0b78985a19efdad17b45d9c9fd76d164bef1620005828ef010ac6d198f7e.png

../_images/ba2ef9e1f6d245af108967c60dd57fbe676ee23716b6574cdf515c0e96bc5fee.png

Continuity
Objects are grouped if they’re aligned or form a continuation of one another.

Connection#

../_images/806673d54cadda19e64208b7423ab02bb0fe8806c6a21152fcf02faa796961b1.png

../_images/88d5597a4d853c872d4349c5c4d5ebc17f8817ece51cbc245462a7e0ab1f6dd6.png

../_images/826abcfaf121ce43fdae8849aa629aa279a9471a412f22a925d89af70792f947.png

../_images/5c5a68ab1a654d11f1a9c55cf1db49c3c2a2f109803050098ed722f7ff5823ff.png

../_images/b7227dd943fe9ca111809d07745cfb50785c907d79b06a71aea7423a890f4eb8.png

../_images/37087e109a49c2646201d2934e8f6717cfab71d46a0374fb49ddd0380ac1cea4.png

../_images/3ad8c5c1a6ee4fa24cf9fdb2396bdf1c990e2d76448f3bac7651ad132d16854b.png

../_images/3ea4576e3828b9d9435608a0ec0f47685d9b1dd374732811f42f60ce124c3d87.png

../_images/f8bc645ce26fa7ec34c5c8b44dc34dc649bfc744a4c93def84f22e293b8ac07e.png

Connection
Things explicitly connected are … connected.

So… that’s it?#

Pretty much…#

Proximity
Similarity
Enclosure
Closure
Continuity
Connection

Break#

Best practices in Explanatory Data Visualization#

Make a scatterplot with Fertility Rate vs Life Expectancy#

Add Extra Dimensions#

Color markers by continent
Size markers by population

BEST PRACTICE: SIMPLIFY#

Make it legible
Eliminate clutter: get rid of elements that don’t aid to the understanding of the message (chart junk)

Make it legible#

Move the legend outside#

Adjust marker sizes to make differences visible#

Eliminate clutter#

Get rid of rectangle box and spines#

Improve legend#

Don’t show the population part

Adjust ticks + label text size#

BEST PRACTICE: DRAW ATTENTION to your important points#

Things to know:

Which are my important points?
What is my message?
What do I want to show?

Things to do:

Emphasize your foreground data
De-emphsize background data

“I want to see how Italy is doing compared to other countries”

Add Labels to Countries of interest#

BEST PRACTICE: USE COLOR WITH INTENTION#

The most important color in Data Visualization is grey!
The standard categorical seaborn palettes are great: https://seaborn.pydata.org/tutorial/color_palettes.html
In case you want to choose your own? [Q: When is this the case?]

Improve original palete#

“I want to see how Italy is doing compared to some Asian Country”

Improve original palete v2#

BEST PRACTICE: ANNOTATE#

Add title#

Add current year for context#

BONUS BEST PRACTICE: Choose the right chart#

What do you want to show?
What is your message?
Who is your audience?

References#

Colin Ware, Information Visualization: Perception for Design
Stephen Few, Show Me the Numbers
Cole Nussbaumer Knaflic, Storytelling with Data

(Ware’s work is more detailed, the others pretty much just use the same summary)
There’s some interesting more recent work from people like Steve Palmer if you’re after papers to read.

Resources:#