Original


Ukrainian Ports

Source: https://war.ukraine.ua/food-security/ (2023).

Objective

This Visualisation is used in the website war.ukraine.ua. This a website created by the Ukrainian government to provide information about the war in Ukraine. The website includes news articles, infographics, and videos about the war. The visualisation shows the amount of grain exported from Ukraine’s seaports in 2021. The infographic shows that the ports of Chornomorsk, Pivdennyi, Mykolaiv, Odesa, and Port of Olvia were the largest exporters of grain in Ukraine. The topic is for the general user and is kept very simple , however the simplicity takes away from the understanding. Here are some technical issues I can see with the visualisation:

The visualisation chosen had the following three main issues:

  • • The size of each visual (sphere) is not relative to the amount distorting the values
  • • The text labels are too small in font making it difficult to read the Port names.
  • • There is no legend to describe what Mt per year represents

These changes would make the visualization more informative and user-friendly. 1. The Data should follow these standards Clarity: The data should be presented in such a way that it leaves no room for misinterpretation or confusion. 2. Accuracy: The image should stay truthful to the data it represents, without any distortions or misrepresentations. 3. Relevance: The visualisation needs to connect with its audience, serving the purpose it was created for and staying aligned with the context. 4. Efficiency: The viewer should be able to grasp the information quickly, without needing to invest unnecessary effort in understanding the visualisation. 5. Consistency: The same style, layout, and colour scheme should be maintained throughout the visualisation to ensure a cohesive and harmonious presentation.

This visualisation does not truly represent accuracy because of the distortion of size to value represented. The efficiency and clarity is muted as it is unclear without investigation what Mt represents as a value ( I had to search elsewhere on the page to understand it means Millions of Metric Tonnes) The consistency is lacking as the size of font for ports is small for viewing.

Reference

Code

install.packages("ggplot2")
## package 'ggplot2' successfully unpacked and MD5 sums checked
## 
## The downloaded binary packages are in
##  C:\Users\vidaey9\AppData\Local\Temp\12\Rtmpy6DOdI\downloaded_packages
install.packages("RColorBrewer")
## package 'RColorBrewer' successfully unpacked and MD5 sums checked
## 
## The downloaded binary packages are in
##  C:\Users\vidaey9\AppData\Local\Temp\12\Rtmpy6DOdI\downloaded_packages
library(ggplot2)
library(RColorBrewer)

# Create a data frame
df <- data.frame(
  Port = c("Chornomorsk", "Pivdennyi", "Mykolaiv", "Odesa", "Other", "Port of Olvia"),
  Amount = c(14.6, 12.9, 9.7, 5.8, 3.59, 2.9)
)


p1<-ggplot(df, aes(x=reorder(Port, Amount), y=Amount, fill=Port)) +
  geom_bar(stat = "identity") +
  coord_flip() +
  scale_fill_brewer(palette="Dark2") +
  geom_text(aes(label=Amount), position=position_dodge(width=0.9), hjust=-0.25) +
  xlab("Port") +
  ylab("Millions of Metric tonnes per year") +
  ggtitle("Yearly Shipping Quantities by Port") +
  theme_minimal() +
  theme(legend.position = "none",
        panel.grid.major = element_blank(),
        panel.grid.minor = element_blank(),
        axis.text.y = element_text(size=14))


p2<-ggplot(df, aes(x=reorder(Port, Amount), y=Amount)) +
  geom_segment(aes(x=Port, xend=Port, y=0, yend=Amount, color=Port), size=1.5) +
  geom_point(aes(color=Port), size=5, alpha=0.7) +
  scale_color_brewer(palette="Dark2") +
  coord_flip() +
  theme_minimal() +
  theme(legend.position = "none",
        panel.grid.major = element_blank(),
        panel.grid.minor = element_blank(),
        axis.text.y = element_text(size = 14)) +
  xlab("Port") +
  ylab("Millions of Metric tonnes per year") +
  ggtitle("Yearly Shipping Quantities by Port")

# First, install and load the necessary library
install.packages("highcharter")
## package 'highcharter' successfully unpacked and MD5 sums checked
## 
## The downloaded binary packages are in
##  C:\Users\vidaey9\AppData\Local\Temp\12\Rtmpy6DOdI\downloaded_packages
library(highcharter)

Data Reference

Reconstruction

The following plots fixes the main issues in the original.

  • I Increased the font size of the text labels so that they are easier to read.

  • I Increased the size of font for Port

  • I Includes descriptor showing what Mt means

# Use hchart function to create a bar plot
hchart(df, "bar", hcaes(x = reorder(Port, Amount), y = Amount, color = Port)) %>%
  hc_title(text = "Yearly Shipping Quantities by Port", style = list(fontSize = "24px", fontWeight = "bold")) %>%
  hc_xAxis(title = list(text = "Port", style = list(fontSize = "20px", fontWeight = "bold")), labels = list(style = list(fontWeight = "bold")), categories = df$Port) %>%
  hc_yAxis(title = list(text = "Millions of Metric tonnes per year", style = list(fontSize = "20px", fontWeight = "bold")), labels = list(style = list(fontWeight = "bold"))) %>%
  hc_legend(enabled = FALSE)