---
title: "Lightning-Fast 100m Dashboard"
author: "Posit::conf2024"
date: "08-21-2024"
date-modified: today
description: "The 100m Dashboard! Dash your way to victory and look beyond! Take your gold medal and observe that this dashboard was built using just quarto."
teaser: "A dynamic Quarto-based dashboard analyzing 100m results."
categories: ["Interactive Visualizations"]
format: 
  dashboard:
    orientation: columns
    logo: /assets/images/olympics-logo.svg
image: /assets/images/olympics-logo.svg
code-tools: true
execute: 
  warning: false
  message: false
---


```{r}
#| label: load-packages
#| message: false
library(tidyverse)
library(gt)
library(scales)
library(plotly)
library(forcats)
```

```{r}
#| label: load-data
#| message: false
olympics_full <- read_csv("../../../assets/datasets/olympics.csv")
```

```{r}
#| label: prep-data
olympics <- olympics_full |>
  filter(!is.na(medal)) |>
  separate_wider_delim(cols = team, names = c("team", "suffix"), delim = "-", too_many = "merge", too_few = "align_start") |>
  select(-suffix) |>
  mutate(medal = fct_relevel(medal, "Bronze", "Silver", "Gold"))
```

# 🌞 Summer Olympics

```{r}
#| label: prep-summmer-data
summer_olympics <- olympics |>
  filter(season == "Summer")
```

## Column - Medals by sport and year {width="65%"}

### Row - Medals by sport {height="60%"}

```{r}
#| title: Medals by sport
#| fig-width: 8
#| fig-height: 6
plot_data <- summer_olympics |>
  mutate(
    sport = fct_lump_n(sport, n = 15),
    sport = fct_infreq(sport),
    sport = fct_rev(sport),
    sport = fct_relevel(sport, "Other", after = 0)
  ) |>
  count(sport, medal)

plot_ly(
  plot_data,
  x = ~n,
  y = ~sport,
  color = ~medal,
  colors = c("Gold" = "#d4af37", "Silver" = "#c0c0c0", "Bronze" = "#cd7f32"),
  type = 'bar',
  orientation = 'h'
) |>
  layout(
    barmode = 'stack',
    xaxis = list(
      title = "Medals",
      tickvals = seq(0, 7000, 1000),
      ticktext = format(seq(0, 7000, 1000), big.mark = ",")
    ),
    yaxis = list(title = "Sport"),
    legend = list(
      x = 0.8, y = 0.2,
      orientation = 'h',
      bgcolor = 'white',
      bordercolor = 'gray',
      borderwidth = 1
    ),
    margin = list(l = 60, r = 30, t = 20, b = 30)
  )

```

### Row - Medals by year {height="40%"}

::: {.card title="Medals by year"}
Due to World War II, no olympic games were held in 1940 and 1944.

```{r}
#| title: Medals by year
#| fig-width: 11
#| fig-height: 12
# Prepare the data
plot_data <- summer_olympics |>
  count(year, medal)

# Create the plotly plot
plot_ly(
  plot_data,
  x = ~year,
  y = ~n,
  type = 'scatter',
  mode = 'lines+markers',
  color = ~medal,
  colors = c("Gold" = "#d4af37", "Silver" = "#c0c0c0", "Bronze" = "#cd7f32"),
  marker = list(size = 8, color = 'white', symbol = 'circle')
) |>
  layout(
    xaxis = list(
      title = "Year",
      tickvals = seq(1896, 2020, 8)
    ),
    yaxis = list(title = "Medals"),
    legend = list(
      x = 0.8, y = 0.2,
      orientation = 'h',
      bgcolor = 'white',
      bordercolor = 'gray',
      borderwidth = 1
    ),
    margin = list(l = 60, r = 30, t = 20, b = 30)
  )
```
:::

## Column - Medals by country {width="35%"}

### Row - Value boxes {height="30%"}

```{r}
#| label: summer-calculate-most-medals
summer_most_golds <- summer_olympics |>
  filter(medal == "Gold") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)

summer_most_silvers <- summer_olympics |>
  filter(medal == "Silver") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)

summer_most_bronzes <- summer_olympics |>
  filter(medal == "Bronze") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)
```

::: {.valuebox icon="award-fill" color="#d4af37"}
Most golds:

`{r} summer_most_golds$n`

**`{r} summer_most_golds$team`**
:::

::: {.valuebox icon="award-fill" color="#c0c0c0"}
Most silvers:

`{r} summer_most_silvers$n`

**`{r} summer_most_silvers$team`**
:::

::: {.valuebox icon="award-fill" color="#cd7f32"}
Most bronzes:

`{r} summer_most_bronzes$n`

**`{r} summer_most_bronzes$team`**
:::

### Row - Tabsets of tables {.tabset height="70%"}

::: {.card title="Top 30 teams"}
Teams sorted in descending order of total medals.

```{r}
#| title: Top 30 teams
summer_olympics |>
  count(team, medal) |>
  pivot_wider(names_from = medal, values_from = n, values_fill = 0) |>
  mutate(total = Bronze + Gold + Silver) |>
  arrange(desc(total), team) |>
  slice_head(n = 30) |>
  mutate(Rank = c(1:30)) |>
  select(Team = team, Gold, Silver, Bronze) |>
  gt() |>
  cols_align(align = "left", columns = Team) |>
  data_color(
    method = "numeric",
    palette = "nord::aurora"
  ) |>
  opt_interactive(use_compact_mode = TRUE)
```
:::

::: {.card title="Bottom 30 teams"}
Teams sorted in ascending order of total medals.

```{r}
#| title: Bottom 30 teams
summer_olympics |>
  count(team, medal) |>
  pivot_wider(names_from = medal, values_from = n, values_fill = 0) |>
  mutate(total = Bronze + Gold + Silver) |>
  arrange(total, team) |>
  slice_head(n = 30) |>
  select(Team = team, Gold, Silver, Bronze) |>
  gt() |>
  cols_align(align = "left", columns = Team) |>
  data_color(
    method = "numeric",
    palette = "nord::frost"
  ) |>
  opt_interactive(use_compact_mode = TRUE,)
```
:::

# ❄️ Winter Olympics

```{r}
#| label: prep-winter-data
winter_olympics <- olympics |>
  filter(season == "Winter")
```

## Column - Medals by sport and year {width="65%"}

### Row - Medals by sport {height="60%"}

```{r}
#| title: Medals by sport
#| fig-width: 8
#| fig-height: 6
# Prepare the data
plot_data <- winter_olympics |>
  mutate(
    sport = fct_lump_n(sport, n = 15),
    sport = fct_infreq(sport),
    sport = fct_rev(sport),
    sport = fct_relevel(sport, "Other", after = 0)
  ) |>
  count(sport, medal)

# Create the plotly plot
plot_ly(
  plot_data,
  x = ~n,
  y = ~sport,
  color = ~medal,
  colors = c("Gold" = "#d4af37", "Silver" = "#c0c0c0", "Bronze" = "#cd7f32"),
  type = 'bar',
  orientation = 'h'
) |>
  layout(
    barmode = 'stack',
    xaxis = list(
      title = "Medals",
      tickvals = seq(0, 1500, 250),
      ticktext = format(seq(0, 1500, 250), big.mark = ",")
    ),
    yaxis = list(title = "Sport"),
    legend = list(
      x = 0.7, y = 0.2,
      orientation = 'h',
      bgcolor = 'white',
      bordercolor = 'gray',
      borderwidth = 1
    ),
    margin = list(l = 60, r = 30, t = 20, b = 30)
  )

```

### Row - Medals by year {height="40%"}

::: {.card title="Medals by year"}
Due to World War II, no olympic games were held in 1940 and 1944.

```{r}
#| title: Medals by year
#| fig-width: 11
#| fig-height: 12
library(dplyr)
library(plotly)

# Prepare the data
plot_data <- winter_olympics |>
  count(year, medal)

# Create the plotly plot
plot_ly(
  plot_data,
  x = ~year,
  y = ~n,
  type = 'scatter',
  mode = 'lines+markers',
  color = ~medal,
  colors = c("Gold" = "#d4af37", "Silver" = "#c0c0c0", "Bronze" = "#cd7f32"),
  marker = list(size = 8, color = 'white', symbol = 'circle')
) |>
  layout(
    xaxis = list(
      title = "Year",
      tickvals = seq(1896, 2020, 8)
    ),
    yaxis = list(title = "Medals"),
    legend = list(
      x = 0.2, y = 0.8,
      orientation = 'h',
      bgcolor = 'white',
      bordercolor = 'gray',
      borderwidth = 1
    ),
    margin = list(l = 60, r = 30, t = 20, b = 30)
  )

```
:::

## Column - Medals by country {width="35%"}

### Row - Value boxes {height="30%"}

```{r}
#| label: wint-calculate-most-medals
winter_most_golds <- winter_olympics |>
  filter(medal == "Gold") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)

winter_most_silvers <- winter_olympics |>
  filter(medal == "Silver") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)

winter_most_bronzes <- winter_olympics |>
  filter(medal == "Bronze") |>
  count(team, sort = TRUE) |>
  slice_head(n = 1)
```

::: {.valuebox icon="award-fill" color="#d4af37"}
Most golds:

`{r} winter_most_golds$n`

**`{r} winter_most_golds$team`**
:::

::: {.valuebox icon="award-fill" color="#c0c0c0"}
Most silvers:

`{r} winter_most_silvers$n`

**`{r} winter_most_silvers$team`**
:::

::: {.valuebox icon="award-fill" color="#cd7f32"}
Most bronzes:

`{r} winter_most_bronzes$n`

**`{r} winter_most_bronzes$team`**
:::

### Row - Tabsets of tables {.tabset height="70%"}

::: {.card title="Top 30 teams"}
Teams sorted in descending order of total medals.

```{r}
winter_olympics |>
  count(team, medal) |>
  pivot_wider(names_from = medal, values_from = n, values_fill = 0) |>
  mutate(total = Bronze + Gold + Silver) |>
  arrange(desc(total), team) |>
  slice_head(n = 30) |>
  select(Team = team, Gold, Silver, Bronze) |>
  gt() |>
  cols_align(align = "left", columns = Team) |>
  data_color(
    method = "numeric",
    palette = "nord::aurora"
  ) |>
  opt_interactive(use_compact_mode = TRUE,)
```
:::

::: {.card title="Bottom 30 teams"}
Teams sorted in ascending order of total medals.

```{r}
#| title: Bottom 30 total medals
winter_olympics |>
  count(team, medal) |>
  pivot_wider(names_from = medal, values_from = n, values_fill = 0) |>
  mutate(total = Bronze + Gold + Silver) |>
  arrange(total, team) |>
  slice_head(n = 30) |>
  select(Team = team, Gold, Silver, Bronze) |>
  gt() |>
  cols_align(align = "left", columns = Team) |>
  data_color(
    method = "numeric",
    palette = "nord::frost"
  ) |>
  opt_interactive(use_compact_mode = TRUE,)
```
:::