---
title: "Comp/Stat 112: Accessibility"
author: "INSERT STUDENT NAMES HERE"
output:
  bookdown::html_document2:
    split_by: none
    toc: yes
    toc_depth: 3
    toc_float:
      toc_collapsed: true
    number_sections: false
    code_download: true
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE, error = TRUE, tidy = FALSE, message = FALSE, cache.extra = packageVersion("tufte"))
library(tidyverse)
library(ggplot2)
library(babynames)
library(htmltools)
```

# Accessible Visualizations

```{example name="Accessing a Data Visualizations Non-Visually"}
Chat with a classmate and brainstorm ways that someone who is blind might access the data within a data visualization. You can think about ways that they might already be doing so and future technology that could help. Get creative!
```

> ANSWER:

## Chosing an Accessible Color Palette {-}

```{example}
Copy and paste the data visualization below (showing how flipper and bill length differ across three species of penguins) into this [color blindness simulator](https://www.color-blindness.com/coblis-color-blindness-simulator/) and look at with the Monochromacy lens.  Update the color scale so the points are distinguishable in grayscale. 
```


```{r fig.alt = "Scatterplot showing how flipper and bill length differ across three species of penguins. Gentoo penguins typically have the longest flipper length with values ranging between 210-230mm. Adelie and Chinstrap have flipper lengths ranging between 180-210mm. Chinstrap and Gentoo have longer bill lengths with an average of around 50mm and Adelie penguins have bill lengths ranging between 35-45mm." }
data(penguins, package = "palmerpenguins") 

penguins %>% 
  ggplot(aes(x = flipper_length_mm, y = bill_length_mm, color = species)) +
  geom_point() + 
  labs(title = "How do flipper and bill length compare between penguin species?", x = "Flipper Length (mm)", y = "Bill Length (mm)")
```

### Highcharter Introduction {-}

```{r}
library(highcharter)
```

```{r}
hchart( 
  penguins,
  "scatter",
  hcaes(x = flipper_length_mm, y = bill_length_mm, group = species)) %>% 
  hc_title(text = "How do flipper and bill length compare between penguin species?") %>% 
  hc_xAxis(title = list(text = "Flipper Length (mm)")) %>%
  hc_yAxis(title = list(text = "Bill Length (mm)"))
```


```{example}
Chat with someone next to you. How do the default Highcharter and ggplots differ for the penguin scatterplot? If you are feeling brave, try right-clicking the graph and selecting `Inspect element` to see how the images are represented in code.
```

> ANSWER:

```{example}
Use highcharter to recreate the ggplot bar graph shown below showing the number of babies given the 10 most popular female names of all time.
```

```{r}
PopularNames <- babynames %>%
  filter(sex == "F") %>%
  group_by(name) %>%
  summarize(total = sum(n)) %>%
  arrange(desc(total)) %>%
  head(10)
```


```{r, fig.alt = "Bar chart showing the most popular female babynames over the last 150 years in the U.S."}
PopularNames %>% 
  ggplot(aes(x = name, y = total)) + 
  geom_col()
```

## Adding Accessibility Features to Highcharter Graphs {-}

```{r}
  hchart(PopularNames, "column", hcaes(x = name, y = total), 
    accessibility = list(
      enabled = TRUE,
      keyboardNavigation = list(enabled = TRUE))) %>%
  hc_exporting(
    enabled = TRUE,
    accessibility = list(enabled = TRUE)) %>% 
  hc_yAxis(title = list(text = "Number of Babies"),
           accessibility = list(description = "Babies Count",
                                range = "0 to 4.5 million"))%>%
  hc_xAxis(title = list(text = "Name")) %>%
  hc_add_dependency(name = "modules/accessibility.js") %>%
  hc_add_dependency(name = "modules/exporting.js") %>%
  hc_add_dependency(name = "modules/export-data.js") 
```

```{example}
Use a screen reader to browser through the graphics you've created. What happens when you navigate over the penguins ggplot scatterplot? What happens when you navigate over the two Highcharter barcharts? Can you find the subtle difference between them in how the y-axis is read?
```

> ANSWER:

## Practice: Accessible Graphics {-}

```{exercise, name="Accessibility Fun"}
Create an accessible graph! You can pick a graph that you've created in a previous class (e.g. for TidyTuesday) or create something new. First convert it to a Highcharter graph, then add the code to make it more accessible!
```

## Practice: Sonification {-}


```{exercise, name="Sonification Fun"}
Create a sonified graph! You can pick a scatter or line plot graph that you've created in a previous class or create something new and add sonification!
```