In this file, we intent to deconstruct and reconstruct an online visualisation by making it more suitable for its targeted audience.

Click the Original, Code and Reconstruction tabs to read about the issues and how they were fixed.

Original

List of Countries by GDP (nominal) per capita.

web


Source: Wikipedia, List of countries by GDP (nominal) per capita, 2018.
By KREOH - Own work, CC BY-SA 4.0, Link


Objective

The original data visualisation present on a Wikipedia page is targeted at the general population. That means the audience come from varied background and intellectual levels. Thus, the information should be presented with maximum clarity and minimum complication.

On the other hand, this visualisation lacks many aspects; thus, fails to communicate the point and justify the information neatly.

The visualisation chosen had the following three main issues:

  • Lack of clarity - The title of the visual is oddly placed, causing trouble to understand what is presented. The title lacks a ‘pop’. The font is also not appropriate as it merges with other information. A viewer is highly likely to face troubles to notice the title in the first 3 seconds.

  • Confusion - The visualisation is very busy in terms of the colours and brightness, where the brain can’t find the focus. All the colours are too bright to convey the direction of the data. It is hard to understand the significance of colours and hues.

  • Disorganised - The image looks very disorganised in terms of space utilisation. The legend is out of proportion to the map. It is very big, grabbing all the attention to itself. Additionally, it doesn’t justify the data well as the data is in continuous form and legend puts it in discrete form.

Overall, the image fails to justify the data by leading to confusion, flatness and ineffectiveness.

Reference


Code

The following code was used to fix the issues identified in the original. The data is cleaned using R studio and R libraries before plotting into the plot.

library(ggplot2)

# this colour is used for NA values
na.value.forplot <- 'grey'


map_plot <- ggplot (final_data,
                    aes(x = long,
                    y = lat, 
                    group = group)) + # using longitude and latitude to plot countries
  
  geom_polygon(aes(fill = GDP), 
               colour = "white") + # colours are changing on GDP value
  
  labs(title = "GDP Per Capita (Nominal), 2018 - Measured in USD, In Thousand(k)",
       subtitle = "GDP Per Capita Adjusted For Price Changes (Inflation) Over Time And Price Differences Between Countries",
       caption = "Data source: World Economic Outlook Database, IMF") +
  
  theme(panel.background = element_rect(fill = 'white'), 
        axis.title.x = element_blank(),
        axis.text.x = element_blank(),
        axis.ticks.x = element_blank(),
        axis.title.y = element_blank(),
        axis.text.y = element_blank(),
        axis.ticks.y = element_blank(),
        axis.line = element_line(colour = "black"),
        panel.border = element_rect(colour = "black", 
                                    fill = NA)) + # designing the main plot elements
  
  geom_point(data = final_data, 
             aes(size = "No Data"), 
             shape = NA, 
             colour = "grey") + # Missing data elements
  
  guides(size = guide_legend("No Data", 
                             override.aes = list(shape = 15, size = 3), 
                             title.position = "bottom", 
                             keywidth = 0.01, 
                             label.position = "bottom",
                             direction = "horizontal")) + # missing data legend
  
  theme(plot.title = element_text(size=15, colour="black")) + # title font and color
  
  theme(plot.subtitle = element_text(size=10, color="#565656")) + # subtitle font and colour
  
  theme(legend.position= "bottom",
        legend.justification = c("bottom"),
        legend.title = element_blank(),
        legend.key.height = unit(0.09,"inch"),
        legend.key.width = unit(1.2, "inch"),
        legend.text = element_text(size = 8),
        legend.background = element_blank(),
        legend.box = "horizontal",
        legend.margin = unit(0.09,"inch"),
        legend.key = element_rect(colour = "black", fill = "grey")) + #missing data legend and colourbar elements
  
  scale_fill_gradient2(low = "#FAFBA3",
                      high = "#0A4C02",
                      midpoint = 50000,
                      mid = "#149804",
                      na.value = na.value.forplot,
                      guide = guide_colorbar(frame.colour = "black", 
                                           ticks.colour = "black"),
                      limits = c(0, 100000),  
                      breaks = c(0,1000,2500,5000,10000, 20000, 30000, 40000, 50000, 70000, 85000, 100000),
                      labels = c("0","","","$5k","$10k", "$20k", "$30k", "$40k", "$50k","$70k", "$85k", "$100k")) #colourbar elements and binning

Data Reference

*World Economic Outlook Dataset.(2020). Imf.org. 2020. Download Entire World Economic Outlook Database, October 2019. [online] Available at: https://www.imf.org/external/pubs/ft/weo/2019/02/weodata/download.aspx [Accessed 11 May 2020]..


Reconstruction

The following plot fixes the main issues in the original.



Design decisions

  • To improve the clarity, the position of the title has been revised. The relevant information has been added into the subtitle. The font has been increased to add an extra ‘pop’. A lighter tone is used for the subtitle to emphasis the title further.

  • Colours are meticulously selected to plot the data on the map. In general, ligher shades are associated with low degrees and darker shades for higher degrees. The same impression has been used while selecting colours. Generally, yellow-green signifies less harvest (poverty) while green signifies vegetation (abundance). Therefore, Yellow is used for below average (poor countries), green for average (wealthy countries) and darker shades of green for above average (wealthier countries). This colour scale has inherent meaning and a purpose which can be undestood even by a layman.

  • The colour bar is used to signify the meaning of the color shade, making grasping easier and effortless. The legend is big enough to understand the color symbolism, while not too big to distract the brain.

From above design decision, we have solved all the issues with the original visualisation. Further, adding more value to the data and making information more accessible.

The map is not made interactive but the static one, because it is supposed to replace wikipedia image where interactive visualisation are not in trend.