The little of visualisation design: Part 15

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns a similar theme to two previous LittleVis posts (#10, #14) about squeezing more potential from annotated features. In this case it is about a clever little design choice incorporated into a project’s title: the project being ‘Where the population of Europe is growing – and where it’s declining‘ by the team at Berliner Morgenpost.

LoVD-Part15a

As you see in the title, the colour associations are immediately explained through the underlining strokes, indicating the areas where the population is growing (orange) and declining (blue). There is a more detailed colour key provided as well, but given the title is amongst the first places our eyes are directed towards this immediate colour attribute explanation offers a nice ‘quick start’ route into the project below.

LoVD-Part15b

The little of visualisation design: Part 14

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns a clever approach to squeezing more potential out of your colour keys, as demonstrated by the project ‘Rethinking Detroit‘ by the National Geographic, looking at the changing fortunes of Detroit’s neighborhoods block-by-block.

LoVD-Part14a

The colour key shows the degree to which a block of properties has been largely vacated/abandoned (the so-called “Urban prairie” in green) or has preserved its status as a traditional residential area (in brown). Rather than just show a colour scale, the key doubles up as a bar-chart, showing the proportion of the city’s area, in square miles, of each banding.

LoVD-Part14b

The little of visualisation design: Part 13

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design was a hard one to select, such were the range of great features (see here, here, here, here and here) demonstrated by this project by the LA Times graphics team showing ‘Every shot Kobe Bryant ever took. All 30,699 of them.‘. I decided to focus on the matter of orientation assistance, as it is something relevant in my thinking right now.

LoVD-Part13a

When you zoom into the display, using the traditional navigation buttons or double click over the space of interest, you can quickly lose a sense of where you are spatially. Plotting 30,000+ data points gets busy and so to preserve visibility of these points you cannot really afford to incorporate much – if anything – in the way of background colouring or annotation to draw out the court markings.

LoVD-Part13b

The designers of this project therefore provide a useful thumbnail map of the court which provides a highlighted rectangle to indicate the portion of the court you are currently looking at. As you zoom in further the thumbnail pitch position changes so that it is always centred on where you are.

The little of visualisation design: Part 12

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns the use of interactive visual guides to help readers perceive values in a stacked area chart, specifically the classic ‘How Different Groups Spend Their Day‘ produced by the New York Times all the way back in 2009.

LoVD-Part12a

Wherever the user’s cursor is positioned on the chart (it sensibly snaps to only 10 minute intervals), a vertical guide is illustrated to help assist the eye towards the true height of each layer at that position on the chart. It also thickens the stroke width of the line for the specific layer they are focusing on reading.

LoVD-Part12b

This type of annotated chart assistance is helpful because judging the plotted value on an area chart at any given point is open to be misreading – as explained by this nice post.

The little of visualisation design: Part 11

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns colour choices for divergent scales, ie. when you are showing quantitative scales in two directions either side of a pivot/breakpoint (often zero or an average). In this analysis by the Washington Post, we see a choropleth map showing the gender gap in adult employment rates for children of low-income families, based on the county where they grew up.

LoVD-Part11a

The little issue here concerns the respective shade of purple/green used for the extremes – the highest value colour bands – which, inevitably, tend to represent the most interesting insights of such analysis. Whilst the underlying choice of a purple > green colour scheme makes loads of sense (and importantly will be colour-blindness friendly) the darkest shades of the purple and green are very similar upon scanning the map.

LoVD-Part11c

LoVD-Part11b

Sure, you *can* distinguish between these shades but it is perhaps more effort for the eye to perform this separation, quickly, than it needs to be. Maybe making the second darkest shade of purple/green representative of the highest value banding would make it a little easier.

The little of visualisation design: Part 10

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns the enhanced role of annotated captions. In the well-known work ‘Gun Crimes‘ by Periscopic, some of the main findings of analysis are provided in captions located beneath the main chart (this exists in both years of analysis, I’m focusing here on the 2010 view).

LoVD-Part10a

The smart feature here is that when you click on the respective captions, this provides a shortcut for the user by automatically applying the necessary criteria in the main chart above to formulate the associated view of the data that supports the finding described.

LoVD-Part10b

The little of visualisation design: Part 9

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns the juxtaposition of photo-imagery within a chart display. In this analysis by Vox 2,000 voters were surveyed to find out which of the 2016 candidates they were able to correctly recognise. The charts produced show the breakdown of the results and (logically) include a small image showing the faces of each candidate for reference.

LoVD-Part9a

One of the subtle design choices I like here is the deliberate cropping of the least recognised candidates’ images. Due to the smaller ‘correctly recognised’ values, the available space to accommodate the images is already diminished*. Rather than see this as a reason to relocate or perhaps proportionally shrink the images, notice how the faces of Kasich and O’Malley partially disappear below the axis, editorially reinforcing the findings of the analysis.

LoVD-Part9b

(* Incidentally, I probably wouldn’t normally repeat the value label word ‘Correct’ on each bar – once should be enough – and so removing this would create more space in practice).

The little of visualisation design: Part 8

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns creative thinking about the most meaningful orientation of a chart, in this case a scatterplot produced by FiveThirtyEight that shows analysis about the average favourability and unfavourability scores of a range of political names across the first few months of 2015.

LoVD-Part8a

Rather than leave the chart in its typical y-axis up/x-axis across layout, it is rotated clockwise by 45° to draw focus on the relative mapping of the plotted records according to four meaningful quadrant regions within the chart, indicating the general popularity and profile of each politician. In particular, and substantiated by colour, there is vertical significance in being more popular (above the line) and less popular (below the line).

Although some readers may find it a little more challenging, as a consequence of this rotation, trying to read off the coordinate values compared to the more standard approach (simulated below), the presentational emphasis on the meaning of the position rather than the position itself represents an astute editorial choice.

LoVD-Part8b

(See also this chart by Adam Pearce)

The little of visualisation design: Part 7

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns a clever (but quite simple) way of helping to guide a viewer’s eye towards changes on a map between two points in time. This project from the Guardian plots the results of the UK Election in 2010 compared to the projected results for 2015 using adjacent cartograms.

LoVD-Part7a

Only the constituencies that are forecasted to switch to a different political party are emphasised in colour – the exceptions – but it is the inclusion of the arrow and the shape outlining, as you hover over each area, to draw focus towards the related pairs that I find works ever so well.

LoVD-Part7b

Think of this as the equivalent of using your arm/hand/fingers to draw attention to a key feature in a display if you were presenting a visualisation in person.

The little of visualisation design: Part 6

This is part of a series of posts about the ‘little of visualisation design’, respecting the small decisions that make a big difference towards the good and bad of this discipline. In each post I’m going to focus on just one small matter – a singular good or bad design choice – as demonstrated by a sample project. Each project may have many effective and ineffective aspects, but I’m just commenting on one.


The ‘little’ of this next design concerns the use of colour and specifically the restrictions caused by the universal application of ‘corporate’ colour palettes. There are benefits from applying consistent colours to facilitate brand recognition but sometimes this can cause unnecessary obstruction.

LoVD-Part6a

In the Gallup chart above, showing trends for how people identify with the US political parties, it would seem to be more logical to use the established associations of Republican = red, Democrat = blue and Independents = grey.

LoVD-Part6b

Whilst I appreciate it only requires the reader to learn 3 new colour associations, by not utilising the classic colour associations it does undermine the ‘available immediacy’ that this chart should have been able to offer.