Photographic Composition and Design

and its application to Data Visualisation

by Chris Love

use Mouse Wheel to scroll down

(or use arrow keys)

and explore

Introduction

Over the next few pages we will be exploring photographic "rules" and techniques and discussing their application to data visualisations in Tableau. While a lot of these maybe well known to those already familiar with data visualisation best practice I hope seeing them from the viewpoint of another art may help appreciate them in a new way. All of the photographs come from my own portfolio.

 

See my website for other examples of my photography and my Tableau Public Gallery for my own Tableau Visualisations.

 

This story board was built using the Tableau Javascript API and pagePiling JS Plugin.

Aspect Ratio

What is it? Aspect ratio is the term used to describe the dimensions of an image by comparing the width to the height and expressing it in ratio form.

Why does it matter? The aspect ratio determines the subjects relationship with the edges of the image; it determines the amount of white space surrounding the image. Choosing the correct ratio in photography helps determine, say, the amount of sky in a landscape, or the amount of space around a portrait.

In photography, and data visualisation, the first decision we have to make around aspect ratio is often whether to orientate in landscape or portrait. However in data visualisation this is sometimes dictated for us, often by where the resulting image will be displayed - a blog for instance may have certain constraints around the widths of that can be shown.

Where we can choose, whether for photography or data visualisation, then two things may impact our choice of aspect ratio:

The amount of data - sometimes our subject is just too big to fit in one orientation;

The story we're trying to tell - e.g. tall buildings? The amount of sky can show isolation, and can be used in data visualisation to have similar effect, or to show relative sizes / outliers.

Image Example: Consider the image below, this dragonfly, a long slender beast, would have looked very different in a landscape orientation. Either the resulting image would have had two large chunks of useless background space either side, or the subject would need to be rotated at an unnatural angle. The vertical format shows off the full body without any wasted space in the resulting image.

Viz Example: With Data Visualisation the decisions are a little harder, particularly as decisions about individual worksheets then impact on general dashboard aspect ratio. For example in the visualisation over the page the vertical aspect ratios of the two components, the chart and text table, are dictated by firstly the labelling: horizontal text fits better on horizontal bars than on vertical bars (unless the bars are made very wide and then take up a lot of space), and secondly the space provided: more text can be fitted in a tall text table than a wide one. Together these two vertical components create a horizontal dashboard.

Viz courtesy of Craig Bloodworth of The Information Lab - click here to see if on Tableau Public

Lead the viewer

What is it? In photography we say good photographs, particularly within landscapes, lead the viewer into the image, be it through the lines within the image itself, which we call leading lines, or via shapes or sizes within the image that similarly guide the eye

Why does it matter? The human eye as it engages with a photo is a very fickle thing, it will wander across the image looking for a subject; this wandering is random at first, flitting across the image until it finds something of interest. Once it finds something it settles there momentarily, then starts to wander again. With lines, of linked objects if necessary, in a photograph you give the eye things to follow and draws them through the picture naturally, instead of letting the eye wander unsure of where to settle.

In a similar way observing the golden ratio can also help lead the eye through a photograph and create a natural experience for the viewer.

Image Example: Looking at the image below our eyes, which naturally start on the left, settle on the sweep of the brown heather and are lead by the curve round to the right, curving around and back along the horizon - this draws the viewer back to the main strong image in the piece which is the rock on the left. The way the eyes are allowed to flow over the image feels natural and so the viewer can quickly take it in without the eyes and brain doing too much work. Often this can be the difference between good and bad images.

Viz Example: Our eyes look over the Viz over the page in similar way to the previous image, they sweep over the top chart, travel down the right hand side and arrive, as if by magic, at the exact point of interaction. Kelly has clearly thought a lot about the design of this visualisation and how the user will arrive at this point.

Tip: In designing visualisations take a minute to look at a visualisation from the point of view of a first time viewer, where will their eyes settle, where will the view guide them to. If that isn't where you want them then either change the "leads" through the viz, or at the very least add a help button or pointer to where they should be.

Viz courtesy of Kelly Martin of Viz Candy - click here to see it on Tableau Public

Simplify the scene

What is it? This is exactly what it says it is, removing extraneous clutter from the photograph or background, either by changing the viewing angle, or by changing the depth of field to blur the background. Sometimes this is also done in post-processing.

Why does it matter? Again this is all about what the eye does as it scans over an image, we don't want it distracted by elements that aren't related t the overall composition of the piece. Likewise as we translate this into data visualisation terms then we don't want "chart junk" to distract the viewer from the main analysis.

Image Example: The Good. This image has no distracting clutter so the eye is free to settle on the subject, the butterfly takes centre stage. Note that I've also given the subject "room to breathe", and positioned it using the "rule of thirds".

Image Example: The Bad. Notice this image, while still a nice composition has a distracting twig in the background, this distracts the viewers eye leaving a less pleasing image.

Viz Example: In the superb Viz over the page (sorry for the scroll bar) Steven removes any distractions and shows just the necessary information, with some filters. This leaves the eye free to take in the information offered.

Tip: Steven has also given the Viz "room to breathe"; by giving the Viz a less squashed-in feeling he creates a pleasant experience for the viewer.

'>

Viz courtesy of Steven Carter of Monday Morning Viz - click here to see it in full on Tableau Public

Selective Colour

What is it? Selective colour is a post-processing technique which highlights just one or a few colours, leaving the rest in monochrome. The use of selective colour can be a great technique to quickly create a great looking image, in the right circumstances. Highlighting only a certain colour can bring out the parts of the image you want the viewer to focus on.

Why does it matter? In Data visualisation we can use the same technique to draw the viewers eye to details we want them to focus on, and get them to leave other details in the background

Image Example: Here the green background distracted from the detail on the hoverfly, so a change to monochrome with just the colour left in the hoverfly brings out the detail and leaves the viewer to focus on the subject.

Viz Example: In the Viz over the page Matt wants to draw attention to the outliers, so he uses selective colour to highlight only those over 2 s.d. drawing those to the viewers attention.

'>

Viz courtesy of Matt Chambers (Sir Viz-a-lot) - click here to see it on Tableau Public

Patterns

What is it? Our brains love patterns, we look for patterns everywhere, sometimes even where they don't exist. From a photographic point of view repeating patterns can make great photographs.

Why does it matter? In Data visualisation we can use repeating patterns in our visualisations to show similar trends, or outliers. Small multiples are very effective at showing this.

Image Example: In the sea of red the poppys form a blur as the pattern of flowers repeats but in the foreground we can still discern detail giving our eyes some interest in this sea of colour.

Viz Example: In this Viz I use small multiples to show how different words have changed usgafe, the pattern looks pleasing to the eye but all allows us to focus in on individual details and changes over time.

'>

Viz courtesy of ME! - click here to see it on Tableau Public

Break the Rules

What is it? Not sure about all these rules? Just break them, sometimes the best images are the ones that throw out the rule book.

Why does it matter? You should let your creativity be your guide, not be a slave to a rule book.

Thanks for reading. Please let me know your thoughts via Twitter.