cjerzak's picture
Update app.R
fe6aafe verified
raw
history blame
7.71 kB
options(error = NULL)
library(shiny)
library(shinydashboard)
library(dplyr)
library(readr)
library(sf)
library(rnaturalearth)
library(rnaturalearthdata)
library(countrycode)
library(ggplot2)
library(ggiraph) # For interactive hover tooltips
library(extrafont)
font_import() # run
loadfonts() # load the fonts into R session
# =============================
# UI
# =============================
ui <- dashboardPage(
# Use black skin for the dashboard
skin = "black",
dashboardHeader(
title = span(
style = "font-weight: 600; font-size: 18px;",
"Country Representation"
)
),
dashboardSidebar(
sidebarMenu(
menuItem("Map Type", tabName = "cartogramTab", icon = icon("globe"))
),
div(
style = "margin: 15px;",
selectInput(
inputId = "indexChoice",
label = "Select Representation Index:",
choices = c("Overall", "RepresentationGap", "Ethnicity",
"Gender", "Religion", "Language"),
selected = "Overall"
)
)
),
dashboardBody(
# Bring in the OCR A Extended font from Google Fonts
tags$head(
tags$link(
href = "https://fonts.googleapis.com/css2?family=OCR+A+Extended&display=swap",
rel = "stylesheet"
),
tags$style(HTML("
/* Force OCR A Extended font across the entire UI and all HTML elements */
html, body, h1, h2, h3, h4, h5, h6, p, div, span, label, input, button, select,
.box, .content-wrapper, .main-sidebar, .main-header .navbar, .main-header .logo,
.sidebar-menu, .sidebar-menu li a, .sidebar-menu .fa {
font-family: 'OCR A Extended', monospace !important;
}
/* Header gradient background */
.main-header .navbar {
background: linear-gradient(to right, #3b6978, #204051) !important;
}
/* Logo area (left corner of the header) */
.main-header .logo {
background: #1b2a2f !important;
color: #ffffff !important;
border-bottom: none;
font-size: 18px;
font-weight: 600;
}
/* Sidebar background */
.main-sidebar {
background-color: #1b2a2f !important;
}
/* Active or hovered tab in the sidebar */
.sidebar-menu > li.active > a,
.sidebar-menu > li:hover > a {
background-color: #344e5c !important;
border-left-color: #78cdd7 !important;
color: #ffffff !important;
}
/* Sidebar menu item icons */
.sidebar-menu .fa {
color: #78cdd7 !important;
}
/* Sidebar menu item text */
.sidebar-menu > li > a {
color: #b8c7ce !important;
font-size: 15px;
font-weight: 500;
}
/* Customize the boxes */
.box {
border-top: none !important;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
border-radius: 6px;
}
.box.box-solid > .box-header {
background-color: #204051;
color: #fff;
border-radius: 6px 6px 0 0;
}
/* Plot box spacing */
.box .box-body {
padding: 0 !important;
}
/* Footer text styling (plot captions, etc.) */
.small, small {
font-size: 75%;
}
"))
),
tabItems(
tabItem(
tabName = "cartogramTab",
fluidRow(
box(
width = 12,
title = strong("Global Leadership Project (GLP)"),
solidHeader = TRUE,
# Use girafeOutput instead of plotOutput
div(
style = "height: 80vh; padding: 10px;",
girafeOutput("cartogramPlot", width = "100%", height = "100%")
)
)
)
)
)
)
)
# =============================
# SERVER
# =============================
server <- function(input, output, session) {
# 1. Custom matches for countries not recognized by default in 'countrycode'
custom_iso_matches <- c("Kosovo" = "XKX",
"Somaliland" = "SOM") # or any valid code you prefer
# 2. Read CSV data and create ISO3 codes with custom matches
rankings_data <- reactive({
read_csv("CountryRepresentationRankings.csv", show_col_types = FALSE) %>%
mutate(iso_a3 = countrycode(
sourcevar = Country,
origin = "country.name",
destination = "iso3c",
custom_match = custom_iso_matches
))
})
# 3. Read/prepare world map shapefile
world_sf <- reactive({
ne_countries(scale = "medium", returnclass = "sf") %>%
dplyr::select(name, iso_a3, pop_est, geometry) %>%
st_transform(crs = "ESRI:54009") # Mollweide projection
})
# 4. Create the joined sf object (currently just a regular map)
cartogram_sf <- reactive({
merged_sf <- world_sf() %>%
left_join(rankings_data(), by = "iso_a3")
# Filter out rows with missing 'Overall', if you want to exclude them
merged_sf <- merged_sf[!is.na(merged_sf$Overall),]
merged_sf
})
# 5. Render the interactive map with ggiraph
output$cartogramPlot <- renderGirafe({
req(input$indexChoice)
plot_data <- cartogram_sf()
index_col <- input$indexChoice
# Build a tooltip string: customize to your preference
plot_data$tooltip_text <- paste0(
"<b>Country:</b> ", plot_data$Country, "<br/>",
"<b>Overall:</b> ", ifelse(!is.na(plot_data$Overall), plot_data$Overall, "N/A"), "<br/>",
"<b>Representation Gap:</b> ", ifelse(!is.na(plot_data$RepresentationGap), plot_data$RepresentationGap, "N/A"), "<br/>",
"<b>Ethnicity:</b> ", ifelse(!is.na(plot_data$Ethnicity), plot_data$Ethnicity, "N/A"), "<br/>",
"<b>Gender:</b> ", ifelse(!is.na(plot_data$Gender), plot_data$Gender, "N/A"), "<br/>",
"<b>Religion:</b> ", ifelse(!is.na(plot_data$Religion), plot_data$Religion, "N/A"), "<br/>",
"<b>Language:</b> ", ifelse(!is.na(plot_data$Language), plot_data$Language, "N/A")
)
# Use geom_sf_interactive with aes() + get() instead of aes_string()
p <- ggplot(plot_data) +
geom_sf_interactive(
aes(
fill = get(index_col),
tooltip = tooltip_text,
data_id = iso_a3
),
color = "grey20",
size = 0.1
) +
scale_fill_viridis_c(option = "D", na.value = "white") +
coord_sf(expand = FALSE) +
# Use a generic base_family to avoid font errors
theme_void(base_size = 14, base_family = "sans") +
labs(
fill = paste(index_col, "Index"),
title = "Country Representation Rankings",
subtitle = "Map Colored by Selected Representation Index",
caption = "Source: Global Leadership Project (GLP) & Natural Earth"
) +
theme(
plot.title = element_text(face = "bold", hjust = 0.5, size = 20),
plot.subtitle = element_text(hjust = 0.5, size = 14),
plot.caption = element_text(hjust = 1, size = 10),
legend.position = "bottom",
legend.direction = "horizontal",
legend.key.width = unit(2, "cm")
)
# Wrap the ggplot in a girafe object, including tooltip styling
girafe(
ggobj = p,
width_svg = 10,
height_svg = 6,
options = list(
opts_tooltip(
css = "background-color: white;
font-family: 'OCR A Extended', monospace;
color: black;"
)
)
)
})
}
# =============================
# Launch the Shiny App
# =============================
shinyApp(ui = ui, server = server)